Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

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

[SOLVED] transparent page menu hover


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Apr 21, 2012, 09:23 AM
cway
 
154 posts · Jul 2009
Does anybody know how to get a transparent background for the hover state in the page menu?
This is what I've got and it isn't working:
Code:
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color: #000 !important;
border: solid 0px #FFFFFF;
background-color: transparent !important;
}
Atahualpa 3.7.5
WP 3.3.2
See http://www.coloradofinewoodworks.com/
  #2  
Old Apr 21, 2012, 10:57 AM
juggledad's Avatar
juggledad
 
22,240 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Here is how I would figure this out
1) Set ato->Configure CSS & JS->CSS Compress to "No'
2) view the page
3) view the source of the page
4) copy the source and past it into a TEXT document and save it as hover.html
5) open 'hover.html' in your browser
6) edit hover.html
7) find the next occurance of '#000000'
8) if it is NOT on a 'background' or 'background-color' css rule go to (7).
9) change the '#000000' to '#00FFFF'
10) save the file
11) go to the browser and hit 'refresh and hover over the menu
if the color is still black, go back to step (7)

if it changes, now you have an idea of what CSS is effecting it. You may be able to determine what theme option is involved or at least you will know what CSS you need to override.
__________________
"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 lmilesw; Apr 21, 2012 at 08:34 PM.
  #3  
Old Apr 21, 2012, 08:38 PM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Try taking out the > a
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #4  
Old Apr 23, 2012, 09:24 AM
cway
 
154 posts · Jul 2009
That's an excellent idea, Juggledad. Thanks!
I found the culprit:

Code:
div#menu1 ul.rMenu li.sfhover{background:#123456}
but I added this to my css:

Code:
div#menu1 ul.rMenu li.sfhover {
background: transparent !important;
}
and nothing changed. It changed in my hover.html document, however.

I removed > a and that worked ( thanks lmilesw ). But why didn't anything change when I added

Code:
div#menu1 ul.rMenu li.sfhover {
background: transparent !important;
}
?
  #5  
Old Apr 23, 2012, 10:10 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Maybe I am missing something but
HTML Code:
div#menu1 ul.rMenu li.sfhover
doesn't look like the correct selector to me. Where did you come up with that selector?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Apr 23, 2012, 10:25 AM
cway
 
154 posts · Jul 2009
It was in the source of the page when css was inline ( it is now external ).
http://www.coloradofinewoodworks.com
  #7  
Old Apr 23, 2012, 10:40 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
I realize the selector is there. What I meant was why did you decide to use that selector? When I used Firebug the selector I came up with the following
HTML Code:
div#menu1 ul.rMenu li:hover
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Apr 23, 2012, 10:55 AM
cway
 
154 posts · Jul 2009
That's what was in the source when I viewed it.

In the WP admin, I gave the Parent background color a color of #123456.
I made sure the style sheets were set to inline, then I viewed the page and viewed the source. I searched for 123456 and copied:

Code:
div#menu1 ul.rMenu li.sfhover{background:#123456}
I put a modified version of that in WP but it didn't take.

Code:
div#menu1 ul.rMenu li.sfhover {
background: transparent !important;
}
  #9  
Old Apr 23, 2012, 11:12 AM
lmilesw's Avatar
lmilesw
 
10,097 posts · Jul 2009
Central New York State USA
Well at least it's working.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Making Page Menu Bar transparent? Hedgie Page & Category Menu Bars 10 May 19, 2014 06:28 AM
working page menu bar with background image, image on hover, transparent link state cway Page & Category Menu Bars 1 Nov 1, 2011 03:06 PM
Transparent Page Menu Bar Stingraynut Page & Category Menu Bars 3 Apr 5, 2010 06:43 PM
Transparent GIF images in main page body not transparent donfos001 Center area post/pages 2 Jan 10, 2010 09:14 AM


All times are GMT -6. The time now is 10:24 PM.


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