Adding a Specialized Style Class to a Text Widget

Do you want to highlight the content of a text widget so that it appears differently than other widgets or text within your sidebar? Try creating your own class for the widget, and see how quickly you can make your site stand out from that standard “template” look of other Artisteer generated themes.To demonstrate this, I’ll be using the example of the subscription widget I created for my personal site Reflecting the Designer. You’ll notice several elements to this widget. The background of the widget is a threaded “leather” circle, and it contains both bulleted text links and additional images which link to my social networks. Let me break it down step-by-step to show you how really easy this is to accomplish.

The Background

The first thing you need to do is create your background image. Note: This works best if you are using a block style for your widgets that doesn’t already contain a background or header background image. If you are, but still want to incorporate this, please see my post on how to create and add more block styles to your theme.

After you’ve created your image, save it to you theme’s images folder so it’s easy to access from your site.

Things to remember when creating your background image:
1.) Make sure that your image is not too large so that it hangs over the edge of the sidebar or too small that your text hangs over the edge of the background (unless that’s the look you are going for.) An easy way to ensure that it’s the right size is to make a screenshot of your sidebar before creating your image in Photoshop. You can crop that image down then using the sidebar as a guideline to ensure it’s the right size.

2.) Make sure that your background is not too busy if you plan to add text or links on top if it.

Creating Your Class

Now that you have your background image created and uploaded to the web, create your “div class” for the site and add it to your style.css.

1.) Open up a text editor (like Notepad), and first give your div class a name that is easy for your to remember and matches what you are trying to accomplish. I named mine div.subscribe because I wanted to use this style only for my rss subscription links and social networks.

2.) Add your basic style to your div class as seen below. The width and height need to match the background image, and your url of course will need to link to the image you created. If you created a texture or image that you want to repeat, simply change “no-repeat” to how you want your image to repeat within the widget.

 width: 226px;
 height: 230px;
 background-image: url('images/rss-back.png');
 background-position: top center;
 background-repeat: no-repeat;

3.) Next, you’ll need to add styling that tells your widget how to treat text. This is only necessary if your default sidebar text would not be the correct style or color to show up against the background you created. Because my background image is quite dark while my sheet is light, I needed to change the text color. Below, is the style I added for the bulleted list I wanted to add. Note, I also created a large padding from the left so that the links would start in the proper part of the background image and not hang outside of the image. I chose text, link, and hover colors to match the footer links because the background is the same.

div.subscribe ul li
 margin-left: 30px;
 font-size: 14px;
 line-height: 125%; 
 color: #C1A486;
 padding: 0 0 0 10px;
 background-image: url('images/blockcontentbullets2.png');
 background-repeat: no-repeat;

div.subscribe a,
div.subscribe a:link
 text-decoration: none;

div.subscribe a:hover
 text-decoration: underline;

4.) If I would not have added the image above the text links, I would have also needed to adjust the top padding of the text so that it would all fit within the circle rather than starting at the top of the circle and hanging over the edges. This is an example of what I could have done to add style to a paragraph if used within the widget without an image above it.

div.subscribe p
 padding-top: 90px;

5.) I also needed to add a little bit of styling to the images I incorporated into the widget so they would be positioned exactly where I wanted them. below is what I added so my social icons appeared centered at the bottom of the widget with enough space surrounding them.

div.subscribe img
 margin: 7px 0 0 -5px;
 padding: 0;

Adding Your Text Widget

Once you have created all of your style, simply add it to the bottom of your style.css file. If adding this directly to an already uploaded theme, you’ll need to go to Editor underneath Appearance in your Dashboard to find your style.css file. Add the style to the bottom of your sheet so that it is easy to find again and edit if necessary.

Now that you’ve created your class, it’s time to add it to your text widget. All you need to do is surround your text widget contents with the following:

<div class="Name-of-Your-Class">Text Wiget Content</div>

Below is an example of what my widget code looks like for the image posted above. It includes the div class which is a background image, an image resting above the text, three bulleted text links, and three social icons which are also links resting beneath the text.

<div class="subscribe"><img src="link to the subscription image I created sitting above the links" alt="" /> <a href="RSSLink" target="blank">Access Post Feed</a> <a href="EmailSubscriptionLink" target="blank">Access Posts via Email</a> <a href="RSSforCommentsLink" target="blank">Access Comment Feed</a><center><a title="Twitter" href="LinktoTwitter" target="blank"><img src="Linkto-Twitter-Image" alt="" /></a> <a title="Facebook" href="LinktoFacebook" target="blank"><img src="Linkto-Facebook-Image" alt="" /></a> <a title="LinkedIn" href="LinktoLinkedIn" target="blank"><img src="Linkto-LinkedIn-Image" alt="" /></a></center></div>

