Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   [SOLVED] How to get image in menu, but color in submenu's (http://forum.bytesforall.com/showthread.php?t=3413)

willsy Sep 12, 2009 09:37 PM
[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

juggledad Sep 13, 2009 05:13 AM
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
}

willsy Sep 13, 2009 08:44 AM
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.

http://sarahsinkspot.com/blog/wp-con...oads/Ideal.jpg

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

http://sarahsinkspot.com/blog/wp-con...over-about.jpg

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

http://sarahsinkspot.com/blog/wp-con.../AboutPage.jpg

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

http://sarahsinkspot.com/blog/wp-con...UnderAbout.jpg

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
}

juggledad Sep 13, 2009 11:09 AM
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;
        }

willsy Sep 13, 2009 02:23 PM
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

juggledad Sep 13, 2009 03:07 PM
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;
        }

juggledad Sep 15, 2009 05:19 AM
So did this all work?

willsy Sep 15, 2009 05:38 PM
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;
        }

juggledad Sep 16, 2009 06:36 AM
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
}

willsy Sep 16, 2009 03:53 PM
BINGO !

Thanks so much juggledad. Money on the way.


All times are GMT -6. The time now is 06:17 PM.

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