If you have upgraded to the newest version of WordPress, you are loving the ability to style your widgets individually. If you are an Artisteer user, and you’ve upgraded to version 3, you have this ability as well. What you may not be able to figure out, though, is how to edit the styling of your widget options.First of all, let me just explain that with version 3 and with the newest WP upgrade, you will see a Theme Options setting under your Appearance Dashboard. This will allow you to set defaults for a multitude of things. Some of which are the default settings for your sidebar widgets. There are three main options to choose from in any regular Artsiteer generated theme. They are
- block (the sidebar styling you created in Artisteer)
- post (styling used for text in posts)
- simple text (bare-bones widget styling)
Under each widget, you’ll also get an option to choose which style you’d like to use. The default sidebar choice will revert back to whatever you selected in your Theme’s Options panel.
If you use the simple text option, you’ll notice that it’s not too pretty, and it might not even match your theme very well at all. I just created a free theme in which I edited the styling used for the simple text widget, and below is the code I used. You can see a demo as of 12/31/2010 of this site by visiting http://test2.reflectingthedesigner.com. If you’ve found this post further into the new year, the theme might be different since it’s a testing platform.
Regardless, you can use the code below as a good base to help you add styling to your own simple-text widget area. Simply copy and paste this code into a text editor (ensure all quotation marks are facing the correct direction, as WP is infamous for messing with the code when I put it into a post.) I’ve included some helpful hints in parenthesis within the code to get you started.
.art-footer .art-widget-title (title of your widget)
height: 24px; (this is an enlarged line height to gie room for a border)
border-bottom: 1px dashed #84D2E1;
(You could also add a background image or color to the above code if desired.)
.art-widget p (paragraph margin)
margin: 8px 0;
.art-widget, (This is for all of the text coloring and style)
.art-widget ul li (this is the bullet style. Hint, I just copied and pasted my regular block bullet style here, but titled it art-widget and of course, made the font color match.)
padding: 0 0 0 10px;
Of course, make sure to remove all of my comments, and any extra space from them when editing your own. In my next post, we’ll take things a step further and I’ll show you how to actually add a whole new block option for your widgets. Hope this helps, and let me know if you have any comments or questions.
© 2010 – 2011, reflectingthedesigner.com. All rights reserved.