Support » Themes and Templates » Add a line break between sidebar widgets

  • The widgets in both my right and left sidebars appear a bit crowded and I would like to add a line break between the bottom of one widget and the top of another.

    Would someone know the appropriate code and the location in the template where I shoudl add it to?


Viewing 15 replies - 1 through 15 (of 31 total)
  • I’d do it with CSS. What is your site’s address?

    Link to website please…

    I am using the same edited theme on 6 different blogs
    One of them is:

    Can you contact me privately as I don’t want to give details of my sites admin section publicly.

    Why do you think you can trust me privately? A fake name… a short-lived email address… my cute little baby face… Your site’s mine, man! 🙂 Point is, don’t be too quick to give out the admin info.

    The good news is that I don’t need your admin info to help. Open your style.css file. It should be in wp-content/themes/yourthemename/. Find #sidebar li, #sidebar_left li. Those words should be followed by curly braces, several lines of text and a closing curly brace. Inside those curly braces add border-bottom: 1px solid green;. You can of course change the size and the color to whatever you want. ‘px’ is pixels– about the size of a period. ‘Solid’ will get you a <hr /> type line but the css border property can do other types of lines too. Look it up if your curious. You might also want to add a margin as well, so add margin:0 0 20px 0; inside the curly braces.

    The only code in the style.css file is the following:

    @import url(layout.css);
    @import url(colors.css);
    @import url(typography.css);

    #wp-admin-bar {align:center; margin:0; padding:5px; background:#f9f9f9; border:1px solid #666; clear:both; text-align:center}

    #wp-admin-bar ul {margin:0; padding:0}

    #wp-admin-bar ul li {list-style-type:none; display:inline; margin:0 10px; padding:0}

    Everything else abou that is just commented out.
    Could the code be in anohter file?


    I found the code in the layout.css
    But adding the line you suggested created a green line at the bottom, but didn’t really chang the spacing.

    Yes, the code I provided will make a green line. You can edit the color to suit your preferences. The part that will control the spacing is the part about the margin– last sentence of my previous post.

    Ah ok, it worked. Thanks so much. I used the code: margin:0 0 26px 0;

    However, what I notice is that there is double line spacing in some widgets. See the “RANDOM POSTS” and the “WELCOME DR GENE” widgets in the left sidebar of

    Is there a way I can force each line to be single-spaced?

    Thanks again,

    Try adding something like this to your css file:

    #sidebar * p, #sidebar-left * p {

    Which css file?
    The layout.css
    I added it there right after my other edit but it didn’t seem to have any effect.

    You could try:

    #sidebar li p, #sidebar-left li p {

    Or even:

    #sidebar li p, #sidebar-left li p {
    margin:0 !important;

    If it doesn’t work in layout.css put it in typography.css, at the bottom.

    Before you do any of that, though. Switch the #sidebar li, #sidebar_left li that we added earlier for #sidebar ul li, #sidebar_left ul li and see if that gets you any closer to the look you want.

    I tried all of that. No luck yet.

    Yeah, it can be frustrating. There are seven different stylesheets loading on that page– wow.


    li#random-posts-widget p{
    margin:0 !important;

    This one is very specific. It should only effect the random posts widget.

    ok that worked for random posts widget

    Ok. All you need to do then is find the appropriate id’s for the other widgets you want to manipulate and add those to the working code. You need to make sure you are targeting the right elements though. We just targeted a paragraph within a list item that has the id ‘random-posts-widget’. That may not always be the way the widget is structured. For example, ‘Recent Forum Posts’ is structured differently. You’d have to write

    li#simplepress-forum ul li{
    margin:0 !important;

    to target that one though

    margin:0 !important;

    might do it too.

    By the way, you can just add to the working code by separating items with commas like this:

    li#random-posts-widget p, li#simplepress-forum ul li{
    margin:0 !important;
Viewing 15 replies - 1 through 15 (of 31 total)
  • The topic ‘Add a line break between sidebar widgets’ is closed to new replies.