Salesforce Docs Portal

Set Up Branding Properties

After you create branding properties, the next step is to reference them as expressions in your Cascading Style Sheets (CSS) or Site.com page elements such as content blocks or custom code elements.

Required Editions

Available in: Salesforce Classic

Available for purchase in: Enterprise, Performance, and Unlimited Editions

Available (with limitations) in: Developer Edition

User Permissions Needed
To build, edit, and manage Site.com sites:

Site.com Publisher User field enabled on the user detail page

AND

Site administrator or designer role assigned at the site level
To edit only content in Site.com sites:

Site.com Contributor User

AND

Contributor role assigned at the site level

The expression syntax for branding properties is {!Site.branding-property-name}. For example, if you create a color property with the name HeaderColor, you can insert the property into a CSS or code block by typing {!Site.HeaderColor}.

Note
Note The expression names are case-sensitive!
  1. Open your CSS or code block.
  2. Locate the place where you want to insert the expression.
  3. Type {!
    and a dropdown list of available properties appears.
  4. Select the property and double-click to enter it on the page.
Example
Example For example, if part of your website's brand is to use blue for the background of the header section, you normally statically set the color's HEX value in your CSS rules. 
.site-header {
	background-color: #3793DD;
}
With branding, you can create a property that maps directly to the HEX color and then use the property's expression name in your CSS. 
.site-header {
	background-color: {!Site.HeaderColor};
}
Now the color can be easily changed by any of your site editors by using the Branding Editor instead of editing the CSS.

See Also