Have you ever wanted to make your menu tabs unique, by adding a special background image? This Tutorial will not only show you how to add images to your menu tabs, it will show you all of the critical CSS classes and attributes that control your Ning Menu Navigation and Menu Tabs.

To add a background image for a menu tab, use the same code as in this Tutorial for "Add Background Color to Main Menu Tabs" - - except, you will replace the background-color with background-image. You need some basic understanding of CSS and uploading images to utilize this Tip.

It will take practice to customize your menu and tabs. There are many different variables involved to do this. This Tutorial will give you a good start, and the groundwork to build upon. Any example code given here will need to be added to your Ning Network CSS, via Manage/Appearance/Advanced CSS.

What kind of images do you need?

Background image to fill entire Width/Height of Navigation Bar.This is the area in the far background of menu bar.

You either need one wide image that is 955 pixels in width, and approximately 26 to 39 pixels in height, depending on the height you want - - or,

You will need a narrow image that will "repeat-x", repeat the image from left to right on the x axis (horizontal), to cover the full width of your navigation area. This image will need to have seamless edges, and should be narrow. The Example uses an image that is: 26 pixels wide by 39 pixels in height. Notice, when using this type image, I use "repeat" to fill entire menu area.

Background image to fill Width/Height of the "active" menu tab. This is the background area for the selected or current tab.

Background image to fill Width/Height of the "hovered" menu tab. This is the background image for a hovered menu tab (mouseover).

Note: For all instructions that discuss an image, you can use a background-color, instead.

What Ning CSS Classes do you edit?

Navigation Bar Background:#xg_navigation ul - Use this class to add one solid image or color to the entire width and height of your navigation bar (navbar). The following code will add a cool jelly blue background to the full width and height of your navigation bar. This image has seamless edges and is narrow (26 pixels wide by 39 pixels in height). I use "repeat" to fill entire menu area.

Edit your parameters to suit your needs. You will need to stop and think about all the parameters, on whether or not you need to edit them. Each case will be unique.

Border Color: I'm adding a blue border around entire navbar. You can change or remove the border.

Margins: You may not need the margin-left or margin-top parameters. I'm adding them so you can adjust the placement of your bar, if needed.

Background Color: In case the image doesn't load for whatever reason, add a similar background color. I use #003366 in this example. It's located above the height line, at end of image background code.

Height: This is your preference - - I suggest not going over 32 pixels in height. I'm using an image a little taller than normal: 39 pixels in height. This gives you the option of using the full height, or a little less.

Active Menu Tab Background:#xg_navigation ul li.this a - Use this class to add one solid image or color to the width and height of the active (selected) menu tab.

Follow the same instructions you did for the navigation bar background.

I am also providing the menu "text color" attribute. In the example I have overridden your built-in theme color, for the menu text. The color I'm using is an indigo blue: color:#003366. This is for active menu tab, only. The !important will override the existing color.

Menu Tab Link Text, and add thin vertical line to the right of each menu tab.- Use this example code to control your overall menu text, and to add a little more professional polish with a thin vertical line to the right of each menu tab.

Follow the same instructions you did for the navigation bar background.

In this example code, I am creating a thin gray vertical line, to the right of each main menu tab. I'm also throwing in parameters like the line height and margins. This will help you control the height and placement of your vertical line.

You're on your own on sub-tabs for now. ;-) This Tutorial took more concentration and time, than any Ning Tutorial I've written to-date. I hope it helps a lot of Ning Network Creators with customizing your Ning Menus. Please let me know if you find any mistakes. I could not upload the last image. You can use the URL in example code for the red jelly image, and copy/save to your hard drive. Or, as long as JenSocial is alive and well, these image URLs should be okay to use. See attached text file for all CSS contained in this Tutorial.

COPYRIGHTS - - These tips are written exclusively for the members and site visitors of JenSocial.com and Creators.ning.com, by Jen of JenSocial.com. These tips are owned and copyrighted by JenSocial, and are NOT available for distribution. PLEASE SHARE THE TIP PAGE LINK.

Please DO NOT COPY OR DISTRIBUTE THIS TIP ON ANY WEBSITE, OTHER MEDIA, PRINT OR ONLINE.

I'm also having the same issue! I was hoping it was a cache issue (as you've mentioned below), but I've cleared the cache and tried it in different browsers and it's not working properly.

I'm talking in reference to www.changeourstory.com. You can see the Nav Bar doesn't have the "Photos" and "Videos" tabs replaced when logged out. However, when I'm logged into an admin, all the tabs are as they should be.

I'm thinking there's an error at bottom of your CSS. The code looks fine in the attached, best my eyes are following it. If I add all the code to bottom of CSS via firebug, like you, it doesn't work. However, if I add to top of CSS, it does work. I tried to find the error, but not seeing it yet. Look for missing ending brackets, or other CSS typos.

2. This is more complicated than it would seem to be. If you change the width much for the entire navbar, a lot of code has to be changed to shift everything to the left. I would make the width 950 instead of 955. That helps a lot.

I noticed a few minor issues is all - - like menu title text being moved up a tiny bit, same with subtabs, and things like a little black rectangle showing below "current" menu selection. But all minor...
;-)

If I want to add the blue jelly nav bar background to my subherder tabs on the right hand side how, would I do it?
by subtabs I mean the tabs on the right hand side that say , members, forum. So I can make it look more styled and professional.