Blogger Widgets Blogger Widgets

Header slide

Friday, 17 August 2012

Create colour background

It is quite simple to have different colour of background for each gadget.  Each gadget is having a  different "widget id".  I just simply go to design-template-edit HTML-expand HTML-proceed.  In order to find the "widget-id" easily , you can put a title in each post and search for it in the template by using Ctrl F.  I have put in the following code above the ]]></b:skin> and the code will automatically appear in my CSS (design-template-customise-advance)

#HTML3 {. 
background:#00ff00;
border-top:10px solid #ff004e;
border-bottom:10px solid #ff004e;
border-left:10px solid #ff004e;
border-right:10px solid #ff004e;
}

#HTML1 {
background:#f1c232;
border-top:10px solid #ff004e;
border-bottom:10px solid #ff004e;
border-left:10px solid #ff004e;
border-right:10px solid #ff004e;
}

#BlogList2 {
background:#ffff00;
border-top:10px solid #ff004e;
border-bottom:10px solid #ff004e;
border-left:10px solid #ff004e;
border-right:10px solid #ff004e;
}

#Label1 {
background:#ff00ff;
border-top:10px solid #ff004e;
border-bottom:10px solid #ff004e;
border-left:10px solid #ff004e;
border-right:10px solid #ff004e;
}

The "green highlighted" is the "widget id".  I even can frame it! Now my side-bar gadgets look nicer now!




Blogger Widgets