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

Juggledad's colored menu cheat sheet


  #1  
Old May 10, 2010, 06:20 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Juggledad's colored menu cheat sheet

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 01:24 PM.
  #2  
Old Jul 1, 2010, 11: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, 11:30 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 03:13 PM.
  #4  
Old Aug 10, 2010, 11: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, 06: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, 02:14 PM
lmilesw's Avatar
lmilesw
 
10,174 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, 04: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, 12:01 PM
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 12:07 PM.
  #9  
Old Nov 14, 2010, 03: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, 05:11 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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

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 06:27 AM
how to change size of page menu bar - via style sheet? mamboe29 Page & Category Menu Bars 10 Apr 20, 2010 02:36 PM
Style sheet judykelly New Versions, & Updating 5 Jul 25, 2009 03:10 PM
[SOLVED] Juggledad, could you please follow up on this? cosmiclove Forum How-To 2 Jul 8, 2009 07:15 AM
juggledad is a moderator! Flynn Atahualpa 3 Wordpress theme 0 May 30, 2009 08:41 PM


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


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