Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

[SOLVED] page menu bar transparant


  #1  
Old Apr 26, 2010, 04:52 PM
byronyasgur
 
17 posts · Feb 2009
[SOLVED] page menu bar transparant

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
Attached Thumbnails
Click image for larger version

Name:	pagesbar.png
Views:	1351
Size:	44.7 KB
ID:	478  
  #2  
Old Apr 27, 2010, 07:40 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of Atahualpa and WP?
What is the url?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Apr 27, 2010, 09:59 AM
byronyasgur
 
17 posts · Feb 2009
wp 2.9.2
at 3.4.6

it's a local development project so no url
  #4  
Old Apr 27, 2010, 04:28 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Apr 27, 2010, 07:44 PM
byronyasgur
 
17 posts · Feb 2009
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
  #6  
Old May 4, 2010, 05:30 AM
byronyasgur
 
17 posts · Feb 2009
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
Attached Thumbnails
Click image for larger version

Name:	One Week of Days.jpg
Views:	1275
Size:	24.2 KB
ID:	484  

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Atahualpa Page Menu Bar -&gt; BFA Page Menu Bar? bhannemann Page & Category Menu Bars 16 Feb 21, 2011 04:49 AM
[SOLVED] Static Pages on the Category Menu Bar instead of Page Bar jkfly4 Page & Category Menu Bars 4 Mar 27, 2010 03:06 AM
Removing (Top) Page Menu Bar - Displaying page menu in left column instead DrewD Page & Category Menu Bars 1 Mar 18, 2010 12:03 PM
category menu bar instead of page menu bar seneque Page & Category Menu Bars 0 Mar 7, 2010 09:20 AM
[SOLVED] How to create spacing between page menu bar, side bar, and footer? ssoszka Atahualpa 3 Wordpress theme 4 Nov 29, 2009 10:39 AM


All times are GMT -6. The time now is 06:10 AM.


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