Adding extra space between displayed widgets (9 posts)

  1. drgene113
    Posted 7 years ago #

    I downloaded a free wordpres theme and want to add extra space between widgets in both sidebars to give it a less cramped look.

    I don't know which line of code to edit.
    Site: http://www.mmti.oeg/podcasts/assessment

  2. selfmade64856
    Posted 7 years ago #

    Line 241-250 of your style.css should look like this:

    #sidebar ul li
    margin:0 0 10px;

    Where it says
    margin:0 0 10px;

    change the 10px to a higher number, like 40px. So like this:
    margin:0 0 40px;

    Save and see if that's enough extra space.

  3. drgene113
    Posted 7 years ago #

    Thanks so much. That did it.

    One more question. How would you suggest that I remove the double spacing in the "Random Posts" and "Recent Searches" widgets on my site. (see: http://www.mmti.org/podcasts/assessment and look in the middle widget bar.

    Could I add a global piece of code to force all widgets to be single spaced?

  4. selfmade64856
    Posted 7 years ago #

    If I'm understanding you correctly, you don't want the words to be doublespaced (which is actually a 15px margin spacing). You can just change line 383 of your style.css from:

    margin-bottom: 15px;


    margin-bottom: 0px;

    That'll do it for you :)

  5. drgene113
    Posted 7 years ago #

    It worked for the Random Posts but not for the Popular Searches.

  6. selfmade64856
    Posted 7 years ago #

    You can change line 270 of your style.css
    margin:0 0 24px;
    margin: 0 0 0;

    However this will make take out all of the spacing.....I'm not an expert and normally have to edit the CSS file through trial and error. Someone will know though.

  7. drgene113
    Posted 7 years ago #

    The 24px, I believe, is referencing the value I added for my widget spacing.

  8. selfmade64856
    Posted 7 years ago #

    You're probably right. You should download Firebug for Firefox (If you don't have Firefox you will definitely need to download it). Firebug is a great tool for finding CSS occurrences from the topside of your website. It would only take you a minute to figure out how to use it. Once installed and using Firefox, simply click on "View" in the Firefox window toolbar and select "Firebug". Once it opens click on the "Inspect" button and then begin hovering over objects on your website.....you'll see what I mean when you do it. Hope this helps!

  9. drgene113
    Posted 7 years ago #

    Yes I used firebug and heres the html code concerning the Popular Searched widget. Im not sure what code to enter in the style.css to make the search results single spaced

    <h2 class="widgettitle">Popular Searches</h2>

    <li class="widget widget_search" id="search"><form action="http://www.mmti.org/podcasts/assessment/" method="get" id="searchform"><input type="text" id="s" name="s" maxlength="50" size="18" onblur="if (this.value == '') {this.value = 'search';}" onfocus="if (this.value == 'search') {this.value = '';}" value="search"/><input type="submit" value="go" id="submit" name="submit"/></form>
    <li class="widget widget_text" id="text-379725121"> <h2 class="widgettitle">Visitors</h2>
    <div class="textwidget"><!-- GoStats JavaScript Based Code -->
    <script src="http://gostats.com/js/counter.js" typ

Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.