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


  #1  
Old Sep 12, 2009, 09:37 PM
willsy
 
6 posts · Sep 2009
[SOLVED] How to get image in menu, but color in submenu's

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, 05:13 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 08: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, 11:09 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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, 02: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, 03:07 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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

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 07:41 AM
Adding formatting to submenu dropdown kdawes01 Page & Category Menu Bars 10 Feb 10, 2011 09:47 AM
[SOLVED] baackground color in header image area bushtool Header configuration & styling 3 Sep 1, 2009 02:39 PM
Active colour for submenu nymana Page & Category Menu Bars 0 Jul 28, 2009 03:00 PM
Submenu formatting interage Page & Category Menu Bars 0 Apr 24, 2009 10:48 AM


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


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