Hi,
How can i customize tab panel to render rounded tabs i e tabs with top left and top right corners rounded.
We tried by customising the css class available for tabPanel component,but we are not able to acieve the desired result.
Trial 1
Desired Output :
Tabs with rounded corners
Logic:
Divided the image into 3 halves - left,middle,right.
left,and right images have rounded corners.
have used rich-tabhdr-side-border with left image as back-ground,but problem is ,we cannot specify left side border and right side border.
Css Used :
.rich-tab-active {
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #ffffff;
background-image: url('/bw-webapp-3.1.0/images/tabs/TabMid_Selected.gif');
}
.rich-tab-inactive {
font-family: Arial;
font-size: 11px;
font-weight: bold;
color: #896b42;
border: 1px Solid e7dfd3;
background-color: #fffffb;
background-image: url('/bw-webapp-3.1.0/images/tabs/TabMid.gif');
}
.rich-tabhdr-side-cell{
border: 0px;
border-top-width: 0px;
}
.rich-tabhdr-side-border {
background-image: url('/bw-webapp-3.1.0/images/tabs/TabLeft_Selected.gif');
width:12px;
}
Actual Output :
left image gets rendered on both the sides of the tab...ineffect doesnt render the required tab with rounded corners.
Trial2
One of the topics on the forum suggested to use a background image,hence tried the same.
http://www.jboss.org/index.html?module=bb&op=viewtopic&t=121472
Logic
Use a rounded background image
Actual Output
If the text for the Tab header is big then the image gets repeated which makes it look ugly,if i use background-repeat:no-repeat ..image is not repeated but ,the text expands beyond the image..
if CSS is not the way to achieve this,please let us know how we can acheive this .
