Wordpress Themes - WP Forum at BFA - [SOLVED] Space between Widget List Items configurable?

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)

[SOLVED] Space between Widget List Items configurable?

Hello,

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,
upscho

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;

}

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

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):

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

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?

Regards,
upscho

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;

Hi Flynn,

works perfectly for me! :) Thanks a lot.

Best regards,
upscho

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 ?>
</div>

Flynn,

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:

Code:

/* 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:

Code:

/* 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. :)

Hi,

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?

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:

li

That works fine :-) Thank you very much!