Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   [SOLVED] Space between Widget List Items configurable? (http://forum.bytesforall.com/showthread.php?t=194)

upscho Feb 4, 2009 07:36 PM

[SOLVED] Space between Widget List Items configurable?

I'd like to get some more "white space" between widget list items e. g. between Links. Is that possible?

I only found the possibility to configure the left margin and left padding...

Thanks for an answer,

Flynn Feb 4, 2009 08:16 PM

All widgets have at least one class ".widget". Add via HTML/CSS Inserts -> CSS Inserts:

HTML Code:

div.widget li {
margin-top: 3px;
margin-bottom: 3px;

You may have to play around with these values and observe your widgets, it may look better/worse with sub items to only have top or bottom margin or to use padding-top / padding-bottom instead.

Or add other values for sub items

HTML Code:

div.widget li li {
margin-top: 2px;
margin-bottom: 2px;

upscho Feb 6, 2009 05:51 AM

Hi Flynn,

thanks for your answer. I played a bit around with different values and... how should I say :o ... the defaults look best!

Best regards,

upscho Feb 6, 2009 09:57 AM

One more question to something similar:

One of my web pages contains a list (ol). I need some more space between the list items. I did not find the correct class where I could add something like "margin-bottom: 10px;".

I tried to add some extra code for every list item directly on the page (of course this is not CSS alike but I tried to find a workaround):

<li style="margin-bottom: 10px;">This is my 1st list item.</li>
<li style="margin-bottom: 10px;">This is my 2nd list item.</li>

But afterwards the last items of the list were not visible any longer.

So I'm coming back to the first idea: Where do I have to add some extra code to get a margin?


Flynn Feb 6, 2009 11:28 AM

To address ol lists inside posts ( and not those used for comments or in the sidebars), add via HTML/CSS Inserts -> CSS Inserts

HTML Code:

.post-bodycopy ol li {
margin-bottom: 10px;

If that somehow doesn't work, add !important after the rule like so
HTML Code:

margin-bottom: 10px !important;

upscho Feb 6, 2009 11:42 AM

Hi Flynn,

works perfectly for me! :) Thanks a lot.

Best regards,

Flynn Jun 18, 2009 02:47 PM

In 3.3.3 I removed <div class="post-bodycopy"> by accident, it'll be there again in 3.3.4.

To fix it in 3.3.3, edit index.php and change

PHP Code:

<?php bfa_post_bodycopy(); // Post Bodycopy: To edit the output, see functions/bfa_post_parts.php ?>


PHP Code:

<div class="post-bodycopy clearfix">
<?php bfa_post_bodycopy(); // Post Bodycopy: To edit the output, see functions/bfa_post_parts.php ?>

fromtheranks Jun 25, 2009 06:57 PM


Thank you for the index.php fix for 3.3.3. :)

As a follow-up to the suggested CSS insert, after some "tinkering" I've learned the insert one wants to use will vary depending on what one wishes to control.

If I add this, it will control both order and unordered lists:


/* to add spacing after all list items */
.post-bodycopy li {
margin-bottom: 10px !important;

If I use this insert instead, I can control the spacing between ordered lists and unordered lists separately:


/* to add spacing after ordered list items */
.post-bodycopy ol li {
margin-bottom: 10px !important;
/* to add spacing after unordered list items */
.post-bodycopy ul li {
margin-bottom: 8px !important;

Season spacing to taste.

Hope this helps.

P.S. I ran into this issue because WP's editor was driving me crazy so (not having yet read the thread below) I installed the "tinymce advanced" plugin (which I really like, although there isn't much of a tutorial for it so yo have to figure out what some of the additional features are on your own).

What I discovered is that there is an option to stop WP from stripping out <p> and <br> tags (its in the advanced section). This works. But. It means that for every list (which is where I was having major formatting "issues") I had to manually insert <br> tags. The above CSS Insert as a solution works much better. :)

camiana Jul 3, 2012 08:08 AM


I've tried to add the HTML code above in HTML/CSS Inserts -> CSS Inserts, but nothing changes.
See www.demokratiogglede.org. There's no space between the widget list items in the right sidebar. Especially the twitter widget is very unreadable. What am I doing wrong?

lmilesw Jul 3, 2012 12:25 PM

That code is targeting lists in a post. If you want to affect list items in the area you are talking about you either have to target the sidebar list items using
HTML Code:

#right li
Or the Twitter widget with
HTML Code:

#twitter_wp_widget-2 li
It all depends on whether you want to affect just that one list or all lists in the sidebar
If you want to affect all lists all you need to use is
HTML Code:


camiana Jul 3, 2012 06:15 PM

That works fine :-) Thank you very much!

All times are GMT -6. The time now is 02:43 PM.

Powered by vBulletin® Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.