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)
-   -   Gradient menu bar using Juggledad's cheat sheet (http://forum.bytesforall.com/showthread.php?t=19569)

Blessings4all Feb 5, 2013 05:37 PM

Gradient menu bar using Juggledad's cheat sheet
 
I would like to have a page menu bar with a purple to white gradient and a pink to white gradient for the hover/active tab. I created a gradient purple image to be repeated. I added Juggledad's cheat sheet to CSS Inserts and modified it as you see below. This is my website.

I have 2 questions:

1. Why does the gradient only work on the home page? If I go to any other page or post, it reverts to my other menu bar.

2. Where and how do I add the image for the pink gradient that will be used for the hover/active tab?

Thanks so much in advance.

Quote:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background: white;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background-image:url(wp-content/uploads/2013/02/WHPurpleMenu.jpg) !important;
background-repeat:repeat-x !important;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li {
background-image:url(wp-content/uploads/2013/02/WHPurpleMenu.jpg) !important;
background-repeat:repeat-x !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:visited,
#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li a:active,
#menu2 ul.rMenu li {
background: purple !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */

juggledad Feb 5, 2013 06:42 PM

the url you are using to point to the image is not proper when you go to other pages. change it from
HTML Code:

wp-content/uploads/2013/02/WHPurpleMenu.jpg
to
HTML Code:

/wp-content/uploads/2013/02/WHPurpleMenu.jpg

Blessings4all Feb 6, 2013 09:14 AM

Thanks so much. That took care of problem number 1. Now where do I put the code for the pink graphic if I want the active page and the hover to be pink?

juggledad Feb 6, 2013 10:12 AM

I suggest you take a look at this writeup about psuedo classes and then explain how you think you have to do it - yes it is test time :p

Blessings4all Feb 6, 2013 01:22 PM

Ah ha! The lightbulb goes on. Thanks so much. Now I can place things where I want.:)


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

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