How do I change the font color of Page Menu Bar?

I want it WHITE, so it could blend well with a RED background.

Thanks.

have you looked at the page menu bar options?

i looked, i was wondering if you can change the color of just ONE of the pages in the page menu bar?

How would you change the color of 1 page on the menu bar? for example on www.themulliganshow.com i would like to change the color of just the PODCAST page on the nav bar? Just like on the bytes for all homepage the Forum tab is green...

yes you can, you will have to code a CSS Selector and rule for that menu item and add it to the ATO->Add HTML/CSS Inserts->CSS Inserts option.

If you look at the generated source for a page, you will be able to find a unique identifier to use in the selector

bump it hoping for an admin?

can anyone give me the id of the admin so i can ask them directly? or is there an email address? i thought i would be able to fix it on the forums but looks like i stumpped everyone!

1) do not double post
2) see post #5

Originally Posted by juggledad

1) do not double post
2) see post #5

can you please explain post number 5 a little more clearly. thank you for your help.

Juggledad,

I tried to use your advice to code the page and this is what i tried, and it did not work out too well... i added the insert but it didnt show up...this is the code i used, can you suggest what i coded wrong? Thanks.

rMenu-expand page_item page-item-10 {color: white; background-color: #9966FF; }

(for the podcast menu tab, i thought that was the tag, i wasnt sure where to locate a tag for it...) (trying to change the background of just that section of the menu and the font color)

www.themulliganshow.com

I had exactly the same question, and with Juggledad's tip was able to figure out where to go. However, the coding is quite so simple, since each condition for the page link "a" tag (e.g. link, hover, active, visited) needs to be specified.

Here is what I came up with:

div#menu1 ul.rMenu li.page-item-349 a:link, div#menu1 ul.rMenu li.page-item-349 a:visited, div#menu1 ul.rMenu li.page-item-349 a:hover, div#menu1 ul.rMenu li.page-item-349 a:active {color: red;}

This made the page menu item for my special page (page-item-349) become red in all cases (before visit, after visit, while hovering, while active). Of course, one could change this so that each condition is colored or styled differently.

It seemed (in my quick testing) to be necessary to include all the parent CSS selectors (the "div#menu1 ul.rMenu" stuff) since simply putting "li.page-item-349 a:link" etc. didn't work by itself.

For your case, simply substitute the appropriate page number. This line of code goes into ATO > Add HTML/CSS Inserts > CSS Inserts.

I still have a few questions, although this is working well enough for my immediate needs.

1) This page menu item has some children, so it is actually brings up a submenu. The children pages all are colored red. Is there a way to restrict the CSS effect to only apply to the specific item, other than by adding in additional lines of code to override it for each child?

2) Is there a more compact way of writing this, combining the various link, visited, hover, and active cases into a single declaration?

3) Did I miss anything? Is there another case beyond link, visited, hover, and active that I should specify?

Eric Bobrow

1) This page menu item has some children, so it is actually brings up a submenu. The children pages all are colored red. Is there a way to restrict the CSS effect to only apply to the specific item, other than by adding in additional lines of code to override it for each child?

2) Is there a more compact way of writing this, combining the various link, visited, hover, and active cases into a single declaration?

3) Did I miss anything? Is there another case beyond link, visited, hover, and active that I should specify?

(1) nope, the menu CSS is the most complicate in the entire style sheet - it takes up almost 500 lines of CSS. If the child menus have sub pages it gets even messier.

(2) maybe, you could try simplifying by using the '!important' in the rule

----------------------
cpalmer03
you have coded teh selector improperly. When ever you name a CLASS it must be preceded with a '.' (period0 and if you name an ID it must be preceded with a '#' (pound) sign. In addition you need to go one level deeper to the <a...> and you need the '!important' option to override other CSS rules that may apply. Your code needs to be

.page-item-10 a {
color: white !important;
background-color: #9966FF !important;}

That code really helped me Eric even though I wasn't the OP. Thanks.
__________________

Glad to help!!

By the way, I was able to simplify the code down based on the info from Juggledad and his quote from cpalmer03:

.page-item-349 a{color: red !important;}

This makes the link red for this page menu item, regardless of state (visited, hover, etc.).
It also makes the links to the children pages in the submenu red, since they also meet the CSS selector criteria (class = page-item-349). To handle them separately, place additional CSS lines FOLLOWING the earlier one above (if placed later, they take precedence), for example:

.page-item-1016 a{color: black !important;}
.page-item-1013 a{color: black !important;}

This makes these particular submenu items black instead of red. You need to place a line for each submenu item.

Here is my "final" version, which makes the parent menu item (page 1016) red and bold, but restores the black and normal weight to the listed children:

.page-item-349 a{color: red !important; font-weight: bold !important;}
.page-item-1016 a, .page-item-1013 a{
color: black !important; font-weight: normal !important;}

I just noticed a very strange problem on our website: all the paragraphs are being run together, as if all the <p> tags have disappeared. It's very odd. I tried removing the latest CSS inserts, and that didn't make any difference.

I could see the correct spacing in the WP text editor, but not on the site itself - then all of a sudden, in the WP text editor, page content is being run together as well.

I don't know if it has anything to do with Atahualpa, or with another plug-in that was recently updated. I will post news once I figure it out. (If anyone has seen something like this before, please let me know!!)

That strange problem came from a membership site plugin that was updated today, and had some bugs. Fortunately, the developer was able to fix the plugin and all is working properly now.