-
1. How to get round edges TabPanel by CSS
nbelaevski Mar 24, 2011 9:52 AM (in response to v.bannur)Hi Vishwanath,
You can use jQuery plugin: http://stackoverflow.com/questions/521432/best-jquery-rounded-corners-script
-
2. How to get round edges TabPanel by CSS
v.bannur Mar 25, 2011 9:12 AM (in response to nbelaevski)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 ?
-
3. How to get round edges TabPanel by CSS
nbelaevski Mar 25, 2011 3:25 PM (in response to v.bannur)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.
-
4. How to get round edges TabPanel by CSS
v.bannur Mar 29, 2011 10:15 AM (in response to nbelaevski)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?
-
5. How to get round edges TabPanel by CSS
nbelaevski Mar 29, 2011 10:17 AM (in response to v.bannur)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.
-
6. How to get round edges TabPanel by CSS
v.bannur Mar 29, 2011 10:22 AM (in response to nbelaevski)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
-
7. How to get round edges TabPanel by CSS
nbelaevski Mar 29, 2011 11:35 AM (in response to v.bannur)Yes, those - there should be more of them I guess.
-
8. How to get round edges TabPanel by CSS
v.bannur Mar 30, 2011 1:23 AM (in response to nbelaevski)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
-
9. How to get round edges TabPanel by CSS
ilya_shaikovsky Mar 30, 2011 3:52 AM (in response to v.bannur)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.
-
10. Re: How to get round edges TabPanel by CSS
v.bannur Mar 31, 2011 9:37 AM (in response to ilya_shaikovsky)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.
-
tab.jpg 448 bytes
-
panelTabCustomStyles.JPG 81.1 KB
-
paneltab.css 1.0 KB
-
-
11. Re: How to get round edges TabPanel by CSS
v.bannur Apr 7, 2011 6:01 AM (in response to v.bannur)Hi Ilya,
Any help please
-
12. How to get round edges TabPanel by CSS
lfryc Apr 7, 2011 7:55 AM (in response to v.bannur)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.
-
13. Re: How to get round edges TabPanel by CSS
v.bannur Apr 12, 2011 7:44 AM (in response to lfryc)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
-
14. Re: How to get round edges TabPanel by CSS
lfryc Apr 18, 2011 4:30 AM (in response to v.bannur)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.