How to get round edges TabPanel by CSS

[v.bannur]

Hi,

Hi,

I havecreated TabPanel with default style classes.

I want toapply custom styles.  Just I wanted toknow how I could achieve round edgestab as shown in below image.

I tried tofind the Richfaces style classes to modify. But I did not find the set of styleclasses.

Can youplease let me know where can I modify the style classes to achieve the round edges Tabs?

[nbelaevski]

Hi Vishwanath,

You can use jQuery plugin: http://stackoverflow.com/questions/521432/best-jquery-rounded-corners-script

[v.bannur]

Hi Nick,

Can you please give me hints how jQuery supports for tabPanel style classes?

Can you please post, if you have any simmiller kind of examples ?

[nbelaevski]

Each RichFaces component comes with a set of predefined rich-* CSS classes. You can use them in CSS expressions passed as input to the plugin.

[v.bannur]

Hi Nick,

Thank for your promt response.

Hmmm... Still I am confused. May I know how the plugins are using for css classes.

Just I need to know where can I get these CSS classes for tabPanel?

[nbelaevski]

Vishwanath,

List of those classes is available in documentation or you can use any DOM inspector to find out names of the classes that you need to get modified.

[v.bannur]

Hi Nick,

Are these style classes?

rich-tabpanel

rich-tabpanel-content

rich-tabpanel-content-position

rich-tabhdr-side-border

rich-tabhdr-side-cell

rich-tab-bottom-line

rich-tabhdr-cell-active

rich-tabhdr-cell-inactive

rich-tabhdr-cell-disabled

[nbelaevski]

Yes, those - there should be more of them I guess.

[v.bannur]

Hi Nick,

I found these classes from the richfaces developers guide: Please let me know if you are refering from any other resource.

rich-tabpanel

rich-tabpanel-content

rich-tabpanel-content-position

rich-tabhdr-side-border

rich-tabhdr-side-cell

rich-tab-bottom-line

Class name

rich-tabhdr-cell-active

rich-tabhdr-cell-inactive

rich-tabhdr-cell-disabled

[ilya_shaikovsky]

most important ones shown in dev guide. If you beleive that some missed (can't find some class you need) - just use firebug to get the actual ones and please inform us about such losses.

[v.bannur]

Hi Ilya,

I found style classes from fire bug as attached in tab.css. And I have modified few clasees by applying round edges background image. But it showing output as an attachement(panelTabCustomStyles.jpeg).Now its taking from the left hand side round edges, but riht hand side is cut off, because of only one back ground image is applied as in attached tab.jpeg.

Till now I am not getting which style class can get the left and right side of the tab for round edges to apply different round edges as BG image.

Please please let me know where can I get the style classes to apply the round edges for left and right side of the tab.

[v.bannur]

Hi Ilya,

Any help please

[lfryc]

Hi Vishwanath, you will need to reset the styles which causes rendering border around tabs, please use Firebug inspector to determine which styles are causing that.

[v.bannur]

Hi Lukas,

I have found following styleclasses used for tabspanel. and i tried it out by resetting the style in firebug. But no luck. Please let me know which style classes used for right and left panel tab.

rich-tabpanel

rich-tabpanel-content

rich-tabpanel-content-position

rich-tabhdr-side-border

rich-tabhdr-side-cell

rich-tab-bottom-line

Class name

rich-tabhdr-cell-active

rich-tabhdr-cell-inactive

rich-tabhdr-cell-disabled

[lfryc]

Hi Vishwanath, I have used following styles to reset border around tabs.

.rich-tabhdr-side-border { background-image: none; }

.rich-tabhdr-side-cell { border-top: none; }

Please let me know if it helps.