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] Still having issues with the page menu bar showing a background image.


  #1  
Old Jan 8, 2010, 12:16 PM
noitalever
 
3 posts · Jan 2010
[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...
  #2  
Old Jan 8, 2010, 02:22 PM
juggledad's Avatar
juggledad
 
23,632 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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!!
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Jan 8, 2010, 05:29 PM
noitalever
 
3 posts · Jan 2010
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] jpg background image for nav menu not showing up in IE7 rinoa3108 Page & Category Menu Bars 4 Dec 29, 2009 07:43 PM
Change background image of Page Menu bar (for noobs) Dennis Page & Category Menu Bars 9 Dec 3, 2009 05:05 AM
[SOLVED] Static background image for page menu bar nevaratoiel Page & Category Menu Bars 6 Oct 3, 2009 02:23 AM
page menu bar issues with IE6 rinoa3108 Page & Category Menu Bars 2 Sep 19, 2009 12:16 AM
image not showing in background of page menu bar rinoa3108 Page & Category Menu Bars 5 Jul 30, 2009 07:37 AM


All times are GMT -6. The time now is 08:06 AM.


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