Have read thru various approaches but having a problem formatting a VisualForce tabPanel . I'm almost there but can't seem to get rid of the light shaded square border around each tab.
BEFORE adding CSS update:
AFTER adding CSS update
.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}
Here's the VisualForce tag and related CSS. Any suggestions ? I added the SalesForce style as well which looks good but want to have more control over the code.
<apex:stylesheet value="/sCSS/21.0/sprites/1297816277000/Theme3/default/gc/versioning.css" />
<apex:tabPanel switchType="client" selectedTab="name2" id="theTabPanel" headerClass="tabPanel" activeTabClass="activeTab" inactiveTabClass="inactiveTab" >
<!-- LOB Workers Comp -->
<apex:tab label="*Workers Comp" name="tab1" id="tab1" rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'WC'),"true","false")}" >
<apex:tab label="*Pers Auto" name="tab1" id="tab1" rendered="{!IF(CONTAINS(Account_Summary__c.Lines_of_Business__c,'PA'),"true","false")}" >
CSS :
.rich-tabhdr-side-cell {border-top:none;}
.rich-tabhdr-side-border {background-image:none;}
.tabPanel {
border: none !important;
}
.activeTab {
background-color: lightblue;
background-image:none;
font-size: 18px;
border-radius: 50px 20px;
border: none !important;
}
.inactiveTab {
background-color: lightgrey;
background-image:none;
font-size: 12px;
color:blue;
border-radius: 50px 20px;
border: none !important;
}
Best Answer
That should do it.