Please comment to show your own creative uses of a div class within a text widget. As always, feel free to post any questions you might have regarding this tutorial, and feel free to contact me if you are interested in any customized design work either for printed media or the web!

© 2011, All rights reserved.

May 15th, 2011 at 7:32 pm

Love this tutorial and your site – beautiful. But a novice when it comes to CSS and it’s unclear to me – do I add the div tag directly into the widget? Because when I do nothing shows but the text. So for example I created an image per your instructions with the div class “tweet” and uploaded it. But when I create the text widget and give label it this way Twitter Feeds all that shows up is “Twitter Feeds.” I’m sure I’m overlooking something terribly obvious. Thanks!

May 15th, 2011 at 8:43 pm

You need to add your css styling for the div within the style.css file of your theme. Also, make sure that you’ve uploaded the image to that theme’s images folder as well (or somewhere else on the web that is easy to access). The part you add just to the text widget is at the bottom of the post. I gave an example of what my code looks like. If you are still confused, email me with the exact code you are trying to use.

May 20th, 2011 at 2:47 am

That widget is beautiful – I have widget envy!
Thanks for the great tips, I’ve not found much on the web to help those like myself who are newbies at CSS /HTML build on the fab stuff artisteer does. I’ll be trying these out and coming back!

May 20th, 2011 at 3:04 am

Your welcome, Kate. Looking forward to seeing what you come up with.

June 27th, 2011 at 2:38 pm

I too am having a similar problem to Doug – I’m planning to use a text widget as a verticle menu with a graphical background and custom buttons. But I seem to have failed at the first hurdle – changing the background of the text widget. I have added this to the end of style.css:

width: 217px;
height: 648px;
background-image: url(‘images/nav_frame.png’);
background-position: top center;
background-repeat: no-repeat;

have uploaded the image into the images area of the theme, and entered the following into the text widget itself:

Text Wiget Content

It’s as if something in the styling from Artisteer is overriding it. I’ve pasted below the source for the page that is displayed, in case that helps:

Text Wiget Content

Any help appreciated. These guides are great; I just need to get pointed in the right direction …

June 27th, 2011 at 5:10 pm

Hi David,

Unfortunately the div class doesn’t appear on the comments (WP doesn’t let you add code like that into a comment.) Make sure to check the direction of your quotation marks to start with. That’s a common culprit. Also, be sure that you put your image within the image folder of your specific theme and not just the image folder of your WordPress install. The actual css looks correct that you put above. Another easy mistake is making sure that your title of the image matches what is put into the css as well as the title of the div. Artisteer themes do not hinder doing this at all.

June 28th, 2011 at 7:16 am

Thanks – it was the direction of quote mark that did it. I didn’t even know single quotes had a direction. I had cut&pasted from your text above – it might help others if you used non directional quotes in your examples.

February 11th, 2012 at 11:16 am

Hi, I try to do my own style class for text widget, following this nice tutorial. I did test background and made CSS – it is visible on my web site, but I have problem with position of tekst (link to other page) – it seems like WP doesn’t use the font properties from CSS I did, but theme default. I used CSS from above example and just changed it according my file names and URLs… The example is visible at attached testing web site (left sidebar). Any suggestion ?

February 17th, 2012 at 5:01 am

It will use the font defaults unless you specify the exact changes that you want. For example, if links are underlined by default, and you don’t want that, you need to specify text-decoration: none; in the CSS. I hope that makes sense.

February 25th, 2012 at 5:56 pm

Very impressive site and appreciate the Artisteer tips section!

I am in the process of using Artisteer to design mobile sites.

Would you please be so kind to discuss the type of fonts used throughout your website. I can’t seem to find them in Artisteer.

Many thanks,

February 28th, 2012 at 8:28 pm

I’m using some fonts that are actually @font-face kits. You can find them on Font Squirrel. Basically, you need to download the actual font files and upload them to your theme. Then, you add the css for the font in your style sheet. It opens up a lot of font options that way. Artisteer only comes with standard web fonts.


This blog is kept spam free by WP-SpamFree.