JenSocial: Social Web Directory and Ning Tips

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

Add Background Color to Main Menu Tabs, On Hover & Active Tab

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 in 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. You can use our color picker in right column, for #hex color codes.
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.

0 members favorited this

Replies to This Discussion

Permalink Reply by Ace Scripters on November 6, 2009 at 4:16am

FFF
FFF

CCC
CCC

999
999

666
666

333
333

000
000

FFC
C00

FF9
900

FF6
600

FF3
300

Welcome TO The Ning Directory
COLOR CODES

99C
C00

CC9
900

FFC
C33

FFC
C66

FF9
966

FF6
633

CC3
300

CC0
033

CCF
F00

CCF
F33

333
300

666
600

999
900

CCC
C00

FFF
F00

CC9
933

CC6
633

330
000

660
000

990
000

CC0
000

FF0
000

FF3
366

FF0
033

99F
F00

CCF
F66

99C
C33

666
633

999
933

CCC
C33

FFF
F33

996
600

993
300

663
333

993
333

CC3
333

FF3
333

CC3
366

FF6
699

FF0
066

66F
F00

99F
F66

66C
C33

669
900

999
966

CCC
C66

FFF
F66

996
633

663
300

996
666

CC6
666

FF6
666

990
033

CC3
399

FF6
6CC

FF0
099

33F
F00

66F
F33

339
900

66C
C00

99F
F33

CCC
C99

FFF
F99

CC9
966

CC6
600

CC9
999

FF9
999

FF3
399

CC0
066

990
066

FF3
3CC

FF0
0CC

00C
C00

33C
C00

336
600

669
933

99C
C66

CCF
F99

FFF
FCC

FFC
C99

FF9
933

FFC
CCC

FF9
9CC

CC6
699

993
366

660
033

CC0
099

330
033

33C
C33

66C
C66

00F
F00

33F
F33

66F
F66

99F
F99

CCF
FCC

CC9
9CC

996
699

993
399

990
099

663
366

660
066

006
600

336
633

009
900

339
933

669
966

99C
C99

FFC
CFF

FF9
9FF

FF6
6FF

FF3
3FF

FF0
0FF

CC6
6CC

CC3
3CC

003
300

00C
C33

006
633

339
966

66C
C99

99F
FCC

CCF
FFF

339
9FF

99C
CFF

CCC
CFF

CC9
9FF

996
6CC

663
399

330
066

990
0CC

CC0
0CC

00F
F33

33F
F66

009
933

00C
C66

33F
F99

99F
FFF

99C
CCC

006
6CC

669
9CC

999
9FF

999
9CC

993
3FF

660
0CC

660
099

CC3
3FF

CC0
0FF

00F
F66

66F
F99

33C
C66

009
966

66F
FFF

66C
CCC

669
999

003
366

336
699

666
6FF

666
6CC

666
699

330
099

993
3CC

CC6
6FF

990
0FF

00F
F99

66F
FCC

33C
C99

33F
FFF

33C
CCC

339
999

336
666

006
699

003
399

333
3FF

333
3CC

333
399

333
366

663
3CC

996
6FF

660
0FF

00F
FCC

33F
FCC

00F
FFF

00C
CCC

009
999

006
666

003
333

339
9CC

336
6CC

000
0FF

000
0CC

000
099

000
066

000
033

663
3FF

330
0FF

00C
C99

009
9CC

33C
CFF

66C
CFF

669
9FF

336
6FF

003
3CC

330
0CC

00C
CFF

009
9FF

006
6FF

003
3FF

Permalink Reply by JenSocial on November 6, 2009 at 11:55am

Cool color chart, thanks!

Scripters said:

Permalink Reply by Rivanh on June 3, 2010 at 2:10am

hello jen, i hope u doin so great with all that knowledge u got.

u think its anyway i can have the same navigation menu like this site ning directory if yes please let me know or have the code thanks !!!

Permalink Reply by JenSocial on June 3, 2010 at 9:14pm

Hi Rivanh,
That's ironic that you asked for this. I actually just added "js" to the nav bar trying to keep the look here. Sorry, but that was customized just for this site. When I change the look, and I will someday, I'll be happy to post the code for public use.
Best Regards,
Jen

Permalink Reply by funflowingmusik on July 16, 2010 at 9:40am

i just wanted to ty for all your info, i am by no means css able lol but you have shown me the light... i love your tips,i ty for such a great site!!!

RSS

Welcome to
JenSocial: Social Web Directory and Ning Tips

Sign In