Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] Still having issues with the page menu bar showing a background image. (http://forum.bytesforall.com/showthread.php?t=5212)

noitalever Jan 8, 2010 12:16 PM

[SOLVED] Still having issues with the page menu bar showing a background image.
 
Can someone please help with this? I have read through these forums quite a bit and there is a lot of confusion as to what the solution for this is.

www.cupcakeescape.net is the site, you can see what's up by moving over the menu items. I do NOT want the colored background when i hover over the items... but can't seem to find what css items that corresponds to. I've read a lot of the threads here, and they all seem to trickle off with either no reply or "thanks, i finally got it" but no instructions as to what the final answer was. (or they are trying to use rollover images which i'm not... just the basic background will be great)

here is what i have in the "CSS Inserts" section"



////Start


div#menu1 ul.rMenu {
height: 24px;
margin-top:0px;
background: url(/wp-content/themes/atahualpa/images/menubar.jpg); !important
}


div#menu1 ul.rMenu li {
background: transparent url(/wp-content/themes/atahualpa/images/transparent.png); !important
position: relative;
left: 275px;
}

div#menu1 ul.rMenu li.current_page_item a:link, div#menu1 ul.rMenu li.current_page_item a:active, div#menu1 ul.rMenu li.current_page_item a:hover, div#menu1 ul.rMenu li.current_page_item a:visited, div#menu1 ul.rMenu li a:hover

{
background: transparent;
}



div#menu1 ul.rMenu li.current_page_item > a:link, div#menu1 ul.rMenu li.current_page_item > a:active, div#menu1 ul.rMenu li.current_page_item > a:hover, div#menu1 ul.rMenu li.current_page_item > a:visited

{
background: transparent;
}

/////end

and the funny thing is that it doesn't even show the correct background color upon hovering at this point.

I've got firefox's web developer toolbar and it's not showing anything else other that what i've got in the css edit section... grrr. this should be simpler! Thanks for any help you can give me...

juggledad Jan 8, 2010 02:22 PM

from http://www.w3schools.com/CSS/css_pseudo_classes.asp
Quote:

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

noitalever Jan 8, 2010 05:29 PM

Ok, thanks for the little w3c tutorial, but that didn't really do anything except change which items were affected. It turns out most of the code you were commenting on didn't need to be in there anyway.

(Atahualpa's own css is not even in that order)

But I digress, here is the code that works, so that anyone who is wanting to do this in the future can do it instead of wandering through 17 posts.

Start code: comments wrapped in *** referring to the code below them.

*** this one controls the overall menu bar look, put your background image here, along with the height of the background image. ***

ul.rMenu {
height: 24px;
margin-top:0px;
background: url(/wp-content/themes/atahualpa/images/menubar.jpg) !important;
}


***this one is just for me to put the words in the middle of the bar instead of all the way left***

ul.rMenu li {
position: relative;
left: 275px;
}

*** here's the magic hover part, you can do it like i did, with transparent, or use url type like the begining one to use different images and "hover" images" i changed the padding also because i wanted it spaced out a bit more***

ul.rMenu li a:link,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: transparent !important;
padding: 4px 8px;
color: #000000 !important;
}
ul.rMenu li a:hover {
background: transparent !important;
color: #482501 !important;
}

End code.


Hopefully that will help others so they don't have to spend so much time wandering through posts.

Shawn


All times are GMT -6. The time now is 09:44 PM.

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