Adding More Widget Styles to WP Part 1

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)
{
margin-bottom: 5px;
margin-top: 10px;
position: relative;
height: 24px; (this is an enlarged line height to gie room for a border)
font-size: 16px;
font-weight: bold;
padding: 0;
color: #fabb0f;
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-text,
.art-widget-text a,
.art-widget-text a:link,
.art-widget-text a:visited
{
color: #6FCADC;
font-size: 13px;
text-align: left;
padding: 5px;
line-height: 125%;
}

.art-widget a,
.art-widget-text a:link
{
color: #FABB0F;
text-decoration: underline;
}

.art-widget-text a:hover,
.art-widget a:hover
{
color: #FABB0F;
text-decoration: none;
}

.art-widget-text a:visited,
.art-widget a:visited
{
color: #FABB0F;
text-decoration: underline
}

.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.)
{
line-height: 125%;
color: #6FCADC;
padding: 0 0 0 10px;
background-image: url(‘images/blockcontentbullets.png’);
background-repeat: no-repeat;
}

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.

February 23rd, 2011 at 3:05 pm

Hi Sarah,
I trie to figure out how to style my widgets.
For start; where do I put above code?
And do I have to change something?
I mean: .art-footer .art-widget-title (title of your widget)
Do I give it my titel ??

Maybe you could help me, I need to create this layout with artisteer 3 for WordPress 3
http://www.onestep4all.nl/artisteer-layout/
(it just a testing/creating site with advertisements pop-under, sorry for that..)

tnx
greetings from Holland

Gerda

February 23rd, 2011 at 6:59 pm

The code for this specific post was referring to the “simple text” widget option within Artisteer generated themes. Just add the code I gave to the bottom of your css sheet, and you can play around with it accordingly. DON’T add the green items in parenthesis as those are just explanations of what the code is. If you want to have a box like the example you gave, you’d just need to add a background color to your widget and a border with some padding. I will email you with some basic instructions.

May 7th, 2011 at 8:03 pm

Sarah, I just sent a comment and your site claimed SPAM. I’m confused when to use the Artisteer on my Mac or online. I had no problems forwarding from Godaddy. You seem to have a grasp. Please point me to the forums or sites I should read.

Thanks

May 7th, 2011 at 8:14 pm

David, I’m confused by your comment. What do you mean that you don’t know whether to use Artisteer online or on your Mac? I also don’t understand what you mean by forwarding from GoDaddy? If you clarify your questions, I’ll be glad to respond.

It’s obvious that you use Artisteer based on your site. Do you mean that you want to know how to do editing to the code to your Artisteer generated site? If that’s the case, you can simply do it to the exported theme that you have on your WP site. All of my instructions are given to people editing directly from their WP dashboards. You can also simply edit the exported files before uploading them to WP.

Anthony
May 27th, 2011 at 2:17 pm

Love your sites and your style and thanks for posting tis information. Question. How does the simple text widget reference the above css and how does the title come into play? Is that the title of the widget, or the type of widget perhaps? I added the code to the bottom of my css file but nothing changed. Should the above code overwrite the artisteer generated code? In the past, I have styled widgets using inline css in a simple text widget, but it becomes difficult when replicating across multiple widgets. Again, thanks for the info.

May 27th, 2011 at 6:48 pm

The first example is the styling used for the “simple text” option for your widgets. If you are using Artisteer 3, you’ll see that each widget allows you to choose from a few options for the style… “block,” “post,” “sidebar default,” or “simple text.” By default the “simple text” widget doesn’t have much styling, so the post was done to show how you can customize that styling a little more. If you want to just style one particular text widget, you can add your styling to the css as you did, then in the text widget, add the div class that calls to that styling around your text or images. Hope that helps.

Amanda
February 29th, 2012 at 2:20 pm

You wouldn’t by chance know how to do this for blogger templates would you? I’ve been trying to figure out how to customize the widget titles for that, using artisteer, but am unable to make my coding work. Thank you!

February 29th, 2012 at 8:28 pm

Not off the top of my head, no. They handle widgets much differently and don’t give you the option of different styles. You actually need to style each widget individually within Blogger if you want a different style for each. What are you trying to accomplish?

Amanda
February 29th, 2012 at 10:59 pm

Well, for my individual blog, I would like to have a background image added to the widget titles so it looks more personalized & differentiated compared to the rest of the blog… but I also want to know how to add an underline to it or even a solid color behind it. I’m assuming that if I know one of these ways, then figuring out how to do the other style options would be pretty simple.
I’ve searched everywhere it seems to find an answer, and even have tried manipulating my code where it would appear that it would take effect, but I still haven’t been successful.

March 8th, 2012 at 5:09 am

You should still be able to add your desired image within the css. by finding the block header styling and adding a background image. I’m curious, though, are you using an Artisteer generated template or something else? In Artisteer you can design the block headers however you desire quite easily without having to worry about getting into the code itself.

February 29th, 2012 at 11:10 pm

If you want to do this across the board on all of your widgets, simply find the css in your template and adjust it as desired there. If you want to change just one, you can still follow my example above if you are using the basic javascript/html widget. Create your div and add the style accordingly. The css for blogger templates is usually located toward the top of the template while the html is at the bottom. I’d do a Ctrl+F and type in what you are looking for, and you should see if fairly quickly. Also, be sure that you check the enable widgets box so you are seeing everything.

LEAVE A COMMENT

Powered by sweet Captcha

Anti-Spam Protection by WP-SpamFree