JenSocial: Social Web Directory and Ning Tips

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

How To Add Borders to Sub-Menus (sub-tabs)

This is a very simple, and sweet little tip. You can add borders (outline) to your sub-menu items, by adding the following CSS to Manage/Appearance/Advanced CSS. See example on Ning Directory for "double" border with 3 px for spacing, and very light in color - - Example #2.

Example #1:
#xg_navigation ul div.xg_subtab ul li a {border:1px dotted #EFEFEF;}

Example #2:

#xg_navigation ul div.xg_subtab ul li a { border:3px double #EFEFEF;}

Change the # hexadecimal color, to the color of your choice.
You can change the attribute for type of border, to: solid, dashed, dotted or double.
If you use the double, you may want to make the border size around 3px.

0 members favorited this

Replies to This Discussion

Permalink Reply by Administrator☼JenSocial on March 23, 2010 at 2:46am

Thanks Jen I'll try them out tonight

Permalink Reply by Hagedisenland on March 23, 2010 at 5:27am

Thank you. I have tried out it just now.

Permalink Reply by yobab on March 23, 2010 at 11:47am

thanks to your immediate response ..

Permalink Reply by Administrator☼JenSocial on March 27, 2010 at 6:34pm

Love it Thanks Heaps Very sharp I try the double

Permalink Reply by JenSocial on March 28, 2010 at 1:11pm

Hi Everyone!
Glad you liked the tip. ;-)
Jen

Permalink Reply by Damen on March 30, 2010 at 2:40am

Great! thanks Jen. :)

Permalink Reply by JenSocial on August 1, 2010 at 11:35am

Cool Damen, and my pleasure.
;-)

Permalink Reply by funflowingmusik on July 26, 2010 at 11:03am

awesome

Permalink Reply by JenSocial on August 1, 2010 at 11:34am

Sounds like you like it, cool.
;-)

Permalink Reply by freelee love on August 1, 2010 at 5:35am

I love it thanks Jen!

Permalink Reply by JenSocial on August 1, 2010 at 11:34am

Glad you like it!
;-)

Permalink Reply by Lex Smith on August 31, 2010 at 3:25pm

I love this tip, I might add that using w3schools, you can add some flair to this,

#xg_navigation ul div.xg_subtab ul li a { border:3px groove #EFEFEF;}

which gives it a 3d picture frame effect.