Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Gradient menu bar using Juggledad's cheat sheet


  #1  
Old Feb 5, 2013, 05:37 PM
Blessings4all
 
37 posts · Jul 2012
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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
  #2  
Old Feb 5, 2013, 06:42 PM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Feb 6, 2013, 09:14 AM
Blessings4all
 
37 posts · Jul 2012
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?
  #4  
Old Feb 6, 2013, 10:12 AM
juggledad's Avatar
juggledad
 
23,672 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Feb 6, 2013, 01:22 PM
Blessings4all
 
37 posts · Jul 2012
Ah ha! The lightbulb goes on. Thanks so much. Now I can place things where I want.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Juggledad's colored menu cheat sheet juggledad Menus 31 Oct 24, 2012 06:15 AM
Gradient in Page Menu Bar and Separation Bars clayphillips Page & Category Menu Bars 12 Feb 10, 2010 05:48 AM


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


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