WordPress CSS Trick: Image Titles in Sidebar

I was browsing through the WordPress.org support forum today when I came across a question that I thought was worthy of a blog post. The question was:

I am trying to change the titles of my sidebar widgets (i.e. “Pages,” “Recent comments,” “Meta,” etc) to images. Since my sidebar is widgetized, it seems this is more difficult than simply changing a few things in my sidebar.php document.

Does anyone have any tips?

It seems that with the implementation of widgets in later versions of WordPress, users have had some trouble customizing their sidebar titles with images. In early versions of WordPress, one could just go into the sidebar.php file and replace the titles of sidebar sections with an image using the good ol’ fashion HTML tag. This is no longer possible since widgets are dynamically added to the sidebar and are no longer located in the sidebar.php file.

Although I personally would rather use text to title sections on my sidebar, for the reduce loading times and various other reasons, using an image can allow you to use non-standard fonts and add a bit of flare to your blog. I’m going to show you have to achieve this using a bit of “detective work” and CSS.

Step One: Creating your image

This is more of a tip than a step.

Before you begin, you should have the image you’ll be replacing the widget title with already created and uploaded to your server (or a free image host). It’s also a good idea to dive into the stylesheet of your WordPress theme to figure out the widget of the sidebar, and create your images using that width. The default theme, Kubrick, has a sidebar width of 190px.

Step Two: Find out the structure of a widget title for your theme

The first, and easiest, step is to figure out how your WordPress theme outputs a widget’s title in the sidebar. You can do this by going to your dashboard and adding the widget you’d like to replace the title of to your sidebar. Once the widget is placed in the sidebar, browse over to your blog. In your browser click View–> Page Source (or just “Source if you’re using IE). Now search the document for the title of the widget you’re looking for; for example “Recent Posts”.

If you’re using the default WordPress theme, Kubrick, you should see something like this:

<li id="recent-posts" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
<li><a href="http://yourblogurl.com/?p=1">Hello world!</a></li>
</ul>
</li>

You’ll notice that the <h2> tag encasing the title of the widget, Recent Posts, has a class defined as “widgettitle”. This is used to define the overall style of every widget title on your blog, but because we’re going to want each widget to have it’s own unique image as a title, we are not going to worry about this class. What we wanted to find out was the class of the overall widget, in this case that can be found in the first line inside the <li> tag, and that class is “widget_recent_entries”.

Step Three: Writing the CSS

Now that we know what class to use, we can write the CSS that will insert our image in place of the text title of the widget. I’m using the default theme as an example, remember that your theme’s sidebar may output widgets in a different fashion and this may effect the CSS you’re going to be writing:

li.widget_recent_entries h2 {
display: block;
width: 125px;
height: 45px;
text-indent: -9999px;
background-image: url('http://www.theurlofyourimage.com/image.jpg');
background-repeat: no-repeat;
background-position: center center;
}

The above CSS should be added to the end of your stylesheet and will replace the text in title of the Recent Posts widget with an image of your choosing. Remember to edit the width and height to suite your image, and also remember to change the URL to point at your image.

Now that you have one image title in your sidebar, use the same process to find the class for each widget title you want to change!

I hope this little tutorial helps out in some way!

Advertisements

8 thoughts on “WordPress CSS Trick: Image Titles in Sidebar

  1. This is the best/only tutorial I can find on sidebar image titles. It’s working for all widgets except Text. Is there extra code because you can have multiple text widgets in place at one time?

    Any help would be great!

    Thanks for this tutorial!

  2. Hi, checked out this tutorial but it seems I cannot find the widget ids that you are talking about. My website is datepalmfestival.net, any thoughts?

    Thanks in advance.

  3. Hi, thanks for the tutorial. I have a problem since I can’t find the class in my template which I’m currently using and its hard for me to backout for change to another template, since I’m almost done modifying with the changes and its quite a lot. Currently I’m using simple news template (it’s a free edition — this is the live preview: http://simplenews.themesnack.net/ ) and I can only found 2 which is sidebar and sidebox. And also left and right sidebar widget which is half the size and I will not use it.

    I’ve tried finding the class for example “Recent Post” and “Recent Comments” but I can’t find one. This is the style css regarding the sidebar and the sidebox.

    /* SIDEBAR */

    #sidebar{
    float: right;
    word-wrap: break-word;
    overflow: hidden;
    margin-right: 30px;
    margin-top: 15px;
    }

    .sidebar {
    line-height: 1.5em;
    }

    .sidebar h3{
    background: #F4F4F4;
    margin-top: 0;
    font-family: Helvetica, Arial, Sans-Serif;
    color: #333333;
    font-size:12px;
    border-top: 5px solid #00788F;
    border-bottom: 1px dotted #666666;
    text-transform: uppercase;
    padding: 5px;
    font-weight: bold;
    margin-bottom: 15px;
    }

    .sidebar a, .sidebar p {
    color: #272727;
    }

    .sidebar li {
    margin:0;
    padding: 5px 0px;
    line-height:1.5em;
    border-bottom: 0px dotted #CCC;
    }

    .sidebar a:hover .sidebar li a:hover, .sidebar li:hover a{
    text-decoration: none;
    color: #FE000A;
    }

    .sidebar, .sidebox{
    width: 320px;
    margin-bottom: 30px;
    padding: 5px 0;
    }

    .sidebox {
    margin-bottom: 25px;
    }

    #wp-calendar{
    text-align: center;
    width: 300px;
    margin-left: 10px;
    background: #EEE;
    }

    #wp-calendar caption {
    color: #000;
    font-weight: bold;
    margin: 5px 0;
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6em;
    padding: 5px 0;
    }

    #wp-calendar td{
    padding: 5px 0;
    }

    #wp-calendar tr{
    padding-top: 10px;
    }

    #wp-calendar th {
    background: #666;
    color: #FFF;
    font-weight: bold;
    padding: 7px 5px;
    margin-bottom: 15px;
    }

    table, th, td {
    text-align: center;
    }

    #wp-calendar a {
    color: #FE000A;
    }

    #l_sidebar {
    float: right;
    width: 150px;
    border-top: 0;
    margin-bottom: 20px;
    margin-right: 0;
    }

    #r_sidebar {
    float: right;
    width: 150px;
    border-top: 0;
    margin-bottom: 20px;
    margin-right: 25px;
    margin-left: 20px;
    }

    #l_sidebar h3 {
    border-top: 5px solid #FEC100;
    }

    #r_sidebar h3 {
    border-top: 5px solid #FEC100;
    }

    .sbox{
    width: 150px;
    margin-bottom: 30px;
    padding: 5px 0;
    }

    I’ve try and inserted the code which in may case is:

    li.sidebar h3 {
    display: block;
    width: 320px;
    height: 60px;
    text-indent: -9999px;
    background-image: url(images/latest-comments.png);
    background-repeat: no-repeat;
    background-position: top center;

    but the image will not appear and only sort of blinking and gone. But when I didn’t use the “li” this will make all image the same for every widget and I guess this is what you’ve said as the overall style. So I try using sidebox instead and the result is also the same, blinking and gone. The same result when I excluded the “li”, all widgets will display the same image.

    At the moment I’m still running the WP on my localhost, so I guess I can’t show you the result from my side.

    Is there a solution for this? Please help if any.

    Thank you in advance and I’m sorry for my bad English.

    Regards,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s