---
schema_version: "1"
id: 54934781f8aebce988f73cd0df45fae5201f40a98d51ee888fe9c1885979b65f
title: Set Up Branding Properties
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/siteforce_branding_setup.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.siteforce_branding_setup.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: e1d88b3a86041d174f54edca6e967c0cf345b87ed837758b8ef576e9e64ceb92
description: 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.
products:
  - Salesforce Platform
  - Security
release: "264"
---
# 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

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small edition">
        <colgroup>
          <col>
        </colgroup>
        <tbody>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">Available in: Salesforce Classic</td>

          </tr>
          <tr class="">
            <td class="slds-cell-wrap" style="vertical-align:top;">
              <p>Available for purchase in: <strong>Enterprise</strong>, <strong>Performance</strong>,
                and <strong>Unlimited</strong> Editions</p>
              <p style="margin-bottom:0;">Available (with limitations) in:
                <strong>Developer</strong> Edition
              </p>
            </td>

          </tr>
        </tbody>
      </table> <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small permission">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="text-align:center;vertical-align:top;" id="d105130e74">User
              Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d105130e74 ">To build, edit, and manage Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d105130e74 ">
              <p><samp class="parmname">Site.com Publisher User</samp> field enabled on the
                user detail page</p>
              <p>AND</p>
              <p style="margin-bottom:0;">Site administrator or designer role
                assigned at the site level</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d105130e74 ">To edit only content in Site.com sites:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d105130e74 ">
              <p>
                <samp class="parmname">Site.com Contributor
                  User</samp>
              </p>
              <p>AND</p>
              <p style="margin-bottom:0;">Contributor role assigned at the
                site level</p>
            </td>

          </tr>
        </tbody>
      </table>

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_note.png)

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](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-extend_click-264-0-0-production-enus/5f7d9219-b7b1-4552-8891-f1aba9b289fc/images/icon_example.png)

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

- [Site Branding Overview](https://help.salesforce.com/s/articleView?id=platform.siteforce_prop_brand_overview.htm&release=264.0.0&type=5 "Branding provides a flexible way for you to define different aspects of your website's brand. Once branding properties are defined, your editors can easily customize everything in one centralized place, the Branding Editor. When your website editors customize the properties, they get a preview of their branding changes immediately.")
- [Creating Branding Properties](https://help.salesforce.com/s/articleView?id=platform.siteforce_branding_create.htm&release=264.0.0&type=5 "With branding , you can quickly create style properties that can be reused by editors of your site.")
- [Use the Branding Editor](https://help.salesforce.com/s/articleView?id=platform.siteforce_branding_editor.htm&release=264.0.0&type=5 "The Branding Editor provides a centralized place to customize and then preview the changes that you make to the branding properties in your site.")