adding something like this:
border:2px dotted #000000;
to the #sidebar ul li area of the style.css for the theme you are using will get you started.
Also the codex is a great read for this type of thing. http://codex.wordpress.org/Styling_lists_with_CSS
Best bet would be to enclose each ‘element’ into a div. In this case you would want to create a class, so that you could use it many times on one page. Maybe call it: <div class="sidewrap"></div>
.sidewrap {
border:1px dotted #ccc}
You will probably want to also add padding and/or margin values to get your .sidewrap style more visually satisfying on the page.
Its unnecessary. CSS cat selectors are built in.
I always forget that not everyone has cats turned off like me :} Like Mat says, check the theme you are using.
Theme makes no difference. Just style in the CSS.
Thanks for all of your replys!
As soon as I start editing, and run into problems, I will let you guys know.
Thanks again!
Ok. This is as far I have gotten. I have figured out how all of the ul,ol, and li works with the CSS.
I am so close.
Here is the CSS:
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
border:2px dotted #ccc;
}
But it also puts a border around the third tier of ‘li’ and it should not.
I am modifying the default template.
Thanks, th3gh05t
Hi,
I decided to put each element into divs, but it didn’t turn out I had hoped for, in Internet Explorer. I have only used Firefox other than IE, and wondering if someone can site check this for me.
http://www.pumpupthevalium.com
Here is the CSS I used for the div:
#sidebar .sidewrap {
border: 2px dotted #ccc;
margin-bottom: 10px;
margin-top: 10px;
}
And some HTML output:
<div class="sidewrap">
<li><h2>Theme Switcher</h2>
<ul>
<li class="ts_current_theme"><a href=#=default'>blue</a></li>
<li ><a href='#=green'>green</a></li>
<li ><a href='#=red'>red</a></li>
</ul>
</li>
</div>
<div class="sidewrap">
<li><h2>Author</h2>
<b>derek</b> - This is where you find information about me.
<b>location</b> - los angeles, ca
</li>
</div>
