Sidebar gadgets (widgets) in separate boxes

February 14, 2009

In the article Each Post in the separate box, we've learned how to divide our posts in the boxes using the same style that's present in the template.
Now, we'll do the same for the Sidebar elements - widgets (gadgets). The idea is the same. We'll separate one from another, and each of them will have a house :]

Demo: Gadgets in separate boxes

You should keep in mind:

► this is the example for the Blogs that already have a customized (stylized) Sidebar (colorized, borderized..)
► this example was made in Minima Blogger template (so your code may be a bit different, but the procedure is the same)
► it doesn't matter if you have "heavily" customized template, you can apply these setting anyway

UNDERSTAND THIS
We have to imitate the main style of our sidebar-wrapper (the one that carries the style for the whole sidebar element), and apply it to individual widgets (gadgets). Here's the style of the sidebar-wrapper in this example:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

...the styles we're interested in here are: background and border
...next is to apply this to our widgets...

Ok, LET'S DO IT
First, back up your current Blogger template. Then, go to: LAYOUT ► EDIT HTML ► and locate this part in the code (this is for default Minima blogger template, it may look a bit different for you):

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...DELETE it, and replace with this one:

.sidebar .widget {
background:#ADD8E6;
border: 1px solid #E9967A;
margin:0 -5px 1.5em -5px;
padding:5px 7px 5px 7px;
}

.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

...we've divided the main widget and sidebar widget in order to apply the style...
...in pink, you can see the copied style from sidebar-wrapper...
...in green, you can adjust the padding of the widget content (if the padding was 0px, the text would be to close to the border)..

► Next thing is to delete (hide) the style from the sidebar-wrapper. Why? Because if you don't, your sidebar will look like this:
To avoid this, find the sidebar-wrapper:

#sidebar-wrapper {
background:#ADD8E6;
border: 1px solid #E9967A;
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

...and DELETE the background and border (or any other style you've applied to your widgets/gadgets):

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

...that's it.