Salesforce Customization-Styling Visualforce Pages
Author
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.
Pranshu Goyal, Director of Products at Mirekta, states: “We envision DSM to be used by every small to a medium-sized organization dealing with bad data and want to get rid of duplicates easily with no cost. We have faced issues dealing with duplicates in our organization. That inspired us to make a solution that is not only simple to use but can be used widely to make the organization’s data clean to make them more efficient and productive. We want DSM to be a solution for every organization looking for duplicate management capability better than the Salesforce out-of-the-box solution with no additional cost.”
Recent Posts
-
Salesforce 2025 Game-Changing Trends You Need to Know28 Jan 2025 Blog
-
Agentforce 2.0: Everything You Need to Know About the Latest Update22 Jan 2025 Blog
-
The Ultimate Guide to NetSuite Development: Tools and Techniques10 Jan 2025 Blog
-
How Salesforce Nonprofit Cloud Transforms Fundraising Strategies10 Jan 2025 Blog
-
The Impact of Salesforce Development Partners on Small and Medium Businesses08 Jan 2025 Blog
-
Key Questions to Ask When Hiring a NetSuite Development Partner08 Jan 2025 Blog
-
Salesforce Agentforce Demystified: Your Essential Guide08 Jan 2025 Blog
-
Salesforce and NetSuite Integration: Driving Business Efficiency with Precision06 Jan 2025 Blog
-
Everest Group has positioned Mirketa as an Aspirant in the report24 Dec 2024 Press Release
-
Salesforce Einstein20 Dec 2024 E-Book
-
Order to Cash Cycle with NetSuite20 Dec 2024 E-Book
-
Empower Your Marketing Strategy with Salesforce Marketing Cloud's Automation Studio Activities13 Dec 2024 Blog
-
Salesforce CPQ for Subscription-based Businesses10 Dec 2024 Blog
-
Unleashing the Magic of Einstein Prediction Builder10 Dec 2024 Blog
-
Customized Templates and Branding with Salesforce Experience Cloud10 Dec 2024 Blog
-
Unleashing the Power of Real- Time Reports and Dashboards in NPSP10 Dec 2024 Blog
-
Top 4 Salesforce Automation Tools in 202409 Dec 2024 Blog
-
Salesforce Service Cloud Implementation: The Ultimate Guide09 Dec 2024 Blog
-
Salesforce CRM Implementation Partner Enhancing Automation in Healthcare09 Dec 2024 Blog
-
Shorten Your Sales Cycle in 8 Steps: Salesforce CPQ Implementation Guide09 Dec 2024 Blog
-
Overcoming Top 5 Common Sales Challenges With Salesforce Revenue Cloud06 Dec 2024 Blog
-
Empowering Sales Teams with Einstein: 5 Proven Methods to Drive Sales Success05 Dec 2024 Blog
-
Mirketa Recognized by NetSuite as Summer 2024 Alliance Partner Spotlight Award Winner04 Dec 2024 Blog
-
Salesforce Agentforce: Revolutionizing AI with Autonomous Agents03 Dec 2024 Blog
-
How to send information from one Salesforce Org A to another Org B using Salesforce Integration?30 Nov 2024 Blog
Categories
Featured by



