Make tabs look unique (css)

[joe aliferis]

I have been trying for some time time to edit the appearance of individual Tabs in the main xg_navigation menu, using the 'Advanced' CSS edit part of the Appearance Management screen.

No luck - nothing I try seems to work (for a single tab only)

Can anyone tell me how to do it?

Thanks

joe

[Fabricio Zuardi]

Hi joe,

What exactly are you trying to accomplish? Here is an example of how to make the members tab have a red border:

#xg_tab_members{
    border: thin solid red;

}

[joe aliferis]

thanks for the reply - i worked it out yesterday

joe

[FrenchMaidTV]

Is there a way to use an image in place of text for the tabs using CSS?

[joe aliferis]

so far - my knowledge of editing tab styles only runs to tabs for new pages I have created - but I believe this might be possible with a little html editing too

[Fabricio Zuardi]

you could do that with css using the background-image attribute.

[FrenchMaidTV]

I see where i can Edit the Source Code Running My Network - where do I upload the image so I reference them correctly in the css background-image attribute?

[joe aliferis]

There is no definitive guide written by anyone on how to edit the tab styles, use images etc. We could really do with one.... I have spent hours and hours messing around with them without a lot of success. These items need to be customisable within ning parameters - for network creators to be able to make their sites unique

[joe aliferis]

Question

When you use a background image in a tab - how do you remove the label - leaving only the image ?

Joe

[Fabricio Zuardi]

You can use a negative margin and make the text be out of bounds using a overflow:hidden on the container element, for example:

#xg_tab_members {
    overflow:hidden;

    width:86px;

    background-image:url(http://creativecommons.org/images/support/2006/spread-3.gif);

}



#xg_tab_members a{

    margin-left: -200px;

    background-color: transparent !important;

}

[joe aliferis]

thanks for advice - I have this css in my edit:appearance:advanced text area - works fine in FF - but in Safari (augh!)

#xg_tab_gpnetworks,
#xg_tab_gpnetworks a {
width:124px;
height:23px;
border-top:1px solid #ffffff;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
padding:0px;
font-size:0px;
overflow:hidden;
background-image: url(http://www.ning.com/home/apps/edit/editFile?appUrl=gpnetworks&f...);
background-repeat: no-repeat;
background-position: 0px 0px;
background-color: transparent !important;
}

[Ted Slater]

Check out the tabs I created for http://www.helpgetmarried.com -- all done with CSS....

[Fabricio Zuardi]

that looks great!