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

kalexn Sep 15, 2010 07:26 PM

transparent menu bar
 
Okay, so I have been search & reading & trying everything for the past hour regarding making my menu bar transparent. I used a post that juggledad (I think) had made mentioning adding code to your css/html (and it had all weird colors in it and changing it:). Well, I changed them all to transparent and they are white.

I am going to include all of the code I have in my css. My site is here: http://www.ladybug-blessings.com

I want to be able to see the stripped background through for the menu bar. Thanks!

td#header {
padding-bottom: 15px;
}
/* removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */
td#middle {
padding: 0;
}
div.searchbox-form {
margin: 5px 0 15px 5px;
}
div#menu1 ul.rMenu {
background: transparent;
border: none;

}
div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/round-gray.gif') no-repeat 0 7px;
}
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }


div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
}
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
}
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
}
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background:transparent !important;
}

div#menu1 {
border:0;
}
div#menu2 {
border:0;
}

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background: transparent;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: transparent;
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: transparent !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

juggledad Sep 16, 2010 04:17 AM

It is transparent, but you are seeing the white that you set for the container. Think pf the page as layers of images one on top of the other. you set the bottom layer (the background) to have the stripes. Then over that is the wrapper, then comes the container then the menu is layed on top of that. At ATO->Style & configure LAYOUT->Layout Container Style you have 'background: #FFF:' if you change that to 'transparent' you will now see the stripes thru it.

However, you will see the stripes thru any of the areas that are layed on the container that don't have a background color set for them, the sidebars, the center area. So you will have to go thru the options aand style thesidebars with a background same thing for the center column

Dennis Sep 16, 2010 07:37 AM

I have a very similar problem.

I have now found out how to make a transparant bg on my Page Menu so you can see the bg-image through.

But on hover the bg changes to black - I want to have it transparent so that ONLY the titles change color!

Should I change this in CSS Inserts or.... and what line?

My site: www.haircenter.dk/wordpress

Thanks a million....
Dennis


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

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