04 February 2012

Add different style for each widgets

Advertisements

One of my blogger friend asked me about different font, background color and style for each widget used in blog. After some search and experiments I come up with an easy procedure to add different style for each widgets. You can see the end result in following image:


You can even change the font and colors of text in different widgets.

You should know that each widget has it's ID into the template.And we have to find accurate ID of the widget we want to add style to.

To find the widget ID go to EDIT HTML and search for id='sidebar

You will get following code.

<b:section-contents id='sidebar-right-1'>
<b:widget id='LinkList1' locked='false' title='My Links' type='LinkList'/>
<b:widget id='Label2' locked='false' title='Labels' type='Label'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
<b:widget id='Label1' locked='false' title='Category List' type='Label'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section-contents><b:section-contents id='sidebar-right-2-1'>
<b:widget id='LinkList10' locked='false' title='' type='LinkList'/>
</b:section-contents>

Now as you can see each widget has different ID. e..g the widget Popular Posts has widget ID PopularPosts1
My Links > LinkList1
Labels > Label2
Blog Archive > BlogArchive1

If you have lots of widgets then don't get confused. Just remember the order of widgets in your website.


Adding style to different widgets

Now we have widget ID we can easily stylize them.
Go to EDIT HTML and look for ]]></b:skin>

Now add following code ABOVE the ]]></b:skin>

#LinkList1 {
background:#C6F5FE;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #b9d4dd;
}

#LinkList1 h2 {
padding-top:10px;
font-size:14px;
}

#LinkList1 a:link {
color:#999999;
text-decoration:none;
}
#LinkList1 a:visited {
color:#999999;
text-decoration:none;
}
#LinkList1 a:hover {
color:$titlecolor;
text-decoration:underline;
}

#Label2 {
background: #f5ece3;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #dcd3ca;
}

#Label2 h2 {
padding-top:10px;
margin-bottom:5px;
font-size:14px;
}

#BlogArchive1 {
background:#DEFEE1;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #05AD14;
}

#BlogArchive1 h2 {
font-size:14px;
padding-top:10px;
}

You can edit the values to create tons of effects for other widgets of your website.

Related Posts

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More