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]

It looks like the background-image url you are using is not public, this editFile?appUrl... looks like an url from the web editor interface, and that is accessible only to the network owner, so what might have happened is that on FF you were logged in, and so you had access to that url, while in safari you were logged out, and so the response for that url was not an image file, but an error page instead.

The solution is to use an image url that is public accessible :)

[Scott]

hot tabs. can you post the CSS so we can see how you did it? are there specific rounded corner images for each tab? so curious to see the code.... thx :)

[Monica]

Thats a neat trick

[vg]

Curious for the CSS

Thanks,

Vg.

[Suneil Bansi]

I'm having issues with changing my nav tabs when they are on the on-state. I've tried to manipulate the css for the 'this' class, but no luck.

#xg_tab_main li.this{
background-image:url('image_sample')!important;
}

What am I doing wrong?

[Manny Martinez]

Very cool! Could you share?

[CP]

You can also check out my site for custom tabs.

http://crackpixels.ning.com

[daniel]

your site is really great. Hope you can teach me how to make my site look pretty.Thank you

[Ted Slater]

It's a simple CSS thing. Here's what I used:

--------------

.xg_subtab {
background-color: #edeef3;
color: #ffffff;
background-image: url(https://api.ning.com/files/.../tab_unselected.gif);_}__#xg_navigation ul li.this a {_background-color: #edeef3;_background-image: url(https://api.ning.com/files/.../tab_selected.gif);_}__#xg_navigation ul li.this a:hover {_background-color: #edeef3;_background-image: url(https://api.ning.com/files/.../tab_selected.gif);_}__#xg_navigation ul li a:hover {_background-color: #edeef3;_color: #ffffff;_background-image: url(https://api.ning.com/files/.../tab_hover.gif);_}__-------------__Note that the actual URLs for your tabs will be different from this. I simply created a blog post and uploaded images, and then published the blog post, and then unpublished it. Then I found the URLs for the relevant images by right-clicking on an image and viewing its path/URL. The rest is history. :-)__Ted.

[Tricia/JJ]

How would I do this with a tab I created? I tried editing your code to the tab name of my created tab, but it didn't work..... It did work, however when I changed the color name to purple and left the tab name as member. Now I want my created tab to have the purple box.....

[Jenay Marbury]

cool site, and neat designs.

Keebz said:

You can also check out my site for custom tabs.

http://crackpixels.ning.com

[wikki Design]

hi,

can u please let me know how i will give unique look in xg_module_head,

when i am changing the css then its reflecting all the module head,

thanks in advance .

Rakesh

Fabricio Zuardi said:

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;

}