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 » FAQ - Atahualpa » Menus »

Juggledad's colored menu cheat sheet


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 May 10, 2010, 05:20 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.
HTML Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background: blue; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: red;
	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: yellow !important;
	color: #000000 !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;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
__________________
"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; Mar 17, 2011 at 12:24 PM.
  #2  
Old Jul 1, 2010, 10:12 AM
markbo
 
1 posts · Jul 2010
Wake Forest, NC
Send a message via Yahoo to markbo
I added these lines as CSS inserts on the Atahualpa them however the changes are only affecting the results in Chrome - not in IE. Is there an easy fix to this that you can share?
  #3  
Old Jul 1, 2010, 10:30 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
I just fixed it, IE doeswn't like the '#' sign before the NAME of the color, so while all the other browsers will let you have '#red', IE ignores it so you have to code it just 'red'. sigh have I mentioned how I hate IE?
__________________
"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; Aug 24, 2010 at 02:13 PM.
  #4  
Old Aug 10, 2010, 10:48 AM
interage
 
98 posts · Apr 2009
Hey JuggleDad!

First off - thanks so much for posting this - very helpful.

It'd really help if somewhere there were a guide to what the specific CSS markups are for all menu items, including subs. It's easy to get confused about the differences between page items and sub-menu items.

Thanks again.
  #5  
Old Sep 6, 2010, 05:45 AM
Pierre's Avatar
Pierre
 
36 posts · Aug 2010
Montpellier, France
Hello Juggledad

I have pasted this at the end of my CSS, saved the modified file and nothing happens

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background:#8cbb15
}

Here's the website I'm working on : www.enjoy-english-blog.fr

I'd like to have the whole Pages Menu + horizontal line in the same light green color #8cbb15

(and have my Pages Menu fonts in bold)

Thanks for your help

Pierre
  #6  
Old Sep 6, 2010, 01:14 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
When you say you "pasted this at the end of my CSS" where do you mean?

This should be pasted into ATO>Add HTML/CSS Inserts>CSS Inserts
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Sep 6, 2010, 03:02 PM
Franco
 
1 posts · Sep 2010
Pierre,
i got the same problem
i solved this way:
ATO>Add HTML/CSS Insert
in CSS Inserts look for this line
div#menu1 {
background: #eee;

replace #eee with #8cbb15

and the grey uppr line is now completely green...
a bientot
Franco


Here's the website I'm working on : www.enjoy-english-blog.fr

I'd like to have the whole Pages Menu + horizontal line in the same light green color #8cbb15

(and have my Pages Menu fonts in bold)

Thanks for your help

Pierre[/quote]
  #8  
Old Sep 7, 2010, 11:01 AM
Pierre's Avatar
Pierre
 
36 posts · Aug 2010
Montpellier, France
thank you very much, I had pasted it into Style.css....!

I'll delete it from there and do as you say

Thanks a lot, à bientôt :-)

Pierre

PS : just did it, took me 2 minutes and works great !!!
Thanks again

Pierre

Last edited by Pierre; Sep 7, 2010 at 11:07 AM.
  #9  
Old Nov 14, 2010, 02:26 AM
aclime
 
31 posts · Oct 2010
I got problems with this.
Here is my code:
Code:
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}, 
#menu2 ul.rMenu li a:hover {background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top #2C79B3;
}, 
#menu2 ul.rMenu li a:active {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}, 
#menu2 ul.rMenu li a:visited {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}, 
#menu2 ul.rMenu li {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
First of all I will tell what is wrong in IE.

IE

When I hover on left side (Internetas) it looks like it should be


But... When I hover on Programavimas or Tinklapiai, just right side, no hover image. Why?


Firefox

Same code but different problems.

No hover, my gradient image just dissapears where is a text


And when I hover on text (left or right side), it's just a color, not a green gradient which is in IE


I really need to fix this, please help me. Thanks
  #10  
Old Nov 14, 2010, 04:11 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
What is the URL?
Are you using the atahualpa or wordpress menus?
Do you have the two menu fixes applied? (see new version and updating forum)
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Nov 14, 2010, 06:09 AM
aclime
 
31 posts · Oct 2010
URL was sent to your pm. It's still not public, so I don't want to share it.

Wordpress menus

When I was writing last post - no. I added now http://forum.bytesforall.com/showthread.php?t=8756 but it didn't fixed my problem.

Last edited by aclime; Nov 14, 2010 at 06:15 AM.
  #12  
Old Nov 14, 2010, 10:37 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Remove the commas after the '}'s that is improper CSS and is causing issues

