Learning Objectives

After completing this unit, you’ll be able to:
  • Describe two ways to change the styling of built-in Visualforce components.
  • Describe two differences between Salesforce Classic and Lightning Experience styling that can be changed using CSS stylesheets.
  • Describe two approaches to applying the Salesforce Lightning Design System to Visualforce pages.

Understanding Important Visual Design Considerations

Visualforce pages look the same whether they are running in Salesforce Classic or Lightning Experience, unless you rework them to adapt to the appropriate user interface context. Built-in Visualforce components that display user interface elements aren’t easily restyled to match the Lightning Experience look-and-feel.

Specifically, the HTML that’s rendered by the built-in Visualforce components doesn’t change when the page displays in Lightning Experience, and the Salesforce Classic stylesheets those components use is, by default, loaded by the page. The effect is that pages that use <apex:inputField>, <apex:outputField>, the <apex:pageBlock> components, and other coarse- and fine-grained components that match the Salesforce Classic visual design, still match that visual design. You get a little slice of Salesforce Classic in the middle of your Lightning Experience.

It’s our general recommendation that—for now, for existing pages—you don’t try to adapt them to match the visual design of Lightning Experience. There are two reasons for this. First, Lightning Experience is still evolving, and matching its styling yourself means you’re chasing a moving target. That’s work.

Second, it’s even more work if you don’t have the tools to do it. In the current release, the tools are mostly not there. We have a number of ideas here and, Safe Harbor, we’re already hard at work at bringing them to you in a future release. So if you can wait, that’s our recommendation.

Nevertheless, in some cases you’ll want some pages to match more closely with Lightning Experience visuals. For new pages, or if you’re willing to do some work, there are some great tools for creating pages that fit in perfectly with Lightning Experience.

Affecting the Styling of Standard Components

Visualforce provides a range of options for adjusting or overriding the styling of the standard components. If your goal is to make modest changes to the appearance of these components, the effort to use these options is similarly modest. Let’s look at a few of the tools you have available for affecting styling.

Styling Individual Components

Visualforce components that produce HTML have pass-through style and styleClass attributes. These attributes allow you to use your own styles and style classes to control the look and feel of the resulting HTML. style allows you to set styles directly on a component, while styleClass lets you attach classes for styles defined elsewhere. For example, the following code sets the class of the <apex:outputText> and applies a style.
<apex:page>

    <style type="text/css">
        .asideText { font-style: italic; }
    </style>

    <apex:outputText style="font-weight: bold;" 
        value="This text is styled directly."/>

    <apex:outputText styleClass="asideText" 
        value="This text is styled via a stylesheet class."/>

</apex:page>

Adding a Custom Stylesheet

You can add your own custom stylesheets to any Visualforce page using static resources and the <apex:stylesheet> tag. For example, to add a stylesheet that’s been uploaded as a static resource named “AppStylesheet”, add the following to your page.
<apex:stylesheet value="{!$Resource.AppStylesheet}"/>
You can then refer to any of the styles contained in the stylesheet, and reference them in Visualforce tag styleClass attributes, as we did with the asideText style previously.

This is the recommended method for adding CSS style definitions to Visualforce pages, because it shares the stylesheet between pages, and minimizes the markup you need to add to each page.

Different Styles in Lightning Experience

To load a custom stylesheet only when your page is running in Lightning Experience, use the following markup. This is similar to the Visualforce markup example in Sharing Visualforce Pages Between Classic and Lightning Experience.
<apex:page standardController="Account">

    <!-- Base styles -->
    <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'app-styles.css')}" />
    
    <!-- Lightning Desktop extra styles -->
    <apex:variable var="uiTheme" value="lightningDesktop" 
        rendered="{!$User.UIThemeDisplayed == 'Theme4d'}">
        <apex:stylesheet value="{!URLFOR($Resource.AppStyles, 'lightning-styling.css')}" />
    </apex:variable>

    <!-- Rest of your page -->
    
</apex:page>

