[SOLVED] Images on navigation buttons
 

Hi,
I'm using ATA 353 with the latest WP (not sure of the number).
I've been trying to get this working and now at least I managed to locate (I think) the css I need for this.
I'm in css.php trying to change everything to standout colours to see what changes and it's so not consistent, I just can't make much sense of it. Even if I can get the colours working as soon as I add the image, the buttons disappear... :( when I look with Firebug there's just so much styling coming up for each element that it doesn't help much.
All I'd like to achieve is to have a gradient background on the buttons (png file x-repeat). I think it's in Presentation: General part of the css.php - is this right? From reading the forum I understand that it would be best to insert CSS through ATO instead of changing the php files but first I need to figure out what classes and ids we are talking about.
I tried to look on the support forum (both gold and normal) and it doesn't seem to be an issue for others? Am I overlooking something?:confused:
Thanks!

You are correct in not editing the css.php file. Here is a start for getting you on track with the css selectors. It can be a bit frustrating at first. The following would change the hover state to red but you could just as well use a background image.

Thanks Larry, you really are sooo patient with all of us here!

It didn't work... :(. Is it possible that there is a setting somewhere I accidentally clicked or something to not make any changes throught the CSS inserts? I'm just clutching straws here, really... I can see from the last default CSS insert (/* round corners for page menu bar items * and * reset 2nd+ level */) that the line you've given me is the one I need but it just makes no difference whatsoever. It keeps using the colours I have set through ATO.

Hm, out of curiosity I've changed the space between the buttons and that worked so it's not what I suspected (see above). Keep looking, keep looking...

Ok, thanks to further experimenting this works too:
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
background: #ff0000;
}

So why the original line inserted a few lines below makes no difference? Mistery...

Did you put !important after the background line?

I did, I just copied the exact line you gave me. Then when that didn't work I started to play around changing various parts of the same line, none of which worked. Then I added the extra line as above (no !important there) and it worked!
But at least with your help I'm starting to understand what I'm looking at! :) And now the added background image works fine too!
Thank you again!