[SOLVED] Different button image for each item on Page Menu
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 :
HTML Code:
body.home div#menu1 ul.rMenu li a, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 { 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
Quote:
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 HTML Code:
div {background: #blue;} HTML Code:
div {background: #blue;} HTML Code:
body.home div {background: #blue;} HTML Code:
body.home div {background: #blue;} 2) you need to be careful combining selectors. You have HTML Code:
body.home div#menu1 ul.rMenu li a, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 HTML Code:
body.home div#menu1 ul.rMenu li a, |
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. |
All times are GMT -6. The time now is 04:45 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.