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] How to get image in menu, but color in submenu's


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 12, 2009, 10:37 PM
willsy
 
6 posts · Sep 2009
Go to this URL http://sarahsinkspot.com/blog/

You will see I have 3 buttons along the top, the middle one (with child menus) has no gradient

What I want is:
  • All buttons along the top with the same gradient
  • All text color should be #663300, except the active and hover which I want as #FFFFFF
  • For the drop down (child) menu, I want the background to be #AAC95F (no background image, just the color)
  • For the drop down (child) menu, I want the same text colors, #663300 as the normally displaying font color and #FFFFFF as the active and hover
  • When you click on a child menu top level item, or child item, I want everything to stay the same as above.

Make sense ?

I have been struggling with this for 2 nights, even with this forum and firebug, and I need to move on :-)

Please don't PM me, please respond here, so others can benefit from your wisdom :-) First person who gets this working as I need gets the $20.

Mods: If I am breaking a forum protocol here, please let me know. I am getting frustrated here, so I would like a quick resolution, thought this might be the quickest way :-)

Other information: Here is my current CSS inserts:
Code:
/* Remove background from menu bar */
div#menu1 ul.rMenu {
background: none;
} 

/* Create spacing between menu buttons */
ul.rMenu-hor li {
margin-right: 10px;
}

ul.rMenu li a {
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active,
{
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}
Cheers,
Willsy
  #2  
Old Sep 13, 2009, 06:13 AM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
The drop down's have a different class fhan the horizontal items. Add this and see if it does what you want
HTML Code:
li.rMenu-expand  {
background-image:url(http://sarahsinkspot.com/blog/wp-content/uploads/2009/09/gradient.jpg) !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 Sep 13, 2009, 09:44 AM
willsy
 
6 posts · Sep 2009
Thanks juggledad, its better, top line has background images (when on the Home or Contact Page) but then I run into the next set of problems, all regarding the drop down menu:

This is what I am trying to achieve, essentially the same look on every page, with the top row of buttons with a background, the drop down menus, in that lime green, all text brown apart from current and hover that should be white.



1) On the "Home" page - if I hover over the About button I get this: This is working as I want except that I want the background to stay there for the About button when I hover, as per the other top level buttons



2) On the "About" page - if I hover over the About button, background is gone, and all text is white



3) On the "Under About" page, I lose all backgrounds on other top page buttons:



Here is the current CSS
Code:
/* Remove background from menu bar */
div#menu1 ul.rMenu {
background: none;
} 

/* Create spacing between menu buttons */
ul.rMenu-hor li {
margin-right: 10px;
}

ul.rMenu li a {
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active,
{
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}

li.rMenu-expand {
background-image:url(http://sarahsinkspot.com/blog/wp-content/uploads/2009/09/gradient.jpg) !important
}
  #4  
Old Sep 13, 2009, 12:09 PM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
add this
HTML Code:
/* "current" page and hover, first part old version */
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.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-color: transparent !important;
	color: #FFFFFF;
	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Sep 13, 2009, 03:23 PM
willsy
 
6 posts · Sep 2009
Thanks juggledad. Its slightly better, the background stays now when you click on the "About" box, but clicking on any of the children under "About" still results in the same problem as before. The current behaviour can be seen at http://sarahsinkspot.com/blog
  #6  
Old Sep 13, 2009, 04:07 PM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
oops, sorry use this instead -
HTML Code:
/* "current" page and hover, first part old version */
div#menu1 ul.rMenu li.page_item a:link, 
div#menu1 ul.rMenu li.page_item a:active, 
div#menu1 ul.rMenu li.page_item a:hover, 
div#menu1 ul.rMenu li.page_item a:visited, 
div#menu1 ul.rMenu li.page_item > a:link, 
div#menu1 ul.rMenu li.page_item > a:active, 
div#menu1 ul.rMenu li.page_item > a:hover, 
div#menu1 ul.rMenu li.page_item > a:visited, 
div#menu1 ul.rMenu li a:hover {
	background-color: transparent !important;
	color: #FFFFFF;
	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Sep 15, 2009, 06:19 AM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
So did this all work?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Sep 15, 2009, 06:38 PM
willsy
 
6 posts · Sep 2009
Not yet, check out the result at http://sarahsinkspot.com/blog/

Background still disappears when clicking on any of the child pages. Plus the Brown text for hover, current and visited is now white, and also hovering on any if the child page buttons results in a grey background, and not the text turning brown.

Current code is below:

Code:
/* Remove background from menu bar */
div#menu1 ul.rMenu {
background: none;
} 

/* Create spacing between menu buttons */
ul.rMenu-hor li {
margin-right: 10px;
}

ul.rMenu li a {
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li a:active,
{
background-image: url(wp-content/uploads/2009/09/gradient.jpg) !important;
}

li.rMenu-expand {
background-image:url(http://sarahsinkspot.com/blog/wp-content/uploads/2009/09/gradient.jpg) !important
}

/* "current" page and hover, first part old version */
div#menu1 ul.rMenu li.page_item a:link, 
div#menu1 ul.rMenu li.page_item a:active, 
div#menu1 ul.rMenu li.page_item a:hover, 
div#menu1 ul.rMenu li.page_item a:visited, 
div#menu1 ul.rMenu li.page_item > a:link, 
div#menu1 ul.rMenu li.page_item > a:active, 
div#menu1 ul.rMenu li.page_item > a:hover, 
div#menu1 ul.rMenu li.page_item > a:visited, 
div#menu1 ul.rMenu li a:hover {
	background-color: transparent !important;
	color: #FFFFFF;
	}
  #9  
Old Sep 16, 2009, 07:36 AM
juggledad's Avatar
juggledad
 
22,382 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Alright give this a shot, it's simplified and I think it will do it, replace everything with this
HTML Code:
div#menu1 ul#rmenu2 li.current_page_item a{
color: #ffffff; 
}

div#menu1 ul#rmenu2 {
background:none
}

div#menu1 ul#rmenu2 li {
margin-right:10px
}

div#menu1 ul#rmenu2 li.current_page_item a,
div#menu1 ul#rmenu2 li a:hover {
background-color:transparent;
}

div#menu1 ul#rmenu2 li ul a:hover {
background-color: #AAC95F;

}

div#menu1 ul#rmenu2 li a,
div#menu1 ul#rmenu2 li.rMenu-expand {
background-image:url(http://sarahsinkspot.com/blog/wp-content/uploads/2009/09/gradient.jpg) !important
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Sep 22, 2009 at 05:09 AM.
  #10  
Old Sep 16, 2009, 04:53 PM
willsy
 
6 posts · Sep 2009
BINGO !

Thanks so much juggledad. Money on the way.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[How To] Replacing the Atahualpa header image with a 'sliding door' image menu jack96161 Header 57 May 17, 2012 08:41 AM
Adding formatting to submenu dropdown kdawes01 Page & Category Menu Bars 10 Feb 10, 2011 10:47 AM
[SOLVED] baackground color in header image area bushtool Header configuration & styling 3 Sep 1, 2009 03:39 PM
Active colour for submenu nymana Page & Category Menu Bars 0 Jul 28, 2009 04:00 PM
Submenu formatting interage Page & Category Menu Bars 0 Apr 24, 2009 11:48 AM


All times are GMT -6. The time now is 07:32 PM.


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