How to remove dotted lines in sidebar of blogspot?

Add This To Del.icio.us Share on Facebook StumbleUpon This Add to Technorati Digg This

I never liked these dotted line separated of gadgets in sidebar of blogger. These lines appear dirty to me and I removed them.

Just thought to tell you about it, so that if you don't like these dotted lines, you could also remove them from sidebar.


How to do that?

Step1:- Go to Layout -- Edit HTML and find the below mentioned code

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

You could see that bottom border of sidebar widget is of 1px and its dotted. Margin and padding are also present.

We have to modifiy width, margin and padding to zero. And modified code will look like as:-
.sidebar .widget, .main .widget {
border-bottom:0px dotted $bordercolor;
margin:0 0 0em;
padding:0 0 0em;
}

Now, save the template and dotted lines from sidebar has been removed!

Note:- If you have created more than one sidebar with different identification (eg sidebar1, sidebar2, sidebar3, etc), please look at the code with caution and wherever you find similar code as mentioned above, set width, margin and padding to zero.

Making width zero (border-bottom:0px dotted $bordercolor;), will remove dotted lines. Rest two (margin and padding) will decrease distance between two gadgets in sidebar.

BlueOcean

For Further Reading,