Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] Different button image for each item on Page Menu


  #1  
Old Dec 1, 2009, 11:25 PM
Masselyn
 
91 posts · Jan 2009
So. California
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!
  #2  
Old Dec 3, 2009, 06:02 AM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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...}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Dec 5, 2009, 07:38 PM
Masselyn
 
91 posts · Jan 2009
So. California
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 {
-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.

Last edited by juggledad; Jan 30, 2010 at 02:16 PM.
  #4  
Old Dec 5, 2009, 09:20 PM
Masselyn
 
91 posts · Jan 2009
So. California
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!

  #5  
Old Dec 6, 2009, 06:40 AM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {
-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'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 30, 2010 at 02:17 PM.
  #6  
Old Dec 6, 2009, 08:38 AM
Masselyn
 
91 posts · Jan 2009
So. California
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.
  #7  
Old Dec 6, 2009, 10:40 AM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
div {background: #yellow;}
div {background: #red;}
the background will always be red since it is the last one processed. If you coded
HTML Code:
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
HTML 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
HTML 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
HTML Code:
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
HTML Code:
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Dec 6, 2009, 12:58 PM
Masselyn
 
91 posts · Jan 2009
So. California
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.

Bookmarks

Tags
button, image, page menu, rollover

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Can't seem to get padding applied to page menu item tcruiser Page & Category Menu Bars 1 Oct 24, 2009 09:37 PM
Left align first item in page bar menu - joaodagraca Page & Category Menu Bars 1 Aug 6, 2009 05:00 AM
Left align first item in page bar menu joaodagraca Header configuration & styling 1 Jul 29, 2009 12:35 PM
[SOLVED] Left align first item in page bar menu joaodagraca Page & Category Menu Bars 2 Jul 27, 2009 04:27 AM
Page Menu Bar: Last Item on the Right-Hand Margin? PittFunck Page & Category Menu Bars 5 Mar 9, 2009 09:26 AM


All times are GMT -6. The time now is 12:24 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.