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)
-   -   Widget Padding Woes (at least I think it's padding) (http://forum.bytesforall.com/showthread.php?t=9516)

Sally Sep 9, 2010 06:19 AM

Widget Padding Woes (at least I think it's padding)
 
Good morning,

I have three questions, please. My site is http://www.fiftytolife.com:

1. For text widgets (i.e., recovering realtor, upper left): how can I add the bar at the left of the links? Oh, I just realized I can code the text box... could someone share that code with me, please? I can search in the html in the editor to find this code (like in the recent posts) and copy, yes?

2. For the recent posts widget (under recovering realtor): this looks the best, but I would like to decrease the space between the bar and the link. Where do I go to do that?

3. For the categories widget (lower right sidebar), how do I get that to justify left?

It's a mystery right now.:confused: I did look through the topics here, but could not find these answers.

Thank you!!!!
Sally

juggledad Sep 14, 2010 04:32 AM

you need to look at the source code and determine what CSS is being applied and then duplicate that for the areas you want with the correct CSS Selectors. For example, your issue (1)

Looking at the source, you see that the 'Recent Posts' have an ID of 'recent-posts-3' and the classes 'widget widget_recent_entries'. Searching for them in the CSS you will find this nugget
HTML Code:

div.widget ul li {
display:block;
margin:2px 0 2px 0px;
padding:0 0 0 5px;
border-left:solid 5px #993333
}

this is putting a left border on the list item in the unordered list that is in the div with a class of 'widget'. In your case you have coded a text widget and are not using an unordered list, so the code that is generated is this
HTML Code:

<div id="text-8" class="widget widget_text">
        <div class="widget-title">
                <h3>Recovering REALTORŪ</h3></div>                       
        <div class="textwidget">
                <a href="http://www.fiftytolife.com">
                        <font color="#993333">
                        <font-weight="regular">Home</font></a>
                <br>
                <a href="http://www.fiftytolife.com/2006/who-is-saratica/">
                        <font color="#993333">
                        <font-weight="regular">Meet Sally</font></a>
                <br>
                <a href="http://eepurl.com/ZmBk" target="_blank">
                        <font color="#993333">
                        <font-weight="regular">Subscribe by Email</font></a>
                <br>
                <br>
                        <a href="http://www3.clustrmaps.com/counter/maps.php?url=http://www.fiftytolife.com" id="clustrMapsLink">
                                <img src="http://www3.clustrmaps.com/counter/index2.php?url=http://www.fiftytolife.com" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" />
                        </a>
        </div>       
</div>

so you need to code a new CSS Selector like
HTML Code:

div#text-8 div.textwidget a
with the CSS rules from above and put it in the CSS Inserts option of the theme. You will see a gap between the items in the list because of the <br>'s you have coded.

A good place to learn CSS if you are going to be messing with the styling, is w3schools.com/css


All times are GMT -6. The time now is 03:55 AM.

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