next re order your statements

Quote:
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #13  
Old Nov 14, 2010, 11:55 AM
aclime
 
31 posts · Oct 2010
At last it works. Thank you.

One more small problem

Now my site code is:

Code:
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
} 
#menu2 ul.rMenu li a:visited {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
} 
#menu2 ul.rMenu li a:hover {background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top #2C79B3;
} 
#menu2 ul.rMenu li a:active {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top #2C79B3;
} 
#menu2 ul.rMenu li {
background:url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top #2C79B3;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
#menu2 ul.rMenu li a:active don't change gradient image. It should be menu-gradient-visit.gif but it's menu-gradient.gif

I guess that when I'm in page which is in menu, that page link changes to menu-gradient-visit.gif
  #14  
Old Nov 14, 2010, 10:13 PM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I am not sure if this is what is giving you the problem but the syntax for the background should have the color at the beginning like the following.
HTML Code:
#menu2 ul.rMenu li a:active {
background:  #2C79B3 url("http://my_site/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top;
}
I would change your other background lines as well to make sure they aren't affecting anything.

This is the info from w3schools.com concerning background shorthand syntax...

When using the shorthand property the order of the property values are:

* background-color
* background-image
* background-repeat
* background-attachment
* background-position

It does not matter if one of the property values are missing, as long as the ones that are present are in this order.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Nov 15, 2010, 03:23 AM
aclime
 
31 posts · Oct 2010
Code:
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li a:link {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:visited {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:hover {background:url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:active {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
Changed, nothing happened.
  #16  
Old Nov 15, 2010, 06:52 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
I am kink of at a loss now without seeing the site.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Nov 15, 2010, 07:07 AM
aclime
 
31 posts · Oct 2010
You can view my site in this link.
  #18  
Old Nov 15, 2010, 07:31 AM
lmilesw's Avatar
lmilesw
 
10,100 posts · Jul 2009
Central New York State USA
Shouldn't your active image be menu-gradient-visit.gif?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #19  
Old Nov 15, 2010, 07:45 AM
aclime
 
31 posts · Oct 2010
Yes, changed. Not fixed
  #20  
Old Nov 15, 2010, 07:56 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try moving the
HTML Code:
#menu2 ul.rMenu li {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
}
to the top so it doesn't overrride the others
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #21  
Old Nov 15, 2010, 09:08 AM
aclime
 
31 posts · Oct 2010
Code:
/* ================================================ */
/* Category Menu item's background and border       */
/* ================================================ */
div#menu2 ul.rMenu {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
}
/* ================================================== */
/* Category Menu item                                 */
/* ================================================== */
#menu2 ul.rMenu li {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
border-right:1px solid #2B6484;
}
#menu2 ul.rMenu li a:link {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:visited {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:hover {background:url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top;
} 
#menu2 ul.rMenu li a:active {
background: #2C79B3 url("http://docs.e7.lt/wp-content/themes/atahualpa/images/menu-gradient-visit.gif") repeat-x scroll center top;
} 

/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
Still don't work
  #22  
Old Nov 15, 2010, 06:34 PM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Which version of Atahualpa are you using? something is not correct in the way your menu's are being built. the atahualpa classes like 'current-menu-item' are not being built.

Do you have any plugins that may be effecting the menus"
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #23  
Old Nov 16, 2010, 03:23 AM
aclime
 
31 posts · Oct 2010
Atahualpa 3.5.3

No, not plugins problems. I deactivated all plugins 1min ago and menu still don't work.
  #24  
Old Nov 16, 2010, 03:57 AM
juggledad's Avatar
juggledad
 
22,265 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Something is not right a d I will need to take a look. Please send me a PM with an admin ID and pw
might not be able to look at it for several hours
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #25  
Old Nov 16, 2010, 04:55 AM
aclime
 
31 posts · Oct 2010
Sent.

.......

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
WP link is colored blue in editor - turns red when published BFAWerx Forum How-To 1 May 2, 2010 05:27 AM
how to change size of page menu bar - via style sheet? mamboe29 Page & Category Menu Bars 10 Apr 20, 2010 01:36 PM
Style sheet judykelly New Versions, & Updating 5 Jul 25, 2009 02:10 PM
[SOLVED] Juggledad, could you please follow up on this? cosmiclove Forum How-To 2 Jul 8, 2009 06:15 AM
juggledad is a moderator! Flynn Atahualpa 3 Wordpress theme 0 May 30, 2009 07:41 PM


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


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