Salesforce Customization-Styling Visualforce Pages

Author

Amit Tiwari

March 11, 2015

If you want to optimize your Visualforce page styling or you want to pretty up your page, you have got options. In this blog, I am covering a few ways in which you can give a good look and feel to your apex applications.
Good UI development of course requires smart use style sheets. Visualforce provides you the following 3 types of stylesheets:

Internal (Embedded) Styles: defined in the <head> section of the current page.
Inline Styles: defined within the HTML markup of the particular page element.
External Styles: defined in the external Style Sheet which is linked to the web pages.

How to use CSS Styles in Visual Force page?

In this section, I will give you examples and code snippets for each type of style sheet usage.

Internal (Embedded) style

Specify false for the showHeader attribute on the <apex:page> tag and then use <apex:stylesheet> tag or include your own HTML in visual force page and make standardStylesheets false.

Example:

<apex:page showHeader=”false” controller=”BlogTestClass” standardStylesheets=”false”>

<style>

.fsWrapper{

width: 960px;

margin: 0 auto;

}

.headerTitle{

font-family: arial, sans-serif;

font-size: 16px;

font-weight: 600;

color: #fff!important;

text-align: left;

text-transform: uppercase;

background: #4e75a3;

display: block;

padding: 10px;

margin:0;

}

.dataTable table{

width: 100%;

font-family: arial, sans-serif;

border: solid 1px #E0E3E5;

border-collapse: collapse;

}

.dataTable th{

background: #999999;

border-top: solid 1px #E0E3E5;

border-right: solid 1px #E0E3E5;

color: #fff;

font-size: 0.8em;

font-weight: normal;

padding: 11px 2px 10px 5px;

}

.dataTable td {

border-top: solid 1px #E0E3E5;

border-right: solid 1px #E0E3E5;

color: #797979;

font-size: 13px;

padding: 5px 2px 5px 5px;

}

.actionBtnWrapper {

float: right;

margin-top: 10px;

margin-left: 10px;

}

.actionBtnWrapper .btn{

padding: 5px 10px;

background: #0b51a3;

color: #fff;

font-size: 13px;

font-weight: 600;

font-family: arial, sans-serif;

text-align: center;

text-decoration: none;

border: none;

border-radius: 0;

transition: 0.5s ease-in-out;

cursor: pointer;

}

.actionBtnWrapper .btn:hover{

color: #fff;

text-decoration: none;

background: #074894;

}

</style>

<apex:form styleClass=”fsWrapper”>

<apex:outputPanel styleClass=”dataTable”>

<apex:pageBlock>

<h2 class=”headerTitle”>Goals</h2>

<apex:pageBlockTable value=”{!contactList}” var=”goal”>

<apex:column headerValue=”Goal Name” />

<apex:column headerValue=”Target Amount” />

<apex:column headerValue=”Target Date” />

<apex:column headerValue=”Current Amount” />

<apex:column headerValue=”Status”>

<apex:commandLink styleClass=”addNewGoalBtn” />

</apex:column>

<apex:column headerValue=”Action”>

<div class=”actionBtnWrap”>

<apex:commandLink title=”Detail” styleClass=”actionBtnDetail” />

<apex:outputLink title=”Edit” styleClass=”actionBtnEdit”></apex:outputLink>

<apex:commandLink title=”Delete” styleClass=”actionBtnDelete” />

</div>

</apex:column>

</apex:pageBlockTable>

</apex:pageBlock>

</apex:outputPanel>

<div class=”actionBtnWrapper”>

<apex:commandButton styleClass=”btn” value=”Add New Goal” />

</div>

</apex:form>

</apex:page>

Inline Styles:

An example for inline styles will be an apex form where I want to make the border color black. For that you need to write the style like that:
<apex:form style=”border: solid 1px #000; “>…</apex:form>

External Styles:

In this step create custom CSS file and put all styling in this file. You can upload your custom CSS file in the static resource and add static resource URL in apex page.

Example:

<apex:page showHeader=”false”>

<apex:stylesheet value=”{!$Resource.customCSS}” />

<h1>Please add some heading here</h1>

<p>add some nice text here</p>

</apex:page>

Well, that’s pretty much it. Not that hard, huh? Feel free to ping me if you need any help with stylin your Visualforce pages.