How to turn Sidebar titles into stylish ones.

I will explain how to customize these sidebar titles. You can change the font, size, color, add border, background to the sidebar titles.

  • First of all we have to find below code into your template. 
  • Just search for .sidebar h2
.sidebar h2 {
margin:0;
padding:0 0.2em;
line-height:1.5em;
}
  • If above code is not present in your template.
  • Add it just ABOVE the ]]></b:skin>
  • Now you have the sidebar code we will customize the titles.
  • Adding Border, Add this Code border:1px solid #000000; below the .sidebar h2 {


Above is the all four borders to your sidebar titles. You can choose to add bottom, top, left and right border or combination of them.
border-bottom:1px solid #000000;
border-left:1px solid #000000;
You can change the border thickness, style and color.
Adding Background color

  • Just add background:#A9A9A9; below the .sidebar h2 {

You can add any color by changing color code value.
Adding Background image
In this case we will add a background image to the sidebar titles. First will will need to prepare the image. Create your own image or get from internet. Crop it to fit with your sidebar and upload it on Picasa or PhotoBucket or other image sharing website.

The width of the image should be same as the width of your sidebar. The hight of the image will be adjusted in line height.
The entire code will be as follows:
.sidebar h2 {
background:url(YOUR_IMAGE_URL)no-repeat;
margin:0px;
padding:0px 0.8em;
line-height:50px;
}
Changing Font of sidebar titles
Just Add font-family:Impact; below the .sidebar h2 {
You can try different fonts like:
Georgia
Palatino Linotype
Book Antiqua
Times New Roman
Arial
Helvetica
Arial Black
Impact
Lucida Console
Courier New
Verdana
Tahoma
Lucida Sans Unicode and many others
Changing size of the font
Just add font-size: 120%; below the .sidebar h2 {
To adjust the font size, change the value in red.
0 Comments
Disqus
Fb Comments
Comments :

0 comments:

Post a Comment