Open up your theme’s style.css file and add something like this
`#sidebar div.widget { margin-top: 20px; border-top: 1px dotted #AEE100; }`
#aee100 is the light green border used around your post. You could make it thicker with 2px or 3px or change the color to something else.
@mercime thanks for your reply, have tried it and it was cool but not really what am looking for. as i want each sidebar widget item to have a space bottom and top so that each of them can stand alone. anymore suggestion will be highly appreciated.
regards
But that is exactly what mercime has given you!, explain why that doesn’t do what was asked?
I suspect that in reality what you are after is that each widget appear in it’s own sidebar, that is is widget has the overall look the sidebar does with rounded corners, which is a little more work to do and involves you identifying the rules that are applied to #sidebar, removing the selectors and replacing with .widget and then adding in revised margins, #sidebar would still need some rules though, if that’s what you are actually after have a go at re-factoring the rulesets to show us and we can help where you get stuck.
@hnla apologies if my question was not clear. thats exactly what i want, i want each widget to appear in its own sidebar so that they will not join together. any pointer to right direction in achieving that will be highly appreciated.
thanks
@hnla, @mercime, I just created multiple sidebar on my test site, i followed tutorial from the following link : http://www.quickonlinetips.com/archives/2007/11/how-to-create-multiple-dynamic-sidebars-for-wordpress-widgets/ and i have the extra sidebar widget, however, they still show as one with no space in between the content so please how can i achieve this.i want the sidebars to have space inbetween one another.
my test site is : http://naijaping.co.cc/
thanks
@naijaping you misunderstood hnla. You do not need multiple dynamic areas or widget areas to effect the look that you wanted for your sidebar. This can easily be done by changing styles in style.css file, something like this before you made the changes.
`div#sidebar {
background: transparent none;
border: none;
float: left;
margin: 0;
padding: 0;
width: 224px;
}
div#sidebar .padder {
margin: 0px;
padding: 0px;
}
div#sidebar div.widget {
-webkit-border-radius:5px;
background:#fff;
border:1px solid #AEE100;
border-radius:5px;
padding: 15px;
}`
That’s what I meant 
Lets add -moz in to the mix though:
`
div#sidebar div.widget {
background: #fff;
border: 1px solid #AEE100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 15px;
}
`
Need to add margin-bottom as well
`div#sidebar div.widget {
background: #fff;
border: 1px solid #AEE100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
padding: 15px;
}`
@mercime, @hnla, thanks soooooo much, just what i wanted. you are indeed a stunning stars…. but how can i style login sidebar form as it has been striped naked now.
have a look: http://naijaping.co.cc/
Regards
Well that sidebar markup doesn’t carry the widget class that you styled on so you will need to add :
#sidebar #sidebar-login-form to your widgets ruleset as a grouped selectors set :
`
div#sidebar div.widget,
#sidebar-login-form {
background: #fff;
border: 1px solid #AEE100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px;
padding: 15px;
}
`
If you also wanted the login/ jin us text/button then you will have to add a division around that markup and the form and style that e.g:
`
all the sidebar form and text markup here
`
And replace the #sidebar-login-form above with #login-join-box on the ruleset.
@mercime, @hnla, you guys rock my world, thank u thank you. have learnt a lot from you, thanks sooooooooooooo much for your help.
regards
