+ Start a Discussion

TabPanel style

Hey All,


I am wondering if it is possible to apply the new Salesforce tab style to an <apex:tabPanel> object.


Tab Style


I understand that I can apply custom css, but I was hoping that I could get access to the Salesforce styles.


Thanks for any help,



i could have sworn i saw a comment somewhere that said this is coming in winter '11, but I may be mistaken.


http://sites.force.com/ideaexchange/ideaView?id=087300000007p6GAAQ either way.


you can use the SF CSS, but you'll probably have to dissect the classes to find the applicable ones you want.






You can simply do it with 'div' tag and custom styles.The 'div' id should be 'motifCurve'  and can change style 'top'  as you need.

See following sample



  <div id="motifCurve" style="top:30px;">
    <apex:tabpanel style="top:-20px;position:relative">
      <apex:tab label="Test0011"></apex:tab>
      <apex:tab label="Test0012"></apex:tab>






Attached image for above code sample


Tab Panel Sample















Hm that's a step closer, but not quite all the way.

has anyone found how to use the new salesforce style for the tabPanel?


Sort of... if you open the Component Reference you will see that a tab has an "activeClass" and an "inactiveClass". You can write your own CSS here to style the tabs as you choose. The only thing is that it is not SFDC dependent and if they change up styles, you will need to rewrite.


right.. but have you figured out how to expose the new standard style for the tabs as opposed to the old one that is by default for whatever reason?





What css code have you applied in <apex:tabpanel> so that it will look exactly like salesforce tab?



Devendra S



Add these two stylesheet tags to your page


<apex:stylesheet value="/sCSS/21.0/sprites/1297816277000/Theme3/default/gc/versioning.css" />   

<apex:stylesheet value="/sCSS/21.0/sprites/1297816277000/Theme3/default/gc/extended.css" />



Then here is the tabpanel


<apex:tabPanel id="theTabPanel" switchType="ajax" selectedTab="tTab1" value="{!tab}"  styleClass="theTabPanel" tabClass="theTabPanel" contentClass="tabContent"activeTabClass="activeTab" inactiveTabClass="inactiveTab">    


<apex:tab label="Tab1" name="tProductPicklists" id="tTab1" status="sLoading">



<apex:tab label="Tab2" name="tQuickPricing" id="tTab2" status="sLoading">      





This Actually worked. But the only issue is when ever A tab is selected there is not color assigned to the tab it is just plain white. I have tab style as account but the selected tab is never highlighted in blue. But it works. Thanks alot.

SFDC coderSFDC coder
hi Nickforce,

this actually worked but can u tell me how did you form  the value attribute for <apex:stylesheet> ?