How can I use images as tabs?

[Alan Mulrooney]

Seen a few ning sites that have replaced their text based tabs to images and rollovers. Can anyone advise on how to do this? I have a "I can hack code" skill level and a developer who is pretty good with this stuff.

Many thanks.

[Erick]

you just copy the HTML code you want, Then go to Tab Manager you Should see Use existing URL put a link were you would like for that tab to link to, and Paste the HTML Code you copied..

[Alan Mulrooney]

Thanks for the reply but I've managed a hack using another thread I found. This is how I did it.

In the Manage>Appearance>Advanced screen, pasted this into the CSS box.

#xg_tab_main,
#xg_tab_main a {
width:86px;
height:48px;
padding:0px;
font-size:0px;
overflow:hidden;
background-image: url(http://www.mydomain.co.uk/main.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent !important;
}

Works a treat.

[Erick]

You should have made a link were you want to tab to link to then post the HTLM code..unless www.mydomain.co.uk/main.gif is were you wan it to link too.

[Jerry White]

I tried this and it seemed to work. I could see the image as long as I was in the manage mode but when I clicked on 'Main' the image AND the link disappeared. The link was still t there but it was invisible. What am I doing wrong? I used the hack exactly as with the exception of the URL.

[Alan Mulrooney]

It sounds like you may have a 'a:hover' variable there but without an image attached to it? Just a thought.

[Deighv]

Try this, I use this on My Page if you want a demo, just add the full ImageUrl if you'd prefer a textured background instead of a solid color :)

#xg_navigation ul li a:link {margin-top:0px;margin-bottom:4px;background-color:#CCCCCC;background-image:url(ImageUrl);text-align:center;font-size:8pt;color:#000000;font-family:arial;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #FFFFFF;}

#xg_navigation ul li a:visited {margin-top:0px;margin-bottom:4px;background-color:#CCCCCC;background-image:url(ImageUrl);text-align:center;font-size:8pt;color:#000000;font-family:arial;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #FFFFFF;}

#xg_navigation ul li a:hover {margin-top:0px;margin-bottom:4px;background-color:#CCCCCC;background-image:url(ImageUrl);text-align:center;font-size:8pt;color:#000000;font-family:arial;font-weight:bold;text-decoration:none;padding: 0px 7px 0px 9px;border:inset 2px #FFFFFF;}

#xg_navigation ul li a:action {margin-top:0px;margin-bottom:4px;background-color:#CCCCCC;background-image:url(ImageUrl);text-align:center;font-size:8pt;color:#000000;font-family:arial;font-weight:bold;text-decoration:none;padding: 0px 8px 0px 8px;border:outset 2px #FFFFFF;}

[Santiago Freeman]

Can someone post some links to examples of Ning Sites that use images / rollovers as top navigation?

Deignhv - would like to see your code in action. Do you have a link?

[Deighv]

My page here on DN uses a variation of the above code, I didn't add a bg image to the buttons but it shows an example of the CSS rollover effect. I have been using this trick for about 6 years, I'm surprised it's not more widely know :)
http://developer.ning.com/xn/detail/u_fu1x7mh3jobv

[Joshua Merrill]

I manage www.irenekendig.com, which uses images for tabs. Here's the code. Repeat it for each tab BUT replace "main" with the name of each tab.

/* This sets properties for the MAIN tab for use with an image */
#xg_tab_main,
#xg_tab_main a {
width:120px;
height:40px;
padding:0px;
font-size:0px;
overflow:hidden;
background-image: url(http://IMAGEURL);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent !important;
}
/* This sets properties for the MAIN tab for use with an image WHEN HOVERING */
#xg_tab_main a:hover{
background: url(http://IMAGEURL-HOVER) center 0px repeat-x;
overflow:hidden;
padding:0px;
width:120px;
height:40px;
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent !important;
}

[Abraham]

Josh,

This works great with the default tabs, but I'm having trouble getting it to work with any new tabs that I add.

The default tabs seem to respond to the name of the page they point to (the tab entitled "Photos," for instance, responds to "photo," which is the page name).

However, when I add a new tab (see "Music" on my work in progress, father-abraham.ning.com), neither the tab name _nor_ the page name given by ning seems to work.

Any ideas?

Thanks in advance

[vaqz]

same problem here..what would be the source code for the music? and rss?

[Jake // HookahDomain.com]

Check your page source... search for the tab name, and you should see the tab_xx location.