In our article on Background Image for Blogger Template, we had explained how to have a background color or background image in the body, main posts, or sidebars. This will apply to most blog templates except templates like TicTac. Instead of having the entire sidebar in one color, you can also assign a different color to each of the widgets. This guide will let you know how you can change the background color of each individual widget.
Let us assume that you have created a Link List via Template -> Page Elements -> Add a Page Element. If your Link List has no title, temporarily assign to it a title. Next, go to Template -> Edit HTML and press Ctrl+F to search for that title.
For example, we have a Link List entitled “My Blogs”. We search for this title in the template and we see this:-
<b:widget id='LinkList1' locked='false' title='My Blogs' type='LinkList'/> |
|---|
What we want to know is the widget ID. In this case, it is called “LinkList1”. The next Link List will be “LinkList2” and so on. If you have a HTML/JavaScript page element, it will be “HTML1” and if it were a Label List, it will be named “Label1”.
We need to set a background color for this particular widget. Scroll back up to where we see all the # and insert the following code after a curly bracket }. For easy reference in the future, we have inserted it under /* Sidebar Content */ although it doesn't really matter where you insert it as long as it is between <head> and </head> and after a } character.
#LinkList1{ background: #FCDFFF; } |
|---|
We pulled off a color code from our Color Code Chart.
We can do the same for our LinkList2, Label1, Label2, HTML1, HTML2, etc. Just insert the relevant ID and color code.
#Label1{ background: #FCDFFF; } #HTML1{ background: #FCDFFF; } |
|---|
After that, Preview the template. This is what a colorful set of widgets can look like:-
With a wise choice of colors, you can customize the background color of each widget to something that you like and which suits the theme of the widget or Blog.
© Tricks for New Bloggers
6 comments:
I'd love to be able to add different background colors to my individual sidebar widgets. I'm using the minima template and can't find the # section mentioned "scroll back to where we see all the #". Am I missing it or is it different in this template? Thanks.
That is just a reference. Add the code anywhere between <head> and </head>. That is where you see #header, #main, and so on.
I wanted to change the background color of the "Blog Posts" section, but apparently this method doesn't work. Any suggestions?
Your method for adding a color behind each widget in the sidebar worked great, but I still have a margin to the right from the original sidebar color. Is there any way to extend the new color all the way across so that it covers the sidebar? I've been playing around with the code and can't get it to work (I know enough HTML to be dangerous!). I guess my other option is to change the original color to white and have every widget a different color. I am using template #897.
brilliant! THANK YOU ;)
thanks!
I have something to say ...