View Full Version : Wordpress CSS Issues - help!

07-22-2007, 11:15 PM
Hi Everyone!

I just upgraded my Wordpress to the new version with the sidebar widget support. In the process - it seems to be not displaying my sidebar text properly. I am not very good with CSS coding at all - so I would love some help! If anyone has some time to look over my code - and tell me what needs changing - it would be greatly appreciated!

On my sidebar - I would like to remove the bullets - and have the text be single spaced like this:


not as it is doing here:


i will attach my sidebar php file and my css file for anyone to look over.

Thanks so much in advance for any help!


<ul id="sidebar">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>


<p>Write here some info about the author of the blog</p>


<?php wp_list_pages('title_li=<h2>' . __('Navigate') . '</h2>' ); ?>

<li id="archives">


<?php wp_get_archives('type=monthly'); ?>



<li id="categories">


<?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>



<li id="meta">


<?php wp_register(); ?>

<li><a href="<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>

<li><?php wp_loginout(); ?></li>

<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>

<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>

<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>">WordPress</a></li>

<?php wp_meta(); ?>



<?php endif; ?>


07-22-2007, 11:19 PM
#sidebar {list-style: none;}

#sidebar ul li {
list-style-type: none;
margin-bottom: 15px; /* remove this */

07-22-2007, 11:40 PM
Thanks so much for your reply! The code to change the spacing worked perfectly - thanks so much!

Where in the CSS do I put this though?

#sidebar {list-style: none;}

07-22-2007, 11:42 PM
Oh... also - how do I get the links lists on the sidebar to have a space after the last link? Its sitting a little to close to the headings underneath.


Thanks so much!

07-23-2007, 03:49 AM
You could probably put that anywhere in your CSS file. The best is to keep it with the other rules that apply to that element. Search for “#sidebar” (just hold Ctrl+F to invoke the search function of your browser and type the search term) and put it somewhere near the existing rule(s).

As to the second post: Apply a bottom padding to the sub lists:

#sidebar ul {padding-bottom: ??px;}

07-23-2007, 08:08 AM
That worked out great! Thanks so much!

Since we're on a roll here... I have one other question!

I would like to change the way the comments are laid out in my wordpress theme. In the image below - it shows how I want to get it to look - any ideas on how I get it to look nice?



In example 3 - I would also like to remove the word "Comments" - the two lines surrounding it - and the white border around the comment box below.

If you have any ideas on how I do this - it would be greatly appreciated - thank you soooo much - your help has been great!

07-23-2007, 06:10 PM
Try this:

.commentauthor a {font-size: ??px;}

h2#comments {display: none;}

As to the border around the comment box: can you paste the source code from the browser output (not the PHP from Wordpress but the code that you see when you view the source code in your browser) as I’m not interested in signing up and logging in to check out what element needs to be addressed.

07-23-2007, 09:06 PM
the code from the page with the comment box is attached.

The code you posted for me took away the "comments" text and two lines like I wanted - which is great! How do I get the names in my guestbook to be the large white header font like in the rest of my site? Thanks so much! :)


07-23-2007, 10:03 PM
Ah, it’s the guestbook. So the proper code for the user name’s font size would be:

.commentauthor {font-size: ??px;}

And as to the border around the text area look for that rule:

border:1px solid #ddd;
padding:0px 10px;

and remove the line where it reads “border…”.

07-23-2007, 10:39 PM
That all worked! Thanks so much! :D