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

byronyasgur Apr 26, 2010 04:52 PM

[SOLVED] page menu bar transparant
 
1 Attachment(s)
Trying to get the page menu bar <li>'s to have a transparant background - i can set the color in the theme options and i can then override this colour using div#menu1 ul.rMenu li in the css area but if i put in
div#menu1 ul.rMenu li{
background: transparant !important;
}


then i get no effect - i cant work it out ( i have tried all kinds of specificity ) - anyone any ideas

ultimately what i'm doing is that i've set the background image on the entire menubar to a slice of what im using in the header so the menu looks like it's floating on the header image
see attached file

thanks

juggledad Apr 27, 2010 07:40 AM

What version of Atahualpa and WP?
What is the url?

byronyasgur Apr 27, 2010 09:59 AM

wp 2.9.2
at 3.4.6

it's a local development project so no url

juggledad Apr 27, 2010 04:28 PM

Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.
HTML Code:

/* ================================================ */
/* Page menu background                            */
/* ================================================ */
div#menu1 {
        height: 40px; 
        margin-top:0px;
        background: #blue;
}
/* ================================================ */
/* Page Menu item's background and border          */
/* ================================================ */
div#menu1 ul.rMenu {
        background: #red;
        border: none 0px;
}
/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
        background: #yellow !important;
        color: #000000 !important;
}
/* ================================================ */
/* Category menu background                        */
/* ================================================ */
div#menu2 {
        height: 40px; 
        margin-top:0px;
        background: #green;
}
/* ================================================ */
/* Category Menu item's background and border      */
/* ================================================ */
div#menu2 ul.rMenu {
        background: #orange;
        border: none 0px;
}
/* ================================================== */
/* Category Menu item                                */
/* ================================================== */
#menu2 ul.rMenu li a:link,
#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li a:active,
#menu2 ul.rMenu li a:visited,
#menu2 ul.rMenu li {
        background: #purple !important;
        color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */


byronyasgur Apr 27, 2010 07:44 PM

thanks - i had a look at that before ---- but the problem is definitely with div#menu1 ul.rMenu li .... i have managed to get it to change colour but not to be able to set it to transparant, that's unless something else behind it is picking up on the colour from the theme options, but i dont think that's the case

it looks like a <a> in a <li> in a <ul> and i can affect change to the <a> and the <ul> - i just cant make the <li>'s background transparant

byronyasgur May 4, 2010 05:30 AM

1 Attachment(s)
got it ..... it turned out to be easy

HTML Code:

div#menu1 ul.rMenu li{
background: transparent !important;
}

but that left the current item to be taken care of ... it was
HTML Code:

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

the full css that I used was

HTML Code:

div#menu1 ul.rMenu li,
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 !important;
}

div#menu1 ul.rMenu li.current_page_item a{
color:#fff !important;
padding-top:2px !important;
padding-bottom:2px !important;
}

ul#rmenu2{
background: transparent url(http://yoursite.com/wordpress/wp-content/themes/atahualpa/images/header/header.jpg) bottom !important;
height:25px;
}

however i think i combined this with some strategic heights etc in the header section of the theme options


All times are GMT -6. The time now is 02:23 PM.

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