JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

Changing Tab Colour for Hovering - weird issue!!

Hey Jen,

I asked the following question on ning creators forum but didn't get any helpful answers....maybe you would be able to assist.

Thanks a lot.... you're the best :-)

My original message -

Can someone please let me know the css code to change the tab colour when hovering in the navigation menu? When I hover normally over the tabs in the navigation bar - there is no issue. However when I hover over a sub-tab menu, the parent tab defaults to another colour.

I'm going to illustrate this using screenshots as its kinda difficult explaining this..

Screenshot1 is the one that is working fine. I hovered over the 'Toddlers' tab and the colour and everything is ok.

Screenshot 2 shows the issue. When I hovered to a link in the sub-tab menu, the colour of my parent tab (Toddlers) changed to another colour which I think is the default colour for this theme.

Thanks a ton for your help.... Arjun

0 members favorited this

▶ Reply to This

Replies to This Discussion

Permalink Reply by JenSocial on May 26, 2011 at 2:08pm

Arjun,

Probably no one is able to help, because this is a very custom question, just for your code. I looked and could not quickly see where the main menu tab is being changed to new color, when subtab is hovered. It is this color: 0089B3

You can probably look through your CSS find all occurrences of this color, and find the one associated with main menu color and remove the color change on hover.

Best,

Jen

▶ Reply

Permalink Reply by Arjun Chahal on May 26, 2011 at 4:35pm

Thanks Jen. I've already gone over my css several times but couldn't find an issue....I'll go over it again. Thing is this was working perfectly fine before.....and I haven't made any changes to my css since.

▶ Reply

Permalink Reply by JenSocial on May 27, 2011 at 1:42am

I actually like the effect - - call me crazy. LOL. I was suggesting that you look for that color, and the code for sub_tab hover.

Here's the line of code:

.xg_theme #xg_navigation li.this,.xg_theme #xg_navigation li:hover{border-top: 0px solid #0089B3;background: url(http://about.ning.com/studio/images/button_right.png?v=201105262100) repeat-x scroll center -1px #0089B3;}

Problem is, you remove that color like this:

It still changes colors to the subtab hovered color. It would take a few tweaks. I was shocked to see they used images from about.ning.com. If those images are ever deleted, you lose your menu tab backgrounds. I think I would go to this link:

http://about.ning.com/studio/images/button_right.png

Save to your computer.

Upload via File Manager or a Blog.

Replace the URL above with the new link.

UPDATE: appears that the button has already been deleted. And that's the problem. Gotta tell you, these Guys design nicely, but not very professional practices.

Best,

Jen

▶ Reply

Permalink Reply by Arjun Chahal on May 27, 2011 at 12:59pm

Thanks Jen...will give this a shot once I get back home...still at work hehe.

I agree regarding the images being used from ning....in fact I'm having similar issues with my images in the 'Get Started' module. Now I do have my own space to upload images and other content (the slider is now being hosted on my own site and not creatorsspace).

Anyways, which image are you referring to above? When I click on the link

http://about.ning.com/studio/images/button_right.png I just get redirected to the Ning Design Studio website.

I think what I'm going to do is.....search the entire website for images uploaded on ning and then save them on my desktop and upload on my own site. Can't be dependent on anything else.

Thanks sooooooooo much Jen.... you're the bestest!!! :-)

▶ Reply

Permalink Reply by JenSocial on May 27, 2011 at 1:34pm

Glad it helped shed some light. I think the reason your menu has changed, is because that image is missing. Does that make sense?

Good luck, and I agree. Get rid of those hot links to ning, completely unacceptable in the world of web design. ;-) And I know you didn't realize this was the case.

Happy Memorial Day,

Jen