Tutorials, Tips, and Resources

for Creating a Better Blog



How To Style Blogger Sidebar Widget Titles

Widget titles are the titles that appear above your sidebar widgets. Usually, you will simply type them into the “title” box in your widget editor and they are styled based on your chosen template.

We’re going to take it a little farther today though and add a custom background image behind our widget titles for a custom effect.

To do this, we’ll first need to decide what we want to do to the titles. Things like adding a custom line under them, or adding a little graphic are all done through background image CSS properties.

On the Sample site I’ll be using for this, my sidebar titles currently look like this:

sidebartitles1

Not very attractive or eye-catching, right? I’d like to add some circle elements to match the header, make the text larger, and center it. You’ll need to plan out in your head how you are hoping for the titles to look before you get started. It makes things go much more smoothly. So, first things first let’s change the font. Changing the font size and positioning will give me a better idea of the size of background image I will need to complete the customization.

You’ll notice if you go to the Template Editor in Blogger (Template > Customize) and then to Advanced > Gadgets, it highlights the sidebar text. The options here allow you to instantly change the font and colour but not much else. The downside to this is that it also automatically changes your post date along with it. Dumb, I  know. So, instead of using this method, we’re going to use our own CSS method for the font. The class name for the element we are going to be working on (the sidebar title text) is .sidebar h2. Go into Advanced > CSS and apply the following code:

.sidebar h2 {
color:#000000; /* This is your font hex color */
font-size: 18px;  /* This is your font size */
text-align: center;  /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
}

So now that the code is in, the sidebar titles should look something like this now (you can still choose the font family through the Gadgets panel if you like):

sidebartitles2

Great! We are ready to make our background image. The easiest way I find to do this is to take a screenshot of your sidebar and open it in Photoshop. Then, in a new layer, add your custom design. For example, my Photoshop file would look like this:

sidebartitles3

The dots I’ve added over the Popular Posts title to match the header would be behind the title when we code, however. So don’t pay much attention to that because we are now going to remove the screenshot in Photoshop and just save the dots and line I’ve added.

1. Hide the layer with your screenshot on it

2. Use the Crop tool to crop around the design:

sidebartitles4

3. Save your cropped final image as a jpg and upload it to your server or a photo hosting site like Photobucket.com.

If you’re using Photobucket, use the “direct link” option when we add it to the CSS.

sidebartitles5

Now to code it all together.  In your above code, add the background-image property like so, and the other elements in red:

.sidebar h2 {
background-image:url(https://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*your photobucket URL*/
background-position: top center;  /*centering the bg behind the text*/
background-repeat: no-repeat; /*this is a non-repeating image, we only want it displayed once*/
height: 53px; /* the height in pixels of your background image */
color:#000000; /* This is your font hex color */
font-size: 18px;  /* This is your font size */
text-align: center;  /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
}

Now my background image looks like this on the site:

sidebartitles6

You may now want to better position your text on top of the background image. For example, here I would like the text to sit almost on the line below. You adjust positioning of the text with the padding element (in red below).

.sidebar h2 {
background-image:url(https://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*your photobucket URL*/
background-position: top center;  /*centering the bg behind the text*/
background-repeat: no-repeat; /*this is a non-repeating image, we only want it displayed once*/
height: 53px; /* the height in pixels of your background image */
color:#000000; /* This is your font hex color */
font-size: 18px;  /* This is your font size */
text-align: center;  /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
padding-top: 20px /* this height works well for me and pushes the title down */
}

sidebartitles7

In doing this, you may notice the space underneath your title has increased. All we have to do to pop that back up is adjust the height and make it a smaller number.

.sidebar h2 {
background-image:url(https://i11.photobucket.com/albums/a165/yourusername/sidebar.jpg~original); /*your photobucket URL*/
background-position: top center;  /*centering the bg behind the text*/
background-repeat: no-repeat; /*this is a non-repeating image, we only want it displayed once*/
height: 27px; /* the height in pixels of your background image */
color:#000000; /* This is your font hex color */
font-size: 18px;  /* This is your font size */
text-align: center;  /* Centers the title*/
text-transform: uppercase; /* This makes all of the letters capitals. lowercase is the opposite. optional. */
padding-top: 20px /* this height works well for me and pushes the title down */
}

sidebartitles8

The sidebar titles are now totally custom styled and you can still enter the widget names as usual. You can get creative with these and design them however you like!


Navigate