iBlogPro4 Subnav link color

[ronaldmeaux 0]

As I understand it the subnav header should be blue and underlined when hovering, then faded gray when selected. Mine are always black (underlined when hovering). Can you help me out? Thanks.

[Jackey 29]

Have you set anything in iBlogPro >> Theme Options >> Text Options >> Text Link Color?

[ronaldmeaux 0]

Yes, but it still doesn't work. When I enter a hover color nothing changes. When I enter a Link color it does change, but not for hovering or selection. My website is http://remedypoint.com. If you select Applications you'll see that each subnav link is dark gray. This doesn't change whether you hover or select.

[ronaldmeaux 0]

Jackey, it's the same on your site as well. You have the dark subnav links and an orange color for hovering. But once selected, it is not obvious which subnav link you're on. Ultimately, I want blue subnav links that get underlined when hovering and turn gray when selected. Any suggestions?

[cmunns 16]

These aren't changing because they have local css properties that take precedence over the global color/text options. You can use firebug to find out which rule controls it. or be more clear on exactly what text color you are trying to change and i can give you the css

[Jackey 29]

I see what you mean. You want the current page to have a distinct nav-color. There is a selector available for the current page `#subnav .current_page_item a`. But I found that the pseudeo element `#subnav li a:visited` takes precedence. So `#subnav .current_page_item a {color: #FF0000";}` works, but only once... Adam, anyway to deactivate the `#subnav li a:visited`?

[Jackey 29]

Duh... Never mind Adam... This should work: ` #subnav .current_page_item a, #subnav .current_page_item a:visited { color: #CCCCCC; } `

[Jackey 29]

Learning as we go along... ` #subnav .current_page_item a, #subnav .current_page_item a:visited , #subnav .current_page_ancestor a, #subnav .current_page_ancestor a:visited { color: #BBBBBB; } ` Will make it work with 2nd level nav as well. However, I prefer it to be the hover color, so all selected menu items will be highlighted.

[ronaldmeaux 0]

I guess I'm not clear why it works differently for Firefox (no color issues) vs. Safari. Please pardon my rookie posts. I'm a business guy vs. HTML coder.

[Jackey 29]

I'm not a HTML coder either, but I see no difference between safari, chrome or firefox, regarding the above. Can you elaborate? Please note that when values are not specifically declared (by the Theme, or in the Custom CSS by you), they will revert to the browsers default value, which can differ from one browser to the other.

[ronaldmeaux 0]

Adam/Jackey, I would ultimately like the subnav links to be the same color blue as the "more" links in features. When hovering I would like them to be underlined (still blue). And when selected I would like them to be light gray so the user knows where they are. What changes do I need to make for that configuration? Thanks for your help. Ron

[cmunns 16]

Ron, Are you still having issues with this in Safari? I'm using Safari for Mac and it acts the same way as it does in Firefox with the light blue hover, etc.

[ronaldmeaux 0]

Yes, I'm still having issues. On all browsers the links highlight blue once when hovering, then never again. Now they go from dark gray to light gray. As I mentioned above, I want these links to be more explicit and to behave like the other blue links in this theme. Can you help me out?

[cmunns 16]

To regain the hover blue you need this css `#subnav li a:hover {color:#0088CC;}`

[justme 0]

fwiw, I have experienced the same kind of wonkiness in the past after experimenting with mods to the style.css file. I suspect a conflict between css rules. I would suggest making sure you have all original css with no mods anywhere (style.css, custom css, etc.) and then work forward again. I wonder if currently there is an issue with 'visited' links among other things. Example: I go to http://remedypoint.com/, click Products. Subnav links are gray and hover on all subnav links is blue. I click Patient Recruitment and then that link is black and hover is also black. I click Patient Retention with same result, but now both those links are black. And so on for each link. Once visited, links are black rather than blue regardless of state, including on hover. Same result in Safari 4.0.5 and Firefox 3.6.3 in OS X 104.11.

[Jackey 29]

Add these to control the "current" and the "current-visited" link: ` #subnav .current_page_item a, #subnav .current_page_item a:visited , #subnav .current_page_ancestor a, #subnav .current_page_ancestor a:visited { color: #BBBBBB; } ` With the appropriate attributes you want and it will work as in this example

[Andrew 207]

thanks for the help jackey

[Andrew 207]

thanks for the help jackey

[Andrew 207]

test

[Andrew 207]

test

[andrew_p 0]

test

[ronaldmeaux 0]

Jackey, Should I put your code in the Editor section? I see two sections with subnav in my editor and I'm trying to figure out what changes need to be made to my links to work like yours. Here's the first: a, #blogtitle a:hover, .postdata a:hover,h2.posttitle a:hover, .tags a:hover, .commentlist cite, .commentlist cite a, #morefoot a:hover, #sidebar ul li ul li a, #wp-calendar caption, #subnav .current_page_item a, #subnav .current_page_ancestor a, #subnav li a:hover, #subnav li.current-cat a, #sidebar #grandchildnav .current_page_item a, #feature-footer .twitter a {color:#0088CC;} Here's the second: /* SUB NAVIGATION (ONLY ON PAGES) */ #subnav { margin-top: 8px; font-size: 12px;} #subnav ul { margin: 0px; padding: 0px 0px 0px 5px; list-style: none; } #subnav li { padding: 2px 7px 4px; margin: 0px; float: left; } #subnav ul li a { color:#555; float:left !important; margin:5px 10px 0px 0px; padding:0; text-decoration:none; } #subnav ul li ul li{display: none;} #subnav li a, #subnav li a:visited, #subnav .page_item { text-decoration: none; color: #222; } #subnav li a:hover { text-decoration: none; } Thanks again for your help. Ron

[Jackey 29]

Please do NOT edit styles.css, alterations will not survive any updates to the theme, and the alterations you make will probably be on multiple (many) selectors at once, according the cascading principles. First of all, set the iBlogPro > Theme Options > Text Options > Text link color and ... Text link hover color according your preference. Ad the code provided in the Custom Code section, it will only affect the "current" and the "current-visited" link of the menus on pages. Those are the ones that did not work as you expected. I have this in my custom code: `#subnav .current_page_item a, #subnav .current_page_ancestor a, #subnav li a:hover, #subnav .current_page_item a:visited, #subnav .current_page_ancestor a:visited, #subnav li.current-cat a, #sidebar #grandchildnav .current_page_item a, #feature-footer .twitter a {color:#DE4321;}` And I have a text link hover color #de4321

[ronaldmeaux 0]

First off, thank you Jackey for the info about styles.css. I have monkeyed with some of the code but I will stop doing that immediately. Also, thanks for your custom code. The subnav links are now working correctly. However, I want the links to be blue, then underlined when hovering, then black when selected. I'm targeting the healthcare industry, which is not the most tech forward audience. It won't dawn on many of them that black words might have a hyperlink. Is this something that goes into custom code as well?

[cmunns 16]

Okay then add `text-decoration:underline;` to the code that Jackey provided