ForceTree.com

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>

force.com sites

Building a Blog Application(Website) using Visualforce and Force.com Sites

5:34 AM

REFERENCES:
The following references have been used in building this site..

In this article i would be explaining how i built my Force.com Site. The steps explained will help you build a similar such site, you can then customize the site as per your needs...

Create a object with the following information.
Object Name: Article

Field Label	Field Name	type
Article Title	Name	Text
Article Description	Article_Description	Text
Author	Author	Text
createdmonth	createdmonth	Formula -MONTH( DATEVALUE(CreatedDate))
Category	Category	Picklist (VisualForce,Apex Class,Apex Triggers,Set-up and Config,Other)

STEP1:
I browsed through the net for free web templates and found hundreds of them... I downloaded one such template from this link.. Click here.

This example uses the CSS file provided here. Click here to download. Upload the downloaded Zip file into Static Resource, name it SFUNEARTHEDCSS and make the cache control "PUBLIC"

STEP2:

Open the "index" HTML file provide along with the CSS and images folder... Open the file using a notepad or wordpad to view the HTML code...

You will have to modify this code ,insert visualorce tags whereever necessary and save them as visualforce pages.. This is how i did it..

STEP3:

Create a Visualforce Component to use as the Site Header. We are using components here to avoid repetition of code... In all pages the header would be the same, hence creating a component would enable reuse of code...

Setup --> Develop --> Components --> New

Create a new component with the name "SFUnearthedHeader" and paste the code below..

<apex:component >
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Salesforce Unearthed</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="{!URLFOR($Resource.SFUNEARTHEDCSS,'style.css')}" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>


<div id="header-wrapper">
<div id="logo">
<h1><a href="http://salesforceexperts.blogspot.com">Salesforce Unearthed</a></h1>
</div>
<hr />
<!-- end #logo -->
<div id="header">
<div id="menu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="/apex/SFUnearthed_Articles">Articles</a></li>
        <li><a href="http://salesforceexperts.blogspot.com">Blog</a></li>
        <li><a href="/apex/SFUnearthed_Resources">Resources</a></li>
        <!--<li><a href="#">Time to Relax</a></li>-->
    </ul>
</div>
<!-- end #menu -->
</div>
<!-- end #header -->
</div>
<!-- end #header-wrapper -->
</apex:component>

I have modified the links and the link names... modify them as per your needs...

STEP 4: Creating Visualforce Pages..

I have a image stored as a Static resource named "createnewarticle"..

Save the above image to your desktop and upload as a static resource with name "createnewarticle" ....

Create a Visualforce page named "SFUnearthed_articles"

VF code is..

<apex:page showheader="false" controller="SFUnearthed" title="Salesforce Unearthed" action="{!pageload}">
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<apex:form >

<div id="page">
<div id="content">

<apex:outputpanel id="articlespace">
 <apex:repeat value="{!articles}" var="article">
 <div class="post">
     <h2 class="title">{!article.Name}</h2>
     <p class="date">{!article.Category__c}</p>
     <p class="meta"><em>Posted by <a href="#">{!article.Author__c}</a> {!article.CreatedDate}</em></p>
     <div class="entry">
         <apex:outputtext escape="false" value="{!article.Article_Description__c}"/>
     </div>
 </div>
 </apex:repeat>
</apex:outputpanel>
</div>
<!-- end #content -->
<div id="sidebar">
     <ul>
         <div style="position:relative;left:40px;">
         <apex:commandlink action="{!createnewarticle}"> <apex:image url="{!$Resource.createnewarticle}"/> </apex:commandlink>
         </div>
         <br/>
         <li>
         <h2>Categories</h2>
         <ul>
             <li><apex:commandlink value="Visualforce" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="visualforce"/></apex:commandlink></li>
             <li><apex:commandlink value="Apex Class" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Class"/></apex:commandlink> </li>
             <li><apex:commandlink value="Apex Triggers" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Apex Triggers"/></apex:commandlink> </li>
             <li><apex:commandlink value="Set-up and Config" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Set-up and Config"/></apex:commandlink> </li>
             <li><apex:commandlink value="Others" action="{!Category}"><apex:actionsupport event="onclick" rerender="articlespace"/><apex:param name="category" value="Other"/></apex:commandlink> </li>
         </ul>
     </li>
 </ul>
</div>
<!-- end #sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</html>
</apex:form>
</apex:page>

Apex Class(controller) code is:

public class SFUnearthed
{
Public List<Article__c> latestarticle =new List<Article__c>();
public void pageload()
{
 // Get the current month
 datetime currentdate=system.now();
 Integer currentmonth = currentdate.month();   
 latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where createdmonth__c=:currentmonth order by createddate limit 100];
}

