[SOLVED] How to move LI Discs closer to sidebar list text
 

Based on a suggestion here on the Atahualpa forum, I added some CSS Insert code to create bullets (discs) next to my right sidebar list items. Here's what I added:

div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;
color: #2D85BA;
}

If you look at the right sidebar on my site, toawaken.org, you'll see it worked fine. Now I'd like to move each bullet a bit to the right, i.e., closer to the text of each LI, and further away from the black border line separating the sidebar from the center column main body text. Any suggestions?

reduce the left padding in that CSS

Hi Juggle, thanks, but where am I putting this code to reduce the padding to 0px? In the CSS Inserts, right there within the lines of code I posted? Or, if you meant within the Style.CSS Editor, on what line? The Style.CSS Editor has code for alignleft, alignright & aligncenter and wp-caption, but currently there is no padding settings to reduce in there except for padding: 4px; under wp-caption.

So please clarify where I will find this padding-left Xpx; line that I can reduce to 0px, thanks

well you could over ride it in the CSS Inserts option or you could go to ATO->Style WIDGETS->Widget List Items and adjust the 'Left Padding for Links' <- note: doing it here will effect all widgets. If you just want to effect this widget, you will need to add the CSS to the CSS Inserts option and qualify the CSS Selector with the ID for the widget

Oops. Changing the Left Padding for Links (or inserting padding-left: 0px; in CSS Insert) moves the list items TEXT left-wards, closer to the bullets; it does not move the bullets right-wards, closer to the text. Don't need to move the text of the list items, where they are sitting under the widget title is just fine. Only want to move the bullets inward, to the right a bit, closer to the text and away from the border line separating the body content form the sidebar.

The bullets (discs) were added by inserting an LI div with the "disc" list-style, and a position of "inside" which places them inside to the right of the body-sidebar border...

div.widget ul li {
display: list-item !important;
list-style: disc !important;
list-style-position: inside;

...but there's nothing padding-wise or margin-wise in this code to tell the discs (not the text) how far away from the border or how close to the text, to sit. That's what I'm looking for.

You may have to do both. move teh text left towards the disc and then move the disc AND test to the right.

This is where using a code editor is important, so YOU can play with the CSS and see what YOU want. You can even see which CSS rules you need to apply it to.

I'd try decreasing the left padding to 0 and then increasing the left margin

Thanks Juggle. padding 0 plus added margin did the trick. I already tried that with the margin at 8 and it didn't seem to move the discs much away from the border line. So I thought that wasn't working. When I increased the margin to 16, they moved quite a bit away. Thanks for the suggestion