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 »

transparent menu bar


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 Sep 15, 2010, 07:26 PM
kalexn's Avatar
kalexn
 
18 posts · Jul 2010
Nashville, Tennessee
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
__________________
Ladybug Blessings
http://www.ladybug-blessings.com
  #2  
Old Sep 16, 2010, 04:17 AM
juggledad's Avatar
juggledad
 
21,677 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Sep 16, 2010, 07:37 AM
Dennis
 
26 posts · Nov 2009
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

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 5 Jul 6, 2013 11:04 AM
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
[SOLVED] Transparent page menu - none of the threads work for me.. maguai Page & Category Menu Bars 1 Jul 27, 2009 11:04 AM
Transparent Menu Item Instead of A Background Color oz1 Page & Category Menu Bars 1 Jun 29, 2009 05:19 AM


All times are GMT -6. The time now is 01:16 AM.


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