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] transparent page menu hover (http://forum.bytesforall.com/showthread.php?t=17376)

cway Apr 21, 2012 09:23 AM

[SOLVED] transparent page menu hover
 
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/

juggledad Apr 21, 2012 10:57 AM

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.

lmilesw Apr 21, 2012 08:38 PM

Try taking out the > a

cway Apr 23, 2012 09:24 AM

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;
}

?

lmilesw Apr 23, 2012 10:10 AM

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?

cway Apr 23, 2012 10:25 AM

It was in the source of the page when css was inline ( it is now external ).
http://www.coloradofinewoodworks.com

lmilesw Apr 23, 2012 10:40 AM

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

cway Apr 23, 2012 10:55 AM

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;
}


lmilesw Apr 23, 2012 11:12 AM

Well at least it's working.


All times are GMT -6. The time now is 04:30 PM.

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