4

How to increase the fontsize of the tab and its content.Currently it is smaller than regular.

Update :How to make tabs curved?

<apex:page standardController="Account" showHeader="true">
<!-- Define Tab panel .css styles -->
<style>
.activeTab {background-color: #236FBD; color:white; background-image:none}
.inactiveTab { background-color: lightgrey; color:black; background-image:none}
</style>
 <script type="text/javascript">
     jQuery.noConflict();
</script>       
<!-- Create Tab panel -->
<apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
    tabClass='activeTab' inactiveTabClass='inactiveTab'>
    <apex:tab label="One" name="name1" id="tabOne">content for tab one</apex:tab>
    <apex:tab label="Two" name="name2" id="tabTwo">content for tab two</apex:tab>
</apex:tabPanel>

3

This should increase the font size:font-size:250%;

Refer: http://www.w3schools.com/cssref/pr_font_font-size.asp

Usage:

.activeTab {background-color: #236FBD; color:white; background-image:none;**font-size:250%;**}

For content size use contentstyle in the

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_tabPanel.htm

contentStyle="font-size: 32px;"

<apex:tabPanel switchType="client" selectedTab="name2" id="AccountTabPanel"
    tabClass='activeTab' inactiveTabClass='inactiveTab' contentStyle="font-size: 32px;">

you should be seeing something like this:

enter image description here

UPDATE: ROUNDED CORNERS ( Is this what you are looking for?)

code : I assume Salesforce uses curvy corners (jquery plugin) for tabpanel after reading through this link I was able to get an idea on rounding the corners.

border-radius:20px; rounds the border. The challenge was it had a image background that was drawing an extra line next to the border. To get rid of the extra lines and give it a smooth finish you need to adjust some properties mentioned in the below link https://community.jboss.org/thread/164445?tstart=0

.activeTab {background-color: lightgrey; color:black; background-image:none;font-size:160%;border-radius:20px;}
.inactiveTab {background-color: lightgrey; color:black; background-image:none;font-size:160%;border-radius:20px;}
.rich-tabhdr-side-border { background-image: none; }
.rich-tabhdr-side-cell { border-top: none; }

enter image description here

  • but the content in it is smaller..How to increase the content size – sfdc Jan 31 '14 at 21:05
  • How to make tabs as curved ? – sfdc Feb 4 '14 at 19:22
  • @sf.dev Can you post this as a different question . I am poor with CSS but I did figure out a solution. It would help many who might be looking for answer on how to round the tab panel. I will post my answer in your new question merely to make it useful to others looking for it. – Rao Feb 5 '14 at 1:07
  • Rao, just a minor note. Please consider not linking to w3schools ;) w3fools.com & meta.stackexchange.com/questions/120621/w3fools-alternatives - bit harsh, I used it a lot myself in the past... but worth pointing out that sometimes the poor quality code you'll learn to write outweighs the easy to understand examples they provide. – eyescream Feb 5 '14 at 10:26
  • @eyescream valid point. I always felt w3's online try it feature was such an eye candy so include the link so that the user can understand better. – Rao Feb 5 '14 at 16:38
3

try for the content:

<style>
.rich-tabpanel-content {font-size:200%}
</style>

And add font-size on the .activeTab class

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.