Using Salesforce CSS styles in your page

4:33 AM

Having something look standard and uniform really matters.. You would like to present the user with the Standard look and feel wherever possible..

Situations in which this may not be possible are
  • Email Templates
  • Web-to-Lead
  • Etc etc
As you may be knowing, Salesforce uses a bunch of CSS files to present users with the standard salesforce look and feel..

Click here to read the Salesforce documentation. The following three files are the most commonly used.

Note that i have specified "na5.salesforce.com" in the URL, this is to be used when your page would be displayed outside of Salesforce otherwise you may omit this part. This may be any instance, not specifically na5... This file is public so anyone can access it. you do not need a Salesforce username and password to access it..

      <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/elements.css" rel="stylesheet" type="text/css" />
    <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/common.css" rel="stylesheet" type="text/css" />
    <link  href="https://na5.salesforce.com/sCSS/16.0/sprites/1251310209000/Theme2/dStandard.css" rel="stylesheet" type="text/css" />


Scenario:

I have a table to display in my Visualforce email template. I am using a HTML table. Since the apex:detail tag is not available with Visualforce email templates, i will display the information in a HTML table and apply salesforce look and feel o make it appear as a standard Detail Page...


Plain HTML Table:

          <table  style="font-size:100%" border="0" cellpadding="5" border="0" cellspacing="0">       
           <tr>
                <td>Opportunity Name:</td><td >{!Relatedto.Name}</td>
                <td>Stage:</td><td ><apex:outputfield value="{!Relatedto.StageName}"/></td>
           </tr>

           <tr>
                <td><apex:outputlabel value="Account:"/></td><td ><apex:outputfield value="{!Relatedto.Account.Name}"/></td>
                <td><apex:outputlabel value="Close Date:"/></td><td ><apex:outputfield value="{!Relatedto.CloseDate}"/></td>
           </tr>       
           <tr>
               <td><apex:outputlabel value="Amount:"/></td><td><apex:outputField value="{!Relatedto.Amount}"/></td>
               <td><apex:outputlabel value="Primary Campaign:"/></td><td ><apex:outputfield value="{!Relatedto.Campaign.Name}"/></td>    
           </tr>
      </table>


Preview:



HTML Table with Salesforce look and feel:

 <head>
      <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/elements.css" rel="stylesheet" type="text/css" />
      <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/common.css" rel="stylesheet" type="text/css" />
      <link  href="https://na5.salesforce.com/sCSS/16.0/sprites/1251310209000/Theme2/dStandard.css" rel="stylesheet" type="text/css" />
 </head>
 <body class="opportunityTab  detailPage">
 <div class="bPageBlock secondaryPalette">
     <div class="pbBody">
        <div class="pbSubsection">
            <table  >      
           <tr>
                <td class="labelCol">Opportunity Name:</td><td >{!Relatedto.Name}</td>
                <td class="labelCol">Stage:</td><td ><apex:outputfield value="{!Relatedto.StageName}"/></td>
           </tr>
           <tr>
                <td class="labelCol"><apex:outputlabel value="Account:"/></td><td ><apex:outputfield value="{!Relatedto.Account.Name}"/></td>
                <td class="labelCol"><apex:outputlabel value="Close Date:"/></td><td ><apex:outputfield value="{!Relatedto.CloseDate}"/></td>
           </tr>      
           <tr>
               <td class="labelCol"><apex:outputlabel value="Amount:"/></td><td><apex:outputField value="{!Relatedto.Amount}"/></td>
               <td class="labelCol"><apex:outputlabel value="Primary Campaign:"/></td><td ><apex:outputfield value="{!Relatedto.Campaign.Name}"/></td>   
           </tr>
          </table>
        </div>
   </div>
</div>
</body>

Preview:



Code Explanation:

The blue colored part in the code above is the modifications that we have done to our plain HTML table. Now ,let's analyze the code in detail... The Head tag as you know contain links to salesforce style sheets...

<body class="opportunityTab  detailPage">


This sets the color of the Page layout to Opportunity since we have specified Opportunitytab in the styleclass.. If you set it o Accounttab the style of Account will be applied....

<div class="bPageBlock secondaryPalette">

This div denotes the pageblock this is the main outer div....

<div class="pbBody">

This div denotes the pageblocksection.
<div class="pbSubsection">

This div denotes the data to be displayed inside the pabeblocksection.

Inside the HTML table we have td class="labelCol", this is used only for headings to make sure that it is bold and is right aligned..


Complete code of Visualforce Email Template:

 <messaging:emailTemplate subject="Testing Email Template with Salesforce look" recipientType="Contact" relatedToType="Opportunity">
<messaging:htmlEmailBody >
<head>
    <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/elements.css" rel="stylesheet" type="text/css" />
    <link class="user" href="https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/common.css" rel="stylesheet" type="text/css" />
    <link  href="https://na5.salesforce.com/sCSS/16.0/sprites/1251310209000/Theme2/dStandard.css" rel="stylesheet" type="text/css" />
</head>
<body class="opportunityTab  detailPage">
<div class="bPageBlock secondaryPalette">
   <div class="pbBody">
      <div class="pbSubsection">
            <table  style="font-size:100%" border="0" cellpadding="5" border="0" cellspacing="0">       
           <tr>
                <td class="labelCol">Opportunity Name:</td><td >{!Relatedto.Name}</td>
                <td class="labelCol">Stage:</td><td ><apex:outputfield value="{!Relatedto.StageName}"/></td>
           </tr>
           <tr>
                <td class="labelCol"><apex:outputlabel value="Account:"/></td><td ><apex:outputfield value="{!Relatedto.Account.Name}"/></td>
                <td class="labelCol"><apex:outputlabel value="Close Date:"/></td><td ><apex:outputfield value="{!Relatedto.CloseDate}"/></td>
           </tr>       
           <tr>
               <td class="labelCol"><apex:outputlabel value="Amount:"/></td><td><apex:outputField value="{!Relatedto.Amount}"/></td>
               <td class="labelCol"><apex:outputlabel value="Primary Campaign:"/></td><td ><apex:outputfield value="{!Relatedto.Campaign.Name}"/></td>    
           </tr>
          </table>
        </div>
   </div>
</div>
</body>
</messaging:htmlEmailBody>
</messaging:emailTemplate>

Share This Story

Tags: , ,

1 comments

  1. NikhilApril 25, 2014 at 5:15 AM

    when u hard code https://na5.salesforce.com/sCSS/16.0/sprites/1245343872000/Theme2/default/common.css this link
    In every salesfofrce version upgrade last version cannot be used..i.e here it is 16th version now. once salesforce version upgrade automatically the earlier style link is not valid.It is not contolled by page or class version.

    ReplyDelete