Public Article__c newarticle;
public List<Article__c> getarticles()
{
 return latestarticle;
}
public void category()
{
 String parameter = System.currentPagereference().getParameters().get('category');
 latestarticle = [select Id,name,CreatedDate,Author__c,Category__c,Article_Description__c from Article__c where category__c=:parameter order by createddate limit 100];
}
public Article__c getarticle()
{
 newarticle = new Article__c();
 return newarticle;
}
public Pagereference SaveArticle()
{
 system.debug('Article description is'+newarticle.Article_Description__c);
 insert newarticle;
 Pagereference articlehome = new Pagereference('/apex/SFUnearthed_Articles');
 return articlehome;
}
Public Pagereference createnewarticle()
{
 Pagereference createarticle= new Pagereference('/apex/SFUnearthed_NewArticle');
 return createarticle;
}      
}

Create a Visualforce page named "SFUnearthed_NewArticle"...

I have a image stored as a Static resource named "SaveArticle"..

Save the above image to your desktop and upload as a static resource with name "SaveArticle" ....
VF code is..

<apex:page controller="SFUnearthed" showheader="false" >

<c:SFUnearthedHeader ></c:SFUnearthedHeader>

<div id="page">


  <apex:form >


    <!--- Copied code from blog edit --->
     <!-- Skin CSS file -->
         <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.0/build/assets/skins/sam/skin.css" ></link>

     <!-- Utility Dependencies -->
         <script src="http://yui.yahooapis.com/2.3.0/build/utilities/utilities.js"></script>

     <!-- Needed for Menus, Buttons and Overlays used in the Toolbar -->
         <script src="http://yui.yahooapis.com/2.3.0/build/container/container-min.js"></script>
         <script src="http://yui.yahooapis.com/2.3.0/build/menu/menu-min.js"></script>
         <script src="http://yui.yahooapis.com/2.3.0/build/button/button-beta-min.js"></script>
     <!-- Source file for Rich Text Editor-->
         <script src="http://yui.yahooapis.com/2.3.0/build/editor/editor-beta-min.js"></script>
         <div style="position:relative;left:100px;">
        <table cellspacing="7">
         <tr><td style="text-align:right;">Title</td> <td><apex:inputtext value="{!article.Name}"/></td>
         <td style="text-align:right;">Your Name</td><td><apex:inputtext value="{!article.Author__c}"/></td>
         <td> Category </td> <td> <apex:inputfield value="{!article.Category__c}"/></td></tr>
        </table>
         </div>
     <div class="yui-skin-sam" style="display:none" id="editor" align="center" >
         <pre>            
             <apex:commandlink style="position:absolute;left:425px;" action="{!SaveArticle}" onClick="beforeTextSave()"> <apex:image url="{!$Resource.SaveArticle}"/> </apex:commandlink>
             <br/>
             <apex:inputtextarea id="msgpost" cols="500" rows="50" value="{!article.Article_Description__c}"/>
         </pre>
     </div>

 <script type="text/javascript" >
     var myEditor;
     window.onload = function init()
     {
      myEditor = new YAHOO.widget.Editor('{!$Component.msgpost}', {
        height: '400px', width: '722px', dompath: true, animate: true });
      myEditor.render();
      document.getElementById('editor').style.display='';
     }
     function beforeTextSave()
     {
      document.getElementById('{!$Component.msgpost}').value = myEditor.getEditorHTML();
     }

 </script>

<!-- End of copied code from blog edit -->


</apex:form>

</div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>

</apex:page>

Create a Visualforce page named "SFUnearthed_resources"

VF code is..

<apex:page showheader="false">
<apex:form >
<c:SFUnearthedHeader ></c:SFUnearthedHeader>
<div id="page">
 <div id="content">
 <div class="post" >
     <h2 class="title">Salesforce.com Resources and Guides</h2>
     <p class="date">All in one place</p>
     <p class="meta"><em>Last updated on 25 Aug 2009</em></p>
     <div class="entry" style="font-size:30px;">
      <p> Here you can find all resources related to Salesforce.com at one place. All resources are not hosted on this site but rather would be links to other sites.</p>
      <p> <strong> Visualforce </strong></p>
      <p> To get started with Visualforce you will have to download the Visualforce developer's guide from <a href="http://wiki.developerforce.com/index.php/Documentation" target="_blank" >here </a>
          .You can find all resources related to Salesforce.com on this page.</p>
          <p> Once you get started with visualforce,you will find it difficult to refer the PDF for syntax verifications. In such cases you can click on the "Component Reference" link on your page editor to view
           a complete list of all tags with the supported attributes </p>
           <p> It is obvious that you will get stuck at places when you develop applications using visualforce. In such cases post your problem
               on the community forums -<a href="http://community.salesforce.com" target="_blank"> Click Here </a>. Experts from around the world
               will help you find solutions. </p>
       
      </p>
     </div>
 </div>
<div style="text-align: center; font-size: 0.75em;">Design downloaded from <a href="http://www.freewebtemplates.com/">free website templates</a>.</div></body>
</div>
<!-- end #content -->
</apex:form>


</apex:page>

STEP5:

Its done!!!!... Now go to your site detail page and set the visualforce page "SFUnearthed_articles" as the site Home Page..

If you are not sure how to create a site then click here.

force.com sites

My Force.com Site

9:15 AM

Using Salesforce CSS styles in your page

Building a Blog Application(Website) using Visualforce and Force.com Sites

My Force.com Site

Pages

Search This Blog

Blog Archive

Subscribe

Like Us on FB