I am brand new to WordPress, and thus to Atahualpa! I tried posting about this on another thread, but if it was answered (and I'm not entirely sure it was), I am now more confused than ever! I have a fair knowledge of HTML and CSS, but haven't learned PHP--yet. My blog page is part of a larger website (http://andreadlavigne.com), though only the blog page is created with WordPress software--the rest of my pages are (so far) just plain ol' HTML and CSS code that I did myself. I have gotten my blog page (http://andreadlavigne.com/blog) looking ALMOST like I want it, but am having problems styling the navigation menu on the left sidebar. The links on my nav menu DO work, but I also want it to have the background buttons like I have on my other pages, just to keep some uniformity going. I use what I saw referred to as a "pixy-rollover" effect, where the button graphic is a .gif picture twice the necessary width, divided into 2 different halves, and change colors/icons when the user hovers over them. So far, I have managed to get the buttons on my blog page to change colors, so I'm pretty sure the pixy-rollover thing is working. But they are not showing up near the 40x200 pixels they are supposed to appear! Basically the colors of the buttons hug the text in the menu, rather than spreading out to their required size. I have tried numerous "fixes" with CSS, even trying to put a <div> around the PHP code for that widget in the WordPress "Editor" and trying to style it with a CSS insert, but nothing has worked right. As of now, I have the nav menu just plain--no buttons turned on. WHAT in the world am I doing wrong--or am I trying to do the impossible???? If anybody can help, I would really appreciate it! Please just keep the suggestion in plain English--my brain is frazzled with this whole mess! Sorry for the "book" here, but I wanted to be clear as I could!

Remove your existing CSS insert and put in this one:

div.widget ul li,
div.widget ul li:hover,
div.widget ul li.sfhover {
border-left:0 none !important;
margin: 0 !important;
padding 0 !important;
}

div.widget ul li a:link,
div.widget ul li a:visited,
div.widget ul li a:active {
background:transparent url(/miscimages/pixy-rollover.gif) no-repeat scroll left center;
display:block;
line-height:40px;
padding-left:40px;
width:160px;
}

div.widget ul li a:hover {
background:transparent url(/miscimages/pixy-rollover.gif) no-repeat scroll right center;
display:block;
line-height:40px;
padding-left:40px;
width:160px;
}

You were using the path to the image as shown in the example code but your image is not there, it's at the location /miscimages/pixy-rollover.gif

The code above will apply to all widgets. To limit it to that particual text widget, look up its CSS ID or CSS class by looking into the source code of a browser rendered page ("View Source" in your browser).

You'll see

<div id="text-3" class="widget widget_text">

Replace "div.widget" in the code above with "div.widget_text" to limit this design to (all) text widgets, or replace it with "div#text-3" to limit it to this particular widget. When you remove this text-widget from the sidebar and add it again, the ID "text-3" may change. In that case you'd have to look it up again and adjust the code accordingly.

YAAAAAAY!!!!!!!!! It worked! Thank you SO MUCH! And all I had to do was copy-and-paste. You have my undying gratitude! Have a great day!