Using Salesforce Styles

Many Visualforce components already have the look and feel of the same components in Salesforce, such as the related list in a detail page, or a section header. Part of the styling of these components, including the component’s color scheme, is based on the tab on which the component appears. You can specify the tab style that should be used to style a component by associating a page with a standard controller or by setting the tabStyle attribute on the <apex:page>, or <apex:pageBlock> tags.

When you use a standard controller with a Visualforce page, your new page takes on the style of the associated object’s standard tab in Salesforce. It also allows you to access the methods and records associated with the associated object.
When you use a custom controller, the tabStyle attribute of an <apex:page> tag allows you to mimic the look and feel of the associated Salesforce page. If you only want portions of the page to be similar to a Salesforce page, you can use the tabStyle attribute on the <apex:pageBlock> tag. For an example, see Defining Getter Methods.

For more information on customizing the Salesforce user interface, see Customizing User Interface Settings.

Extending Salesforce Styles

Use the <apex:stylesheet> tag to add additional stylesheets to a page. Use the style or styleClass attribute available on most Visualforce components to connect them to style definitions in your stylesheets. This technique lets you extend the Salesforce styles with your own.

The following markup shows a very basic page. The <apex:stylesheet> tag references a CSS stylesheet that is saved as a static resource named TestStyles under Setup, in Develop | Static Resources. It’s referenced by the $Resource global variable in the <apex:stylesheet> tag’s value attribute. The styleClass attribute of the <apex:outputText> tag uses the sample style class defined in the style sheet.

1swfobject.registerObject("clippy.codeblock-0", "9");<apex:page>
2    <apex:stylesheet value="{!$Resource.TestStyles}"/>
3    <apex:outputText value="Styled Text in a sample style class" styleClass="sample"/>
4</apex:page>

This is the style sheet used for this example:

1.sample {
2    font-weight: bold;
3}

Identifying the Salesforce Style Your Users See

When you’re creating a Visualforce page, it’s often useful to know the Salesforce look and feel your user expects, in order to render a page that matches their style. For example, some users have the choice to customize their look and feel. You’ll need to design your Visualforce pages to take these differences into consideration.

There are two global variables that can help you identify which style a user sees: $User.UITheme and $User.UIThemeDisplayed. The difference between the two variables is that $User.UITheme returns the look and feel the user is supposed to see, while $User.UIThemeDisplayed returns the look and feel the user actually sees. For example, a user may have the permissions to see the new user interface theme look and feel, but if they are using a browser that doesn’t support that look and feel, for example, Internet Explorer 6, $User.UIThemeDisplayed returns a different value.

Both variables return one of the following values:

Theme1—Obsolete Salesforce theme
Theme2—Salesforce theme used prior to Spring ’10
PortalDefault—Salesforce Customer Portal theme
Webstore—Salesforce AppExchange theme
Theme3—Current Salesforce theme, introduced during Spring ’10

Suppose a developer has hard coded some CSS styles to resemble Salesforce. In order to preserve the same look and feel on the Visualforce page for new styles, the developer needs to select between several stylesheets to handle the preferences of the user. The following example shows one possible way of accomplishing this:

1swfobject.registerObject("clippy.codeblock-2", "9");<apex:page standardController="Account">
2    <apex:variable var="newUI" value="newSkinOn" 
3        rendered="{!$User.UIThemeDisplayed = 'Theme3'}">
4        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'newStyles.css')}" />
5    </apex:variable>
6    <apex:variable var="oldUI" value="oldSkinOn" 
7        rendered="{!$User.UIThemeDisplayed != 'Theme3'}">
8        <apex:stylesheet value="{!URLFOR($Resource.myStyles, 'oldStyles.css')}" />
9    </apex:variable>
10    <!-- Continue page design -->
11</apex:page>

Notice in this example that:

Using the rendered attribute you can “toggle” which sections display.
Since the <apex:stylesheet> tag doesn't have a rendered attribute, you'll need to wrap it in a component that does.

Even if a new look and feel is enabled for your users, they may not be running the right browser or accessibility settings to see it. Here’s a code example that makes use of the $User.UITheme variable to present alternate information to the user:

1swfobject.registerObject("clippy.codeblock-3", "9");<apex:page showHeader="true" tabstyle="Case">
2    <apex:pageMessage severity="error" rendered="{!$User.UITheme = 'Theme3' && 
3                                                    $User.UIThemeDisplayed != 'Theme3'}">
4    We've noticed that the new look and feel is enabled for your organization. 
5    However, you can't take advantage of its brilliance. Please check with 
6    your administrator for possible reasons for this impediment.
7    </apex:pageMessage>
8    <apex:ListViews type="Case" rendered="{!$User.UITheme = 'Theme3' && 
9                                           $User.UIThemeDisplayed = 'Theme3'}"/>
10</apex:page>

Notice that although $User.UITheme equals Theme3, $User.UIThemeDisplayed doesn’t, and so the page won’t render to its full potential.

Using the Salesforce Stylesheets

Salesforce stylesheets are not versioned, and the appearance and class names of components may change without notice. Salesforce recommends that you use Visualforce components that mimic the look-and-feel of Salesforce styles instead of directly referencing—and depending upon—Salesforce stylesheets.

Warning

Salesforce uses different stylesheets (.css files) throughout the application to ensure that every tab conforms to the Salesforce look and feel. These stylesheets are automatically included on a Visualforce page unless you specify false for the showHeader attribute of the <apex:page> tag.

When you disable the inclusion of the Salesforce stylesheets, only your custom stylesheets will affect the styling of the page. For the purposes of building up styles that partially or fully match the Salesforce look and feel, you might want to look at and use selected contents from the default stylesheets.

The following stylesheets contain style classes you can reference. They are located in the /dCSS/ directory of your Salesforce instance.

dStandard.css – Contains the majority of style definitions for standard objects and tabs.
allCustom.css – Contains style definitions for custom tabs.

Salesforce doesn’t provide notice of changes to or documentation of the built-in styles. Use at your own risk.

Important

Visualforce Developer’s Guide

No Results

Using Salesforce Styles

Extending Salesforce Styles

Identifying the Salesforce Style Your Users See

Using the Salesforce Stylesheets