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 »

[SOLVED] Choosing "transparent" for the page/category bar background color?


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 Feb 20, 2010, 12:35 PM
rhythm
 
32 posts · Jan 2010
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?
  #2  
Old Feb 21, 2010, 10:57 AM
juggledad's Avatar
juggledad
 
22,311 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 21, 2010, 11:39 AM
sleenie
 
291 posts · May 2009
Texas and New Mexico
Send a message via Skype™ to sleenie
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?

Last edited by sleenie; Feb 21, 2010 at 11:45 AM.
  #4  
Old Nov 22, 2010, 11:01 AM
mhovitch
 
3 posts · Nov 2010
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
  #5  
Old Dec 4, 2010, 06:01 PM
wilbrimley
 
21 posts · Jun 2010
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.
Attached Thumbnails
Click image for larger version

Name:	screen-capture.jpg
Views:	256
Size:	34.0 KB
ID:	928  

Last edited by wilbrimley; Dec 4, 2010 at 06:11 PM.
  #6  
Old Dec 4, 2010, 06:46 PM
juggledad's Avatar
juggledad
 
22,311 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What version of atahualpa?
export your settings and attach them to a reply
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Dec 5, 2010, 09:44 AM
wilbrimley
 
21 posts · Jun 2010
Version 3.5.3
Current settings here... Thanks!
Attached Files
File Type: txt ata-wwwncfarmworkersorg-20101205.txt (20.6 KB, 305 views)
  #8  
Old Dec 6, 2010, 06:40 AM
juggledad's Avatar
juggledad
 
22,311 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Dec 6, 2010, 09:58 AM
wilbrimley
 
21 posts · Jun 2010
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.
  #10  
Old Dec 7, 2010, 11:08 AM
wilbrimley
 
21 posts · Jun 2010
Does anyone have ideas on how to do this? Thanks!
  #11  
Old Dec 8, 2010, 12:40 PM
wilbrimley
 
21 posts · Jun 2010
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;
}

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Need TRANSPARENT space between "content" and footer JaneD Post-Kicker, -Byline & -Footer 0 Jan 28, 2010 11:20 PM
Background color "sub-pages" and "whole menu bar" gxxfy Page & Category Menu Bars 1 Nov 24, 2009 03:46 AM
Posts of Category "Bulletin" on home page? RAMilewski Plugins & Atahualpa 5 Aug 16, 2009 06:21 PM
Problem implementing "How to show single post special category on static home page??" mkny13 Post-Kicker, -Byline & -Footer 6 May 5, 2009 06:21 AM
Flexx theme - How to change my "List Category or Archives" to "List Titles ONLY" ?? idaks01 Post-Kicker, -Byline & -Footer 0 Mar 28, 2009 06:22 PM


All times are GMT -6. The time now is 04:26 AM.


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