This document guides you through your first days of styling your Visualforce Pages with a custom look and feel.

1. Forcetree.com Visualforce CSS User Guide – Tips for CSS implementation in Visualforce Pages

2. 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 using custom styles. Do visit http://www.forcetree.com (my personal blog) for more examples and articles. Abstract

3. <apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForcepages. Let us start by creating a simple page with some basic styles. <apex:pageshowheader="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:pageshowheader="false" sidebar="false">When you set showheader=“false” the sidebar is also removed by default, however when you set sidebar=“false” the header will still display (obviously ) 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. Getting Started

4. One step further….. Let’s modify the code and add a button.. <apex:pageshowheader="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. Getting Started (cont..)

5. <apex:pageshowheader="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:pageshowheader="false" sidebar="false"> <apex:form> <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1> </apex:form> </apex:page> Output: This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag STYLING….

6. 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.Toovercome this, we use <style> tag. We will modify our previous example using <style> tag. <apex:pageshowheader="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> OUTPUT: STYLING….

7. USING STYLE CLASS…. 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:pageshowheader="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:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column> </apex:datatable> </apex:form> </apex:page> OUTPUT:

8. USING STYLE CLASS…. cont In the above code sample when you say columnclasses="red,green,blue" in <apex:datatable> tag it means that the styleclass "red" would be applied for the first column, "green" would be applied forthe 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.

9. CSS with Visualforce CSS – stands for Cascading Style Sheets. It is a file which ends with the extension “.css” (Ex: mystyles.css) Why use CSS? Readability : Using a CSS makes your code more readable. It separates your style definitions from your Visualforce page. Reusability : You can use your CSS file across multiple visualforce pages, and whenever you need modifications to your styles changing the CSS file would change all your underlying Visualforce pages. Let us modify the previous example using STYLECLASS and achieve the same using CSS. Creating a CSS file: Step 1: Open Notepad, or any text editor. cont ….

10. CSS with Visualforce (cont …..) Step 2: Paste the following code .red { background-color:red;} .green { background-color:green;} .blue { background-color:blue;} Save this file as, “mystyle.css” Step3: Upload this file into Static Resources, name the resource as “mystyle”.

11. CSS with Visualforce (cont …..) Step 2: Create a visualforce page with the following code <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.mystyle)}"/> <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:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column> </apex:datatable> </apex:form> </apex:page> The line in GREEN denotes the place where we actually reference our CSS file in our Visualforce Page

12. CSS FOLDER with Visualforce CSS Folder: When you download/buy CSS from an external vendor like http://www.freecsstemplates.org/, the CSS usually comes as a bunch of files and folders as shown below. This is because your CSS uses IMAGES, and some other files, all of which are placed into the respective folders. For your CSS to work properly, you would need these folders. In such a case, create a ZIP file of all the files shown above. For Example, Just place all the files shown above into a folder called “stylefiles”. Make a ZIP file of this, and call it “stylefiles.zip”. Now, upload this ZIP file into Static Resources with the name “stylezip”. Now, we will need to reference this CSS into our Visualforce Page.

13. CSS FOLDER with Visualforce Create a Visualforce Page with the following code. <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.stylezip ,'stylefiles/style.css')}"/> </apex:page> Note: “stylefiles/style.css”. Here, stylefiles is the folder name within which you have the style.css file. If you have the CSS within a different folder, you will have to specify the appropriate structure.