11 replies to this topic

[jaysondemersgmailcom]

Hey guys, I have been toying with the CSS for the past hour and can't figure out how the hell to change the color of the top nav on hover. Can someone please clue me in to which variable in the CSS controls the hover color? Thanks, -Jayson

[bryan-hadaway]

Please provide a link to your site and I'll have a look. Thanks, Bryan

[jaysondemersgmailcom]

www.audiencebloom.com

[bryan-hadaway]

Okay, it appears that you've modified it already, can you please post the CSS you're using to attempt to change the menu and are you posting the code in Custom CSS?

Thanks, Bryan

[jaysondemersgmailcom]

I've tried changing various variables within the following CSS code. And I have not tried anything within the Custom CSS code. /* MAIN NAVIGATION */ #nav { font-size: 13px; background: transparent url(images/nav-bg.png) no-repeat 0px -1px; height: 38px; margin-bottom: 16px; } #nav ul{ list-style: none; display: block; margin: 0; padding: 0px; width: 750px; float: left; } #nav ul li{ font-weight: bold; margin:0; padding: 0px; float: left; background: url(images/navdivider.png) no-repeat right top; } #wrapper #nav ul.dropdown li a.home, #wrapper #nav ul.dropdown li a.home:hover{ background-color: transparent; background-position: 21px 5px; background-repeat: no-repeat; text-indent: -300em; width: 25px; border-left: none; position:relative; z-index: 10; padding: 9px 22px 9px 20px; } #nav ul.dropdown li a.home:hover, #nav ul li a.home:active{ cursor: pointer; margin:0; border:none; } #nav ul li a{ padding: 9px 22px 9px 20px; text-decoration: none; text-shadow: #ddd 0px 1px 0px; color: #000; display: block; } #nav ul li a small{display: none;} #nav .current_page_item a, #nav .current_page_item a:hover, #nav li a:hover, #nav li a:active, #nav .current_page_ancestor a, #nav .current_page_ancestor a:hover{ margin-left: -1px;margin-right: 1px;text-shadow: #000 0 -1px 0px; padding: 9px 21px 9px 21px; } #nav .current_page_item a, #nav .current_page_item a:hover, #nav .current_page_ancestor a, #nav .current_page_ancestor a:hover{ text-decoration: none; background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -72px; color: #fff; } #nav li a:hover{ color: #fff; background: #b1b1b1 url(images/nav-sprite-default.png) repeat-x 0 0px; } #nav li a:active{ color: #fff; background: #2a2a2a url(images/nav-sprite-default.png) repeat-x 0 -36px; }

[bryan-hadaway]

Okay, that's a problem. We'll need to restore the CSS you altered and then start over from scratch in Custom CSS so that we have complete control, also you don't want to hard edit files like that because it makes it very difficult to upgrade in the future.

What exact version of iBlogPro are you using and I'll get the replacement code. You can find this info from Appearance > Themes.

Thanks, Bryan

[jaysondemersgmailcom]

I'm using 4.0.6. I tried to install 4.1.5 a week or so ago but it broke my site so I had to revert to 4.0.6. If we do a CSS replacement, will I lose my custom color scheme? All the CSS work was done by a designer I hired. I'm not great with CSS.

[bryan-hadaway]

Oh no, this is trickier than I thought. If your designer will accommodate, all the CSS should be done in:

Theme Options > Custom Code > Custom CSS

and at least for now on. Upgrading wouldn't work, because anything your designer did will be overwritten by the new theme and set back to default. This is getting a bit messy now.

If your designer is still around, I would recommend consulting with them first to make sure all this work you've paid for is done properly. If they're MIA please describe to me exactly what you want your menu to do on hover/rollover and we'll have to just go from how things are.

Thanks, Bryan

[jaysondemersgmailcom]

Dang. It was a contract job so I'm probably looking at spending more money. For now I'm not so concerned with having the ability to upgrade the theme unless there are some must-have features in later releases. So if we can band-aid fix this with the current setup that'd be great. Currently there is a barely noticeable effect when hovering the mouse over the top nav. Whatever it is doesn't look good. Take a look at this page: http://www.audienceb...com/contact-us/ The drag-and-drop sidebar on the right has a hover effect where it says "Connect with us." That same effect would be just fine along the top nav. Is that easily implementable?

[bryan-hadaway]

Try adding this to your Custom CSS:

`#nav li a:hover{background:#000}`

Thanks, Bryan

[jaysondemersgmailcom]

Perfect. Problem solved, many thanks Bryan.

[bryan-hadaway]

Yay! I love it when things just work. Thanks, Bryan