Okay, I have searched and forgive me if I am not finding the right thread. I have a site I am working on, where I want to do a rollover image for each link on the page menu bar. Basically each item on the menu needs to appear to "glow" and the graphic designer on the project created two buttons for each page (one with glow, one without). I have done rollover before, using Atahualpa, but only when the rollover image was going to be the same for each item on the page menu bar. How can I do it if I need each one to be different - Home, About, etc will each have (2) images that need to be assigned to it?

I know that this will prevent the user from adding new pages to the menu bar without having to handle programming (since the menu bar will no longer update automatically). That is not a concern for this client, if they add a page then they will have to come back to me. What fun!



Thanks!

for each page you will have to add a CSS Selector. When you look at the source of the page you will see that each item of the menu has an <li class="page_item page-item-xxx"> where 'xxx' is the page id. using this you can create a selector for each menu item

li.page_item page-item-xxx a:link,
li.page_item page-item-xxx a:visited,
li.page_item page-item-xxx a:active {...state 1...}
li.page_item page-item-xxx a:hover {...state 2...}

Thanks for the reply, and that does work wonderfully....but I came across another issue while handling things this way. I have 8 pages, and each page needs to have a different page menu bar (background colors, active, rollover, etc). So, I am dictating the following CSS rules for each page individually :

body.home div#menu1 ul.rMenu li a, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#7AC923 none repeat scroll 0 0;
border:2px solid #7AC923;
color:#FFFFFF; }

The problem I find is that when a page does not have the above specified, it is taking attributes from another. Meaning in my CSS Inserts I use the above to tell it what color my homepage menu should be. The next page I have listed in my CSS would be page_id_554. Before I get chance to enter the CSS for this page_id_554, I view the site through Firebug and notice that it shows the div#menu1 CSS for body.home. I would assume that since I did not specify different rules for page_id_554 that it would take the page menu colors from the main settings in the Theme Options. No?

If this is totally confusing, or rather if I am confusing things, the test site can be viewed here : www.bymasselyn.com/design, although I am constantly tweaking it so the code might be all over the place when it comes time for someone to view it.

Thanks for listening to my ramblings, and I appreciate any help that can be offered on this.

Just to clarify my above post. If I take the CSS I created for my homepage, and copy paste it for other pages (changing the page_ID and the corresponding colors) then I see something weird happen. The last page listed in my CSS Inserts looks okay, and all pages listed above take on some of its attributes. The weird thing is that it does not take on all of them.

Example: I have near the top of my CSS inserts code saying the background of the homepage menu is green and the border is green. Save my changes, and everything looks perfect!

I copy that code, and past it below the above item, but this time change the page_ID (to match my Contact page) and I tell it I want the menu background & border to be purple. When I save my changes, the Contact menu background/border is purple, but so is the homepage border (only the border on the homepage, because the background remains to be green).

I am sure that I am missing something stupid, and have been staring at this for too long. Any help would be so appreciated. I really could use to save some sanity on this one!

CSS Inserts have two parts, the CSS selector(s) and the rule(s). You can combine multiple selectors together so they all apply the same rule(s). In your case you have

body.home div#menu1 ul.rMenu li a, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-originadding;
background:#7AC923 none repeat scroll 0 0;
border:2px solid #7AC923;
color:#FFFFFF; }

So your selectors are:

body.home div#menu1 ul.rMenu li a,
div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1

so these rules will be applied to:
- any <a> that is a element of
-- an <li> that is a element of
--- a <ul> with a class of 'rMenu, which is
---- an element of a <div> with an ID of 'rMenu' which is
----- on the home page

or

- any <a> that was visited and is
-- an element of an <li> with a CLASS of 'current_page_item' which is
--- an element of a <ul> with a CLASS of 'rMenu' which is
---- an element of a <div> which has an ID of 'menu1'

or

- a <div> which has an ID of 'menu1'

Good Morning & Thank You...

I'm still a little confused, because I don't understand why rules from one page "body.home" are being applied to "body.page-id-554" or any other page listed. And not all of the rules are applied, just to the last selector listed. Am I using the page designation wrong, or is it because of how I am listing my selectors? I was under the impression that using the page designation would allow me to apply the same CSS to different pages without the two overlapping - but they are and I think that is where I am confused. Is how I wrote the CSS all wrong, and that is what causes this to happen.

I really do appreciate your help.

things to remember about CSS - Rules are applied on top of each other based on their order and importance.

if you code

div {background: #blue;}
div {background: #yellow;}
div {background: #red;}

the background will always be red since it is the last one processed. If you coded

div {background: #blue;}
div {background: #yellow !important;}
div {background: #red;}

the background will always be yellow since you designated with a high precedence. if you code

body.home div {background: #blue;}
div {background: #yellow;}
div {background: #red;}

the background on the home page would be blue, but on all othere pages the div's woud be red. if you code

body.home div {background: #blue;}
div {background: #yellow !important;}
div {background: #red;}

the background will always be yellow since the !important overrides the body.home.

2) you need to be careful combining selectors. You have

body.home div#menu1 ul.rMenu li a, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1

when I think you mean to have

body.home div#menu1 ul.rMenu li a, 
body.home div#menu1 ul.rMenu li.current_page_item a:visited, 
body.home div#menu1

so these rules will only apply to the home page

Wow I feel like an idiot, because I swear at one point I wrote all the code like that. Explicitly telling it each item separately, for each page and did not "lump" things together. I went through now, carefully did the same thing, and it is working like a charm. I think the other late night when I tried this, I must have had something small all screwed up and that is why it was not working. Fresh morning, clear head - and obviously help from an expert is the perfect remedy.

Thank you very much for your assistance, and immense patience pointing this out for me.