Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Sidebars & Widgets »

[SOLVED] Space between Widget List Items configurable?


  #1  
Old Feb 4, 2009, 07:36 PM
upscho's Avatar
upscho
 
30 posts · Feb 2009
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
  #2  
Old Feb 4, 2009, 08:16 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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;
}
  #3  
Old Feb 6, 2009, 05:51 AM
upscho's Avatar
upscho
 
30 posts · Feb 2009
Hi Flynn,

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

Best regards,
upscho

Last edited by upscho; Mar 5, 2009 at 10:16 PM.
  #4  
Old Feb 6, 2009, 09:57 AM
upscho's Avatar
upscho
 
30 posts · Feb 2009
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
  #5  
Old Feb 6, 2009, 11:28 AM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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;
  #6  
Old Feb 6, 2009, 11:42 AM
upscho's Avatar
upscho
 
30 posts · Feb 2009
Hi Flynn,

works perfectly for me! Thanks a lot.

Best regards,
upscho
  #7  
Old Jun 18, 2009, 02:47 PM
Flynn's Avatar
Flynn
 
3,768 posts · Oct 2008
Munich, Germany
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 ?>
to

PHP Code:
<div class="post-bodycopy clearfix">
<?php bfa_post_bodycopy(); // Post Bodycopy: To edit the output, see functions/bfa_post_parts.php ?>
</div>
  #8  
Old Jun 25, 2009, 06:57 PM
fromtheranks
 
149 posts · Apr 2009
Dev Env't: XP Pro SP3, IIS 5.1, MySQL 5.1, PHP 5.2.x, WP 2.7.1, Atahualpa 3.3.3, IE 7, FF 3.0.x
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.

Last edited by fromtheranks; Jun 26, 2009 at 03:11 AM.
  #9  
Old Jul 3, 2012, 08:08 AM
camiana
 
15 posts · Jun 2010
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?
  #10  
Old Jul 3, 2012, 12:25 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Jul 3, 2012, 06:15 PM
camiana
 
15 posts · Jun 2010
That works fine :-) Thank you very much!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Bullets, Circles, Icons instead of left border on widget list items MacMacGA Sidebars & Widgets 62 Jul 30, 2010 12:46 PM
How to change the spacing of list items Webmason Atahualpa 3 Wordpress theme 5 Aug 4, 2009 03:33 PM
[SOLVED] Adding space between the list of pages in the left hand side text widget box norwichkaren Sidebars & Widgets 1 Jul 14, 2009 07:36 PM
[SOLVED] How to add space between list items in post body? Alexi Atahualpa 3 Wordpress theme 2 Jun 25, 2009 07:02 PM
"Widget List Items" Settings Are Not Persisted bseppa Sidebars & Widgets 1 Dec 13, 2008 01:34 PM


All times are GMT -6. The time now is 07:09 AM.


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