Jump to content
Sign in to follow this  
gecko_seo

Secondary and tertiary Site Element Colors do not work

Recommended Posts

gecko_seo

Hi, I am trying to change the secondary and tertiary colors for the navigation boxes in the Design Control Options for Platform Pro, but they do not appear to have any effect. I am working on the base theme for platform pro. Changing the primary colors is no problem, but no matter what I change the secondary and tertiary colors to I just get a light grey on the site when hovering over the navigation boxes. How do I activate these elements? Thanks http://geckoseo.com/wp/

Share this post


Link to post
Share on other sites
catrina

The colors need to be changed using custom CSS. You can add the following CSS to change the light grey hover:

ul#menu-main-menu li#menu-item a:hover {background-color: #YOURCOLORHERE;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nfp1900

Catrina I was having the same issue and located your CSS after a search but it doesn't have any effect when dropped in the custom code box. I want the text hover to be black but not to have the grey rectangle so I changed the #yourcolour to white. Am I missing something? Thx

Share this post


Link to post
Share on other sites
catrina

Please try the following CSS instead:

ul#menu-main-menu div.main-nav li.menu-item a:hover {background-color: #fff;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
nfp1900

weird, it has no effect on the grey hover at all!

Share this post


Link to post
Share on other sites
gecko_seo

Thanks Catrina, What is the point of providing the options in the control panel if they don't work though? Does it mean I have to edit the CSS every time I want to change the colour? This causes a lot of confusion because the button colour option works from the control panel, but none of the secondary and tertiary ones do. Can you also provide the CSS for the other options?

Share this post


Link to post
Share on other sites
Rob

Not sure if this will work, but try... #menu-main-menu div.main-nav li.menu-item a:hover {background-color: #fff;}


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
nfp1900

gecko, could you get the CSS supplied above to remove the grey hover effect? I agree that it should be in the design control section as I spent some time trying to track it down to no avail.

Share this post


Link to post
Share on other sites
gecko_seo

haha, no! I can't even find the correct place to insert the code provided. Can you perhaps point me in the right direction? I am looking in the control panels, both WP and PP, and have also got everything displayed in my FTP client but am at a complete loss. :-?

Share this post


Link to post
Share on other sites
nfp1900

Go to PlatformPro in the wordpress menu - then click on the Custom Code menu. There is a section called CSS Rules. These snippets are just dropped in there and normally they do work. I also tried the last posting but it's still the grey hover - there seems to be no way of eradicating this!!

Share this post


Link to post
Share on other sites
gecko_seo

yes, I tried that too then, and have also tried in Firebug and Chrome Developer tools. Thought I was going bonkers. I'm starting to have doubts about this framework.

Share this post


Link to post
Share on other sites
gecko_seo

I have also tried the various edits in both the platform pro as well as the base themes. No joy.

Share this post


Link to post
Share on other sites
nfp1900

The theme is fine, I have created some interesting sites and it is fairly fast to develop something new if you remain within the general framework. Since I'm not a geek type developer and concentrate on the design side of things these CSS issues are a bit of a drag but get resolved eventually. Still doesn't solve the problem as to why we still have a grey hover though! Anyone out there?

Share this post


Link to post
Share on other sites
Jenny

Finally got this figured out! Now I have to go implement it on my own blog too. :)

ul#menu-main.main-nav a:hover {
	color: #YOURTEXTCOLORHERE;
	background-color:#YOURBACKGROUNDCOLORHERE;
	}

Let me know if this works for you.


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
gecko_seo

Hi guys, thanks for all the helpful suggestions, but none of them are working. I am using WP version 3.2.1.

Share this post


Link to post
Share on other sites
gecko_seo

this is beginning to work, but there are still some unsatisfactory transition effects. Perhaps someone can improve upon it: .main_nav .main-nav li a:hover, .sf-menu li:hover, .sf-menu li.sfHover, .content-pagination a:hover { background-color: #YOURCOLOUR; }

Share this post


Link to post
Share on other sites
Rob

Did you replace #YOURCOLOUR with something you wanted... something like #C00000? Nothing will show with #YOURCOLOUR.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gecko_seo

you need to insert a hex code in there. eg. white is #FFFFFF or #fffff, dark blue is #00008B etc.

Share this post


Link to post
Share on other sites
gecko_seo

yes, using this code works for me. .main_nav .main-nav li a:hover, .sf-menu li:hover, .sf-menu li.sfHover, .content-pagination a:hover { background-color: #YOURCOLOURHERE; } I identified the snippet using Firebug and modified the hex colour code. If you want the hover effect to disappear completely then just change the code to the same as your page background, or if you would like it to be something else then use whatever you fancy. I've found using a little Firefox addon called ColorZilla is very useful for identifying the exact colour of any element on a page making it easy to track down the snippet you need to modify.

Share this post


Link to post
Share on other sites
nfp1900

I got the grey hover box to disappear with this code, thanks!

Share this post


Link to post
Share on other sites
Jenny

Great I'm glad you were able to get it to work. :)


Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
gecko_seo

Thanks Jenny, rangelone and catrina who got me looking in the right direction, and happy I could find the solution for you too nfp. I'm sure I'll be back with more questions at some point! Guy (London UK)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×