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 » Header configuration & styling »

[SOLVED] menu- different color for each text category


  #1  
Old Mar 27, 2013, 07:56 AM
liana-kornik
 
17 posts · Mar 2013
Hello everyone,

I want every category menu above will be different colors,
I want one color for the "home" text, and another for "about" etc.
Even when hover on category the color change and when pressed point remains.

My css menu codes:

ul.rMenu {
padding:0 !important;
margin:0 !important;
list-style:none !important;
margin: 23px 18px 0 0px !important;

}
ul.rMenu li {
margin:15px 17px 13px 37px !important;
padding: 0px 0px 0px 0px !important;
}
ul.rMenu li a {
margin:0px !important;
padding: 0px 0px !important;
color:#626262 !important;
font:bold 14px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}
ul.rMenu li.current_page_item a {
color: #000000 !important;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}

div#menu1 ul.rMenu li {
background-color: transparent;
}
div#menu1 ul.rMenu {
background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
ul.rMenu li a:hover {
color:#000000 !important;
border-right: 0px solid #aaaaaa;
background-image: URL('/wp-content/themes/atahualpa/images/hover.png') !important;
}
#menu1 {
width: 902px !important;
}

div#menu1 {
order-bottom: 0px solid #461D7C;
background-image: URL('/wp-content/themes/atahualpa/images/menu1-1.png') !important;

}

I tried to add my design code:

li.page-item-24 {
text-color: #dddddd !important;
}

li.page-item-24 a:hover {
text-color: #dddddd !important;
}

li.page-item-24.current_page a {
text-color: #dddddd !important;
}
But without success, why?
  #2  
Old Mar 27, 2013, 09:42 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
What version of Atahualpa and WP?
What is the url?
How would you rate your CSS knowledge?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Mar 27, 2013, 02:31 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Also text-color is not a correct CSS attribute. I hope that didn't come from a CSS tutorial.
__________________
~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.
  #4  
Old Mar 29, 2013, 03:07 AM
liana-kornik
 
17 posts · Mar 2013
Thanks for the reply,
Juggledad the WordPress version: 3.5.1
Atahualpa Version: 3.7.11
I do not have a wide knowledge in CSS, I took from your Forum the menu design .

For color, Imilesw you're right! Even when I changed it to: color: #dddddd !important; , it still did not work unfortunately.

The URL
  #5  
Old Mar 29, 2013, 03:42 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
take a look at your CSS inserts espically this part
HTML Code:
ul.rMenu li a { 
margin:0px !important;
padding: 0px 0px !important;
color:#626262 !important;
font:bold 14px Arial !important;
text-decoration:none !important;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}
now go read this article and see if you can tell me what might be going on
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #6  
Old Mar 29, 2013, 05:49 AM
liana-kornik
 
17 posts · Mar 2013
First of all, there are many '!important', and there is no need them at all, right?
That's why the color code is not working?
I need to the css will look like this?

ul.rMenu li a {
margin:0px;
padding: 0px 0px;
color:#626262;
font:bold 14px Arial;
text-decoration:none;
border: solid 0px #FFFFFF;
border-right: 0px solid #222222;
border-left: 1px solid #222222;
}
  #7  
Old Mar 29, 2013, 06:52 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
so what happens if you remove the !important?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Mar 29, 2013, 07:28 AM
liana-kornik
 
17 posts · Mar 2013
When I delete the "!important" in all the lines, it disrupts all my menu, so I deleted it only in colors lines.
and added the code, which again does not work.
Could be that there is a problem of my code?

li.page-item-24 {
color: #ff0000;
}

li.page-item-24 a:hover {
color: #ff0000;
}

li.page-item-24.current_page a {
color: #ff0000;
}
  #9  
Old Mar 29, 2013, 08:21 AM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
you need to use 'menu-item-nn' in place of 'page-item-nn'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Mar 29, 2013, 08:25 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
To throw one other bit of info in here... If you are using the WordPress menu system you can add a class to each menu item to use for styling. If you don't see the class box on the menu you may have to enable it via the Screen Options on the menu page.
__________________
~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.
  #11  
Old Mar 29, 2013, 08:35 AM
liana-kornik
 
17 posts · Mar 2013
Thank you!!!
Now it works partially, how can I do that the color will remain when the category active?
  #12  
Old Mar 29, 2013, 08:42 AM
liana-kornik
 
17 posts · Mar 2013
I tried to add this:
li.menu-item-24 a:active {
color: #ff0000 !important;
}
But it does not work, why?
  #13  
Old Mar 29, 2013, 11:40 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
"active" mean what appears when you have a button or item clicked on (when the mouse button is activated). To have a different color when you are on that page you need to use the class for that item which can be current_page_item or current _menu_item or something of that sort. I am not sure of the exact naming but you can use Firebug to determine the "current" class for the menu tab when on that page.
__________________
~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.
  #14  
Old Mar 29, 2013, 02:14 PM
juggledad's Avatar
juggledad
 
23,667 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
to cover all cases, this is what you would need
HTML Code:
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:link, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:active, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:hover, 
div#menu1 ul.rMenu li#menu-item-19.current-menu-item a:visited, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:link, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:active, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:hover, 
div#menu1 ul.rMenu li#menu-item-19.current_page_item a:visited, 
div#menu1 ul.rMenu li#menu-item-19 a:hover {
    color: #FF0000;
}
The menu CSS is the most complicated css in teh theme, there are over 400 lines of CSS covering the menus
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #15  
Old Mar 31, 2013, 02:37 AM
liana-kornik
 
17 posts · Mar 2013
Thanks it works great!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Changing the Post CONTAINER color changes text color, NOT background color rhythm Center area post/pages 2 Jun 22, 2012 07:44 PM
[SOLVED] change current category menu item text color cway Page & Category Menu Bars 3 Oct 29, 2010 08:39 AM
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 08:08 AM
Alternating text color links in menu... possible? flapperjak Page & Category Menu Bars 3 Aug 27, 2010 06:47 PM
Sidebar menu background & text color billc108 Sidebars & Widgets 6 Jul 7, 2010 05:49 AM


All times are GMT -6. The time now is 08:18 PM.


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