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] Choosing "transparent" for the page/category bar background color? (http://forum.bytesforall.com/showthread.php?t=5961)

rhythm Feb 20, 2010 11:35 AM
[SOLVED] Choosing "transparent" for the page/category bar background color?
 
In the Category menu bar, you can choose your background color in HTML code form, i.e. #FFFFFF.
Where does this code show up in the phpBay Editor, because I want to put in 'transparent', but it won't take 'transparent' in the Background Color choice bar?

juggledad Feb 21, 2010 09:57 AM
what is the 'phpBAY Editor' you are talking about?

to change the CATEGORY menu bar background, use
HTML Code:
div#menu2 ul.rMenu {
        background: transparent;
}
to change the CATEGORY menu item backgrounds use
HTML Code:
#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: transparent !important;
}

sleenie Feb 21, 2010 10:39 AM
I'm not Rythm but the phpBayPro Editor is an Ebay plugin for WordPress. Think maybe they got to the wrong forum? Or just mentioned the wrong product?

mhovitch Nov 22, 2010 10:01 AM
I am also having trouble making the background of my pages menu transparent. I'm not sure where you would insert this code you mentioned. Is is on the "Add HTML/CSS inserts" page? When looking at that page I already see the code

}
div#menu1 ul.rMenu {
background: transparent;
border: none;
}

in he CSS inserts. I am a relative noob, but that looks like it should make the background transparent. Since that code is there by default, there must be something I am missing.

Would appreciate any help you can offer.

thanks

wilbrimley Dec 4, 2010 05:01 PM
1 Attachment(s)
I also need to make my menu bar completely transparent. I understand using the CSS insert to set the background: transparent, but in ATO-->Menu Bar you still have to choose an HTML color code, which is showing up (it's the blue bar in the attachment). What's the workaround here? Thanks.

juggledad Dec 4, 2010 05:46 PM
What version of atahualpa?
export your settings and attach them to a reply

wilbrimley Dec 5, 2010 08:44 AM
1 Attachment(s)
Version 3.5.3
Current settings here... Thanks!

juggledad Dec 6, 2010 05:40 AM
replace your css inserts with this
HTML Code:
td#header {
padding-bottom: 15px;
}
div.searchbox {
position: absolute;
top: 130px;
right: 25px;
}
div.searchbox input.text {
border: none;
padding: 2px 15px 2px 3px;
background: #fff url('<?php bloginfo('template_directory'); ?>/images/search2.gif') no-repeat right center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 15px;
bolder: solid 1px #e7e7e7;
font-size: 11px;
}

a.posts-icon {
position: absolute;
top: 163px;
right: 140px;
font-weight: normal;
color: #fff;
font-size: 11px;
}
a.comments-icon {
position: absolute;
top: 163px;
right: 30px;
font-weight: normal;
color: #fff;
font-size: 11px;
}


div.widget ul li {
padding: 1px 5px 1px 14px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/gray-arrow.gif') no-repeat 0 4px;
}
div.widget ul li a:hover {
text-decoration: underline;
}


/* XX comments to .... */
h3#comments {
margin: 10px 0;
padding: 10px;
font-weight: normal;
background: #f5f5f5;
}

ul.commentlist {
border-top: 0;
margin: 0;
line-height: 1.4;
font-size: 12px;
}
ul.commentlist li.thread-odd, ul.commentlist li.thread-even {
margin: 5px 0;
padding: 10px;
border-bottom: solid 5px #fafafa;
background: #fff;
}
span.authorname, span.authorname a {
font-weight: normal;
font-size: 17px !important;
}
div.commentmetadata a {
color: #999;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}

img.nohover {border:0}
img.hover {border:0;display:none}
A:hover img.hover {display:inline}
A:hover img.nohover {display:none}

h1 {font-size: 2em; font-weight: bold; font-family: Helvetica, Arial, sans-serif;}
h2 {font-size: 1.7em; font-weight: bold; font-family: Helvetica, Arial, sans-serif;}
h3 {font-size: 1.5em; font-weight: bold; font-family: Helvetica, Arial, sans-serif;}
h4 {font-size: 1.3em; font-family: Helvetica, Arial, sans-serif;}
h5 {font-size: 11px; font-family: Lucida Grande, Trebuchet, Arial, sans-serif; text-transform: uppercase; letter-spacing: 1px; font-size: 11px;color: #999;}
h6 {color: #a2a2a2; font-size: 1em; font-family: Lucida Grande, Trebuchet, Arial, sans-serif;}

/* ================================================ */
/* Page menu background                            */
/* ================================================ */
div#menu1 {
        height: 40px; 
        margin-top:0px;
        background-color: transparent;
        position:relative;
        top:-30px;
}

/* ================================================ */
/* Page Menu item's background and border          */
/* ================================================ */
div#menu1 ul.rMenu {
        background-color: transparent !important;
        border: none 0px;
}

/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */
div#menu1 ul.rMenu li {
        background-color: transparent;
}

/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited {
        background-color: transparent;
        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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div#menu1 ul.rMenu li.current-menu-item a:link,
div#menu1 ul.rMenu li.current-menu-item a:active,
div#menu1 ul.rMenu li.current-menu-item a:hover,
div#menu1 ul.rMenu li.current-menu-item a:visited,
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-color:#transparent !important;
color:#transparent !important;
}

wilbrimley Dec 6, 2010 08:58 AM
This is great. I'm still a newbie at CSS, so I have one more step that I'd like to figure out...

I need to get rid of the background hover color effect. In other words, I want the menu bar to be completely transparent, with the only change on hover being the menu headings going from gray to white. The text needs to change on hover, but I want the background to remain unchanged. I tried modifying a few parts of the CSS insert but could not figure out how to get this effect. Does this make sense? Any help is much appreciated. Thanks.

wilbrimley Dec 7, 2010 10:08 AM
Does anyone have ideas on how to do this? Thanks!

wilbrimley Dec 8, 2010 11:40 AM
For anyone who is interested, I got the effect I wanted... Here's how:

Quote:
/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background-color: #transparent;
position:relative;
top:-30px;
}

/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background-color: transparent !important;
border: none 0px;
}

/* ================================================ */
/* Page Menu item */
/* ================================================ */
div#menu1 ul.rMenu li {
background-color: transparent;
}

/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link {
background: transparent !important;
color: #aaaaaa !important;
}
ul.rMenu li a:visited {
background: transparent !important;
color: #aaaaaa;
margin-left: 10px;
}
ul.rMenu li a:hover {
background: transparent !important;
color: #ffffff !important;
margin-left: 10px;
}
ul.rMenu li a:active,
ul.rMenu li {
background: transparent !important;
color: #ffffff !important;
margin-left: 10px;
}

/* ================================================ */
/* 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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

div#menu1 ul.rMenu li.current-menu-item a:link,
div#menu1 ul.rMenu li.current-menu-item a:active,
div#menu1 ul.rMenu li.current-menu-item a:hover,
div#menu1 ul.rMenu li.current-menu-item a:visited,
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-color: #transparent !important;
color: #ffffff !important;
}


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

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