Help Column ~ Decorating your sidebar ~ part 1

These tutorials are written for the blogger premade template and more specifically the minima design but should be valid for all templates except the names might differ.

• Sidebar Title Images (little icons beside the title)

1. Find an appropriate icon (it shouldn't be too big no more than three times the size of your titles approximately) and host it on your favorite photohost... I recommend photobucket or flickr but you can use blogger if you do not own a custom domain. Make sure you know it's size (width and height) and url.

2. Log into your blogger account and go to the layout page and then to the "Edit Html" section. If you have a custom template, as a precaution, make a backup by using the download feature.


3. Scroll and find the sidebar section of your blog. Look for the sidebar title section. On the minima it looks like this

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

But it might be something else for example on my templates it's .sidebar h2 .... it might be things like .right h2 or .left h2 .... use your common sense normally these are named logically. Do not forget that there's a preview on blogger so if you modified the wrong section you'll see it before saving.

4. Now we add the image to the sidebar title section we found. We will be doing so by using the background image function. Add the following 3 lines before the last }

background-image: url("http://www.thelinkofyourimage.gif");
background-position: left 50%;
background-repeat: no-repeat;

The background-image (the first line) is for the link of your icon. Change the bit in red in the above code to your own image url.
The background-position (second line) is for the placement of your image relative to your sidebar titles. You have different options. The first value (in pink) is the horizontal positioning (left, right, 50% for center) and the second value (in blue) is for the vertical positioning (top, bottom, 50% for center).
The background-repeat (the third line in green) is pretty straight forward it repeat the image or it doesn't for an icon it's best to not have it repeat unless you want to create a sort of divider. In any case there are different value you can enter for the repeating factor (no-repeat, repeat, repeat-x, repeat-y). Repeat-x... repeats the image only horizontally while repeat-y ... repeats the image vertically.

5. Now preview ... you will see your icon but it's covered by the title right? As if it was underneath. Or it's cut off at the top and bottom?

We can fix that. You need to know the height and width of your image.
Add the following beneath the pasted code of before but before the }

padding: 0px 0px 0px 0px;

Yes four zeros. You will need to modify these zeros to fit your image. The first zero is for the top, the second the right, the third the bottom and the fourth the left.
Play with these until your image appears nicely but a quick trick I use. Divide the height of your image into two... and replace the first zero (top) and the third zero (bottom) with that number. Preview, now your icon should not be cut off anymore but it's still hidden by the text.
Now this will depend on the positioning you choose earlier. If you chose left then place the number equivalent to the width of your image instead of the fourth zero (left) and if you chose right replace the second zero (right). You may want to add a slightly larger number than the exact width of your image... so there's a bit of extra space between the words and the image.

Preview. Is it to your liking? No? keep modifying the padding numbers until it's perfect.

6. Save! and you're done. Now a little icon will appear beside each sidebar title. If you have more than one sidebar you will probably have to repeat these steps for the other sidebars as well.

I will post some freebie icons later today or possibly tomorrow so you can use them on your blog.