VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel.

Getting Started:


<apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForce pages. Let us start by creating a simple page with some basic styles.

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

Let’s walk through the code line by line


<apex:page showheader="false" sidebar="false">

When you set showheader=”false” the sidebar is also removed by default, however when you set sidebar=”false” header will still display (obviously J )


The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly.


One step further…..


Let’s modify the code and add a button..

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1> This is my first VisualForce Page! </h1>
<apex:commandButton value="Done"></apex:commandButton>
</apex:form>
</apex:page>

What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so?


It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there.

<apex:page showheader="false" sidebar="false" standardstylesheets=”false”>

This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced…

Now lets add some color and effects…

<apex:page showheader="false" sidebar="false">
<apex:form>
<h1 style="text-align:center;color:blue;">
This is my first VisualForce Page! </h1>
</apex:form>
</apex:page>

This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag.


When not to use INLINE STYLING????


Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.


To overcome this, we use <style> tag. We will modify our previous example using <style> tag.

<apex:page showheader="false" sidebar="false">
<style>
h1
{
text-align:center;
color:blue;
}
</style>
<apex:form>
<marquee> <h1>
This is my first VisualForce Page! </h1>
</marquee>
<h1> This text is displayed without INLINE styles </h1>   
</apex:form>
</apex:page>

USING STYLECLASS


How about a more complicated page with styleclass, adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page

<apex:page showheader="false" sidebar="false">
<apex:page showheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false">
<style>
.red
{
background-color:red;
}
.green
{
background-color:green;
}
.blue
{
background-color:blue;
}
</style> 
<apex:form >
<h1 style="text-align:center;color:blue;">  This is my first VisualForce Page! </h1>
<apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue">
<apex:column headervalue="Contact FirstName"> <apex:outputfield value="{!con.FirstName}"/> </apex:column>
<apex:column headervalue="Contact LastName"> <apex:outputfield value="{!con.LastName}"/> </apex:column>
<apex:column headervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/> </apex:column>
</apex:datatable>    
</apex:form>
</apex:page>

Here when you say columnclasses="red,green,blue" in <apex:datatable> itag it means that the styleclass "red" would be applied for the first column, "green" would be applied for the second column and "blue" would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.


That’s it for you to get started..


The next step is using CSS in your visualforce pages. Here it is!! Click here!!