OK, these are tools. Let’s look at a few techniques for using them next.

Styling Strategies and Recommendations

In the current release there’s only one supported method for creating Visualforce pages that match the Lightning Experience visual design, and that’s to create new pages using the Lightning Design System.

Before we get to specifics, let’s think at a higher level and consider the different strategies for applying Lightning Experience styling to your pages. In particular, let’s talk about your existing pages.

There are two ways to affect the styling of existing pages to make them look more like Lightning Experience.
  • Change the markup to apply new styling—make changes in your pages.
  • Change the styling rules for existing markup—make changes in your stylesheets.

These aren’t either / or. You can use them individually or in combination.

The Lightning Design System is a fantastic all-new toolkit for styling your pages, and we’ll talk about it in detail shortly. Correctly using the Lightning Design System means using the Lightning Design System stylesheets with all-new markup for your Visualforce pages. Again, this is the only supported method for matching the Lightning Experience visual design.

However, it is possible to add the Lightning Design System stylesheets, and revise your pages to use them. How much work this is depends on how closely you want to match Lightning Experience as well as the specific markup and components in your code. While it’s possible to achieve decent results this way, it’s not an approach we recommend. The Lightning Design System was designed to be applied to specific markup, and that’s simply not what Visualforce emits. There’s an “impedance mismatch” that, while not fatal, is definitely a serious rock in your shoe when you take this path.

Finally, there’s the other approach: adding new rules and styles to your existing (or a new) stylesheet to make your existing markup look more like Lightning Experience. If your page is already mostly styled with your own stylesheets, this approach might work well for you. If instead you’re mostly using the built-in Visualforce components and the Salesforce Classic styling, it requires you to override the styles from the Salesforce Classic stylesheet.

While this is technically possible, we want to discourage you from taking this approach. It introduces dependencies into your markup and styles that you don’t want to have. These dependencies are on the structure, IDs, and classes of the HTML rendered by the built-in Visualforce components. We want to be really clear here: the HTML rendered by the built-in Visualforce components is an internal implementation detail, subject to change without notice. If you have dependencies on it in your own stylesheets, your styling will eventually break.

The Salesforce Lightning Design System

The Lightning Design System is a design framework for building enterprise apps that look like Lightning Experience. It includes a sophisticated CSS framework, a collection of graphic assets, and the Salesforce Sans font. You can use the Lightning Design System to build pages and apps that look gorgeous and perfectly match the Lightning Experience user interface.

The Lightning Design System was designed to make it easy for customers and partners to match the Lightning Experience look and feel. It also includes tools that make it possible to customize the look and feel to match your own brand—colors and so on—while still remaining consistent with overall Lightning Experience design.

The Lightning Design System is so big and so exciting that…we’re not going to go into the details of using the Lightning Design System here. Because we’ve written a whole module about using it, Lightning Design System. It explains how to get the Lightning Design System, the basic concepts of using it to design pages, and how to apply those concepts to building Lightning Experience apps with Visualforce.

Lightning Design System is a big module—you’ll have to work to earn that badge. While we do want to save the details for that module, we don’t want to leave you totally hanging here. So, let’s cover how you use the Lightning Design System with Visualforce in a general way.

The first thing to know is that the Lightning Design System assumes a new markup structure and styling classes. For this reason it’s best used with new pages and apps. It’s built around the capabilities of modern browsers, and takes advantage of the latest best practices for markup and styling. As much as we all love it, Visualforce has been around a while. Between the HTML it generates and static code in customer pages, most organizations will find it challenging to apply the Lightning Design System to existing pages.

The Lightning Design System module is focused on creating new pages and apps, and scoring that badge is the best way to learn about it. After finishing that module you’ll have an understanding of both how to use Lightning Design System and how to plan development around it.

Share Time Estimate

Having trouble with your challenge verification?

Here are some tips:

  1. Check for typos (hey, it happens)
  2. Try using a new Developer Edition (existing customizations can interfere with the validation)