function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
dsh210@lehigh.edudsh210@lehigh.edu 

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,

DH

paul-lmipaul-lmi

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.

 

 

http://community.salesforce.com/t5/Visualforce-Development/apex-panelBar-and-apex-tabPanel-needs-a-style-facelift/td-p/192128

 
SSRS2SSRS2

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

 

 

<apex:page>
  <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>
    </apex:tabpanel>
  </div>
</apex:page>

-Suresh

 

 

 
SSRS2SSRS2

Attached image for above code sample

 

Tab Panel Sample

 

 

 

 

 

 

 

 

 

 

 

 

 

-Suresh
DanielJimenezDanielJimenez
Hm that's a step closer, but not quite all the way.
cto9dxecto9dxe

has anyone found how to use the new salesforce style for the tabPanel?
dsh210@lehigh.edudsh210@lehigh.edu

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.
cto9dxecto9dxe

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?
Devendra@SFDCDevendra@SFDC

 

Hi,

 

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

 

Regards,

Devendra S

 
NickforceNickforce

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>         

 

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

</apex:tab>  

 

</apex:tabPanel>
RajithRajith

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> ?