Gradient color for tabs

[fmarwede]

Hello,
another question concerning the predefined skins. I use the ruby skin which has a gradient background color for panel headers. I want exactly the same for tab headers. Any ideas to realize that?

Thanks!

[sergeysmirnov]

What do you mean by tab headers?

[fmarwede]

The part of the tab I can see when the tab is not in focus. I can it control with the "tabClass" attribute of the tab panel tag - my problem is that I don't know how to get the gradient effect with a css class.

I tried to analyze what happens when the panel header is rendered/generated, but I don't really unterstand that. Perhaps from the information of the ruby skin file (headerBackgroundColor=#900000,
headerGradientColor=#DF5858) an adequate image is generated and that is used as background image. But I don't know how to copy that gimmick for the tab.

[sergeysmirnov]

Hmm, The inactive tabs have gradient already (including the one for the Ruby skin). Are you sure you did not see the gradient, but only the headerGradientColor there?

How about the demo at http://livedemo.exadel.com/richfaces-demo/richfaces/tabPanel.jsf?s=ruby

[fmarwede]

Yes, you're right - my specific problem is: I want the tabs looking exactly like the panel headers.

Compare the light-colored gradient of the tabs with the "deep red" gradient of the panel headers at
http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf?s=ruby

Is there any chance to copy that?

[sergeysmirnov]

Ok. Now, I understand what you want.

I suggest, the most easiest way for you is storing the gradient locally in your project and then using rich-tab-inactive to set background gradient for inactive tab there. Like

.rich-tab-inactive {
background-image:url(path_to_your_local_gradient);
}

I think the color: for text should be also re-defined there as soon as dark red required white text on it.

[fmarwede]

Hmm...okay. But that means, I have to create this background image manually with a paint shop program, or did I unterstand something wrong?

When this is the only way then I will do that, but I hoped there will be a way to generate it.

Anyway I thank you for spending time for my problem!

[sergeysmirnov]

Using paint shop program is an extreme way. Most easier, having a FireFox, right click on the panel background and select "View Background Image", then save it with "Save Image As" option to the disk.

Last time I said "the most easiest way for you". It does not mean "the only way", just "easiest". Alternatively, you can create a xcss file with rich-tab-inactive class selector defined, and load it with a4j:loadStyle src="resource:///...........".

[fmarwede]

Ah...

Now I get it! :-)