How to add a little zing to your main menu tabs. Add a different background color, when someone hovers a menu tab. Ning enables us to set this value for sub-tabs, under Manage/Tab Manager.

  • Decide what background color you will use for the active menu option & hovered menu option. This code only uses 1 color for both.
  • Add the following code to your CSS, "Manage/Appearance/Advanced CSS"
  • Change the color:#16BFFF to your chosen color.


#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF;
background-repeat:repeat-x;
}

If you want to override the sub-menu tab settings, add !important - - using code below.

#xg_navigation ul li.this a, #xg_navigation ul li a:hover {
background-color:#16BFFF!important;
background-repeat:repeat-x!important;
}
This code should make the background color:#16BFFF for:
1. Your active Menu Tab
2. Hovered Tabs

Hopefully, it won't interfere with any other CSS your using. You can also use an image for the background. Remind me to add that later.
~Jen~

Views: 2145

Reply to This

Replies to This Discussion

Hi Jen - thanks

 

Actually I also want to change one of my navigation tabs text colors to red but this is not working:

#xg_tab_xn127 {color:white;}

 

But by "subtabs" I mean the drop down menu items, not the various navigation tabs that you listed.

 

Let me try and explain:

For the horizontal navigation tabs I'm using a gradient background color similar to what Apple is using just in different colors.

But for the drop down menu I'm using a semi-transparent white background color and just a totally different styling.

My problem is that the drop down menu items (subtabs) somehow get the same gradient colored background BEHIND the white transparent color, which then means that it's not so transparent suddenly :)

 

Does that make sense?

The problem is that the styling applied to #xg_navigation ul apparently scoops down into my subtabs / drop down menu area. So I was wondering how I can specify "only horizontal tabs" and leave out the subtabs?

You are way too AWESOME. Way to AWESOME Jen.

is there a way to make just the font change color on hover and after being selected? in other words, i have a black background with a light blue font. when i hover over it, i just want the WORD to change to orange, and then when i click it, to stay orange.......can that be done?

Yeah, that can be done. Just change the parameter background-color to color. Change to your colors.

 

/* Regular State */

#xg_navigation ul li a {
color:#003366;
}

 

/* Selected State */

#xg_navigation ul li.this a {
color:#16BFFF!important;
}

 

/* Hovered State */

#xg_navigation ul li a:hover {
color:#FFF000;
}

w00t! thank you Jen!

 

 

LOL, I love Carlton!

RSS

What's Up With Ning 3.0?

Click here to share your thoughts on what features we should develop next! - Survey will close Friday, 4/25

Projects that the Ning 3.0 Team is currently working on: 

Articles - a new way of organizing longer content pieces. Released 4/16.

Activity Feed Updates - options for more content in the activity feed.

Forum Notifications - ability for members to opt into receiving notifications of new discussions in forums. Released 4/9. 

APIs - The ability to create new members and content programatically.

For more information on what's next, visit the Product Roadmap

Latest Activity

Stig Karlsen replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"I will stick with Ning if they get their basic stuff together. I like Ning, but if they can't…"
57 minutes ago
Stig Karlsen replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"Ning; would you please have a look at the mobile solution that Social Engine use? They make it…"
1 hour ago
Stig Karlsen replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"White label would be great."
1 hour ago
Stig Karlsen replied to Stig Karlsen's discussion 'How to force tablets and phones to desktop mode?'
"3.0 network"
1 hour ago
Rowald replied to Stig Karlsen's discussion 'How to force tablets and phones to desktop mode?'
"Do you mean your 2.0 network? "
1 hour ago
Rowald replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"Know any Creator that runs a Social Engine site? I am interested in checking that out."
1 hour ago
Stig Karlsen replied to Stig Karlsen's discussion 'Smartphone & Tablet ready? NOT TRUE!'
"Yes! Social Engine seems to be on top of everything including a smooth system for tablets and…"
4 hours ago
Kos replied to John Bizley's discussion 'How To Add A Link In The Footer Back To The Creators Page Before The Ning Items'
"hmmm didn't work for me.  I'll have to take a look at Firebug in the morning. …"
6 hours ago

© 2014   Created by Ning.

Badges  |  Report an Issue  |  Terms of Service