Please post or PM me your URL

Flynn,

Got it all working. After reviewing your solutions for Tigger, and learning what each line was actually doing!, I got it all set:

/* DEFAULT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited {
background: #ffffff !important;
border-left: solid 7px #cccccc !important;
color: #666666 !important;
}
/* For HOVER */
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 7px #000000 !important;
color: #000000 !important;
}
/* For CURRENT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited,
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 7px #000000 !important;
color: #000000 !important;
}
/* Reset children of CURRENT */
div.flexipages_widget ul li.current_page_item ul li a:link,
div.flexipages_widget ul li.current_page_item ul li a:visited {
background: #ffffff !important;
border-left: solid 7px #cccccc !important;
color: #666666 !important;
}
div.flexipages_widget ul li.current_page_item ul li a:active,
div.flexipages_widget ul li.current_page_item ul li a:hover {
background: #ffffff !important;
border-left: solid 7px #000000 !important;
color: #000000 !important;
}


Sorry for all the posts!

Thank you,
Scott K.

Flynn,

I'm also using the Flexipages plugin. I got it so that the active page is highlighted on the side navigation, which only contains secondary pages. but I want my primary page to show as active as well, so that the user knows which section they are in. Currently, I only have two primary pages that have sub pages, but I can't figure out how to make their respective primary page links, which are displayed across the top, appear as active when the user is on one the sub pages. Any suggestions?

Best,
Michael

Look into the source code (or use Firebug) to see what the parent of the currently active page got as additional CSS class, should be "current_page_parent". Then add that class to the CURRENT section of the code

/* For CURRENT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited,
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover,
div.flexipages_widget ul li.current_page_parent a:link,
div.flexipages_widget ul li.current_page_parent a:visited,
div.flexipages_widget ul li.current_page_parent a:active,
div.flexipages_widget ul li.current_page_parent a:hover {
...


If there are several levels, all ancestors of the currently active page should get
current_page_ancestor, add that like current_page_parent to highlight all ancestors of the current page

[Solved] That worked! I used firebug to determine the class of the primary navigation links, it now it works exactly the way I would expect. Thanks! Money is in your account.

Originally Posted by msc3

[Solved] That worked! I used firebug to determine the class of the primary navigation links, it now it works exactly the way I would expect. Thanks! Money is in your account.

msc3, could you post your final code? I could use it.

Thanks!

Michele

This is working well for me:

/* DEFAULT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited {
background: #ffffff !important;
border-left: solid 7px #cccccc !important;
color: #666666 !important;
}
/* For HOVER */
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 0px #000000 !important;
color: #000000 !important;
}
/* For CURRENT */
div.flexipages_widget ul li.current_page_item a:link,
div.flexipages_widget ul li.current_page_item a:visited,
div.flexipages_widget ul li.current_page_item a:active,
div.flexipages_widget ul li.current_page_item a:hover {
background: #ffffff !important;
border-left: solid 0px #ffffff !important;
color: #DF5408 !important;
font-weight:bold;
}

/* Reset children of CURRENT */
div.flexipages_widget ul li.current_page_item ul li a:link,
div.flexipages_widget ul li.current_page_item ul li a:visited {
background: #ffffff !important;

color: #254125 !important;
font-weight:normal;
}