---
schema_version: "1"
id: a4e7ec3034de8dedfde4c667b5ada04ca7f6e41e4bf175e9f78d571c76d7dbdb
title: Brand Your Salesforce Tabs + Visualforce Site
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/networks_customize_branding.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.networks_customize_branding.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 5cd1a59733ced687258451ecd8caa7198ada5ffdae0746ccb4b74a3ea01c526b
description: If you’re using the Salesforce Tabs + Visualforce template, you can customize the look and feel of your site in Experience Workspaces. You can add your own logo, colors, and copyright so that your site matches your company's branding and is instantly recognizable to your site members.
products:
  - Experiences
release: "264"
---
# Brand Your Salesforce Tabs + Visualforce Site

If you’re using the Salesforce Tabs + Visualforce template, you can customize the look and feel of your site in Experience Workspaces. You can add your own logo, colors, and copyright so that your site matches your company's branding and is instantly recognizable to your site members.

### 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: both Salesforce Classic and Lightning Experience</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Available in: <strong>Enterprise</strong>, <strong>Performance</strong>, <strong>Unlimited</strong>, and <strong>Developer</strong> Editions</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="d9655e70">User Permissions
              Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e70 ">To customize or publish an Experience Cloud site:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e70 ">
              <ul>
                <li>Create and Set Up Experiences AND View Setup and Configuration AND be a member
                  of the site<p>OR</p>
                </li>

                <li>View Setup and Configuration AND be a member of the site AND have appropriate
                  <a href="https://help.salesforce.com/s/articleView?id=experience.networks_access_control_overview.htm&amp;language=en_US" target="_blank">role-based site access</a>
                </li>

              </ul>
            </td>

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

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_important.png)

Important Follow these steps to design your site’s branding. If you’re using the Experience Builder to create your custom pages, you can use the Experience Builder instead.

1. Open Experience Workspaces.
2. Click **Administration** | **Branding**.
3. Use the lookups to choose a header and footer for the site.
    
    First upload the files for your header and footer to the Documents tab. The header can be a GIF, JPG, or PNG file with a maximum file size of 20 KB. The footer must be an HTML file. The maximum file size for all HTML files is 100 KB. So if you have a footer HTML file that is 70 KB and you want to use an HTML file for the header, it must be 30 KB or smaller.
    
    The header you choose replaces the Salesforce logo below the global header. The footer you choose replaces the Salesforce copyright and privacy footer.
4. To choose a predefined color scheme, click **Select Color Scheme**. To select a color from the color picker, click the text box next to the page section fields.
    
    Here’s how selected colors show up in your site and in the Salesforce mobile app.<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:19%">
              <col style="width:81%">
            </colgroup>
            <thead class="slds-text-title_caps ">
              <tr class="">
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d9655e160">Color Choice</th>
                <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d9655e162">Where It Appears</th>
              </tr>
            </thead>
            <tbody>
              <tr class="">
                <td data-label="Color Choice" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e160 ">Header Background</td>
                <td data-label="Where It Appears" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e162 ">
                  <p>Top of the page, under the black global header. If you select an HTML file
                    in the Header field, it overrides this color choice.</p>
                  <p>Top of the login
                    page.</p>
                  <p style="margin-bottom:0;">Login page in the Salesforce mobile app.</p>
                </td>
              </tr>
              <tr class="">
                <td data-label="Color Choice" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e160 ">Page Background</td>
                <td data-label="Where It Appears" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e162 ">Background color for all pages in your site, excluding the login
                  page.</td>
              </tr>
              <tr class="">
                <td data-label="Color Choice" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e160 ">Primary</td>
                <td data-label="Where It Appears" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e162 ">Tab when it’s selected.</td>
              </tr>
              <tr class="">
                <td data-label="Color Choice" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e160 ">Secondary</td>
                <td data-label="Where It Appears" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e162 ">
                  <p>Top borders of lists and tables.</p>
                  <p style="margin-bottom:0;">Button on the login page.</p>
                </td>
              </tr>
              <tr class="">
                <td data-label="Color Choice" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e160 ">Tertiary</td>
                <td data-label="Where It Appears" class="slds-cell-wrap" style="vertical-align:top;" headers="d9655e162 ">Background color for section headers on edit and detail pages.</td>
              </tr>
            </tbody>
          </table>
5. Click **Save**.

#### See Also

- [Customize Salesforce Tabs + Visualforce Sites](https://help.salesforce.com/s/articleView?id=experience.networks_customize.htm&release=264.0.0&type=5 "Update basic site settings like your site URL, site name, members, login options, and general preferences in the Administration tile of Experience Workspaces.")
- [Brand Your Pages from the Administration Workspace](https://help.salesforce.com/s/articleView?id=experience.external_identity_customize_community.htm&release=264.0.0&type=5 "Salesforce Customer Identity gives you a point-and-click way to brand the pages that prompt users to log in to your site, verify their identity, reset passwords, and self-register. If you’ve set up login flows, they also use these branding settings.")
- [Set Up Dynamic URLs with Experience Workspaces](https://help.salesforce.com/s/articleView?id=experience.external_identity_dynamic_set_up_reg_page.htm&release=264.0.0&type=5 "You set up dynamic URLs for your login experience from the Login & Registration page of the Administration workspace. Create dynamic URLs by including a placeholder that resolves at run time. Implement the dynamic URLs for the logo and right-frame content on the pages used to log in, verify identity, reset passwords, and self-register.")