How to add different styles for each widget

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.You can even change the font and colors of text in different widgets.

• 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.