I frequently answer questions on the Artisteer WordPress Forum, and this was a recent question that popped up. Most Artisteer users have specifically styled a nice button, but don’t know how to add it to a widget or any other part of their site for that matter. It’s actually quite simple to do, and once you realize how, a whole lot of other styling possibilities will open up for you. So, here are the simple steps.
Here’s a very simple example of what I’m referring to and will demonstrate what the exact code below looks like.
1.) In your Widgets Panel (found under Appearance of the Dashboard), drag a simple text widget over into the sidebar location you want it.
2.) Add in the text and/or image(s) you’d like included in the widget. (Remember, you can use basic html code like <strong> </strong> for bold, <em> </em> for italics, etc. There are a lot of options.)
3.) Once you are done adding in your text and image or images, place the following code where you want to insert your button.
<p style="text-align: right;"><a class="button" href="#">Click Here</a></p>
4.) You can change the alignment to right, center, or left; replace the # with the url for the web address you want the button to link to; and, of course, change the words “Click Here” to whatever you want to say. Save your widget, and you are done!
Expand your horizons! There are tons of ways to add more styling to your theme posts, pages, or widgets, by simply adding a class to certain elements. Why don’t you try adding your post header class to some of your other headings in a page where you want to break up large pieces of text? Or, you could create a couple of different image classes in your CSS, and call to a specific one for a particular image in your post or page that you want to highlight. How about creating a specialty background for some text in a post or a page? Simply create the styling in your CSS, and then call the class where you want that styling to show up just like in the example above.
So, play around with it, and leave a comment with any questions or other ideas on how to use this tip!
© 2011, reflectingthedesigner.com. All rights reserved.