Modifying Template Components

Overview

This page is for users who want to modify CSS in FormBuilder components (for example, add a new font family or other types of CSS parameters).

There are three main steps to follow:

  1. Identify and implement the CSS class you want to change in the Template header
  2. Upload a zipped file (e.g., with your custom CSS) to Static Resources
  3. Link the external file in the Template header

These steps are outlined in more detail below.

Steps to Change the CSS in a Component

Identify the CSS Class You Want to Change

This example shows you how to change the font family specified in the template.

To identify the current font family in the template CSS:
  1. Navigate to the FormBuilder Rx tab, select the Environment you want to work in, and click the Template Builder subtab.
  2. On the Template Builder subtab, click the yellow edit button on the Active template's row.

  3. In the Edit Template dialog window, scroll down to the Template Style section. The current font can be found in the "Theme Font" picklist. This setting determines the font family for all pages.

Create and Upload Files to Static Resources in Salesforce

Next, create your custom CSS in a separate file, compress the file, and upload it to Static Resources in Salesforce.

Follow these steps:

  1. Write font family style rules for your component. Following is an example.

  2. Compress the CSS file with your preferred tool.
  3. Upload the compressed file to Static Resources:
    1. In Salesforce, navigate to Setup, type "Static Resources" in the Quick Find window and click on it when it appears.

    2. On the Static Resources page, you'll see a list of resources that have been uploaded. Click the New button at the top of this list.
    3. On the New Static Resource page, fill out the Name field, choose your zipped file, and click Save.

Link the External File in the Template Header

To apply the CSS changes to the template, add a link to the zipped file in Static Resources to the Template header.
  1. Navigate back to your FormBuilder Environment and click the Template Builder subtab.
  2. Click the Edit button in the Active template row.
  3. In the Edit Template window, scroll down to the Resources section (you'll find this underneath the Template Style section).
  4. Click the Add Resource button
  5. This will add a new field at the bottom of the list. In the picklist, select the file you uploaded to Static Resources.

  6. Before closing this window, add a link to this Static Resource in the Template header. For example:

  7. Click Save before closing the Edit Template window.