Widget customization - how to style each widget differently?

March 14, 2010

Well, this is interesting. We've already learned  to tweak and stylize our Blogger widgets (gadgets), in general. For example adding icon beside sidebar title heading and placing icon or image beside Labels and Links. That's cool. But now, we'll learn how to tweak and style each widget (gadget) differently! Meaning:
► each of your widgets (Labels, Archive, Links, custom widget) can have it's own looks (color, font, borders, images....anything!)
► remember that WIDGET is the same thing as GADGET

Ok, here's the simple example:

I've chosen to differ my widgets a bit, so I changed a the style of Labels, Links, Archive and Picture widget. I choose these widgets just for this example. Remember that you can do this with every other widget too!



There are a few simple steps you'll have to take:

► choose which widget you'd like to style, and identify it in Blogger HTML code
► add some CSS style in the code that will spice up our widget
► don't lose your marbles (be patient and creative)

Choosing and Identifying

Each widget added in Blogger Layout has a unique ID. We will use this ID to apply some style to our widget. So, our job is to dive into the Blogger HTML code, and locate these ID's. Let's go. From your Dashboard, go to:
LAYOUT ► EDIT HTML ► and scroll all the way to the bottom. Because I choose to style my Sidebar widgets (gadgets), I'll look inside of sidebar-wrapper. In my case, the code looks like this:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='Image1' locked='false' title='My Picture' type='Image'/>
<b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>
</div>

Ok. You can see the ID's of my widgets:
Label widget ID ► Label1
Links widget ID ► LinkList1
Picture widget ID ► Image1
Archive widget ID ► BlogArchive2

Sometimes, if you have a lot of custom widgets, it's hard to guess it's ID. In this case, just remember that their position is the same as they appear in your Blog frontpage. If the Labels widget is in the 1st place, it will be in the 1st place in the code too..
First step is done. Let's move on.


Styling and tweaking 

Now, the fun part. To style the widget, you'll have to know a bit of CSS. But don't worry, you can get this in minutes. In previous step , we've learned to identify the ID of our widget. Now, we'll use it. Let's start with customizing the Link List widget. From Blogger Dashboard, we'll go to:
LAYOUT ► EDIT HTML ► and locate this part (for easier searching, use CTRL + F, and type "/head"):

]]></b:skin>
</head>

ABOVE this part, you'll place the CSS style for your custom Link List Widget (gadget), so the whole thing will look like this:

#LinkList1 {

background:#FFF4BF;

padding-left:15px;

font:14px Arial;

border-bottom:2px solid #FFE25F;

}

#LinkList1 h2 {

background: url(http://i40.tinypic.com/wummhj.jpg) no-repeat bottom left;

height:35px;

padding-top:10px;

font-size:0px;

}

#LinkList1 a:link {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:visited {

color:#5F5F5F;

text-decoration:none;

}

#LinkList1 a:hover {

color:$titlecolor;

text-decoration:underline;

}

]]></b:skin>
</head>

Now to explain a bit:
The part in blue is the style for the specific widget box (in this case Link List). You can change background, font style, position, colors, borders of the widget.
Green part is defining only the HEADING of the widget. In my example, I've placed a picture instead of regular text, and with the "font-size:0px" the original heading is hidden. Pretty cool. This way, you can have different heading for each widget in your Blogger template!
In orange, I've defined how my LINK and HOVER colors will look like. I had to do this because the background of my new widget style was blending with original default link color. Now you know that you can use different colors for your links in every widget!

Here is the complete code with Labels and Picture widget (for my example):
View the code here.

#Label1 {
background: #DFF7FF;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #45B7DF;
}

#Label1 h2 {
background: url(http://i40.tinypic.com/12644z4.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
margin-bottom:5px;
font-size:0px;
}

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

#LinkList1 h2 {
background: url(http://i40.tinypic.com/wummhj.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

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

#Image1 {
background:#FFDFFE;
padding-left:15px;
font:14px Arial;
border-bottom:2px solid #FFAFFD;
}

#Image1 h2 {
background: url(http://i44.tinypic.com/qywqog.jpg) no-repeat bottom left;
height:35px;
padding-top:10px;
font-size:0px;
}

#Image1 img {
border-width:0px;
padding-left:25px;
}

]]></b:skin>
</head>

Ok, I think you've got it. Remember, this was just an example. You can do a lot more. The only important thing is to remember that you have to IDENTIFY your widget, and STYLE it through your Blogger code.

A little patience and a few cookies, and you're there.....

Smile!