---
schema_version: "1"
id: 05dc7bc724cda12342295f193639179f23d22440db0c066b082976324467eae0
title: Customizing Your Self-Service Fonts and Colors
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/service/264-0-0/css_editor.md
canonical_url: https://help.salesforce.com/s/articleView?id=service.css_editor.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 31606e36f68c6b6e2757d66f0140e119548edf3d6434bd8400e34b04b63f43ee
description: You can customize the fonts and colors of the Self-Service portal to reflect your company’s branding.
products:
  - Service Cloud
release: "264"
---
# Customizing Your Self-Service Fonts and Colors

You can customize the fonts and colors of the Self-Service portal to reflect your company’s branding.

### 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;"><a href="https://help.salesforce.com/s/articleView?id=service.legacy_editions.htm&amp;language=en_US" target="_blank">View supported editions</a></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="vertical-align:top;" id="d38816e54">User Permissions Needed</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d38816e54 ">To set up the Self-Service portal:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d38816e54 ">Manage Self-Service Portal</td>

          </tr>
          <tr class="">
            <td data-label="User Permissions Needed" class="slds-cell-wrap" style="vertical-align:top;" headers="d38816e54 ">To modify Self-Service pages:</td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d38816e54 ">
              <p>Manage Self-Service Portal </p>
              <p style="margin-bottom:0;">AND</p>
              <p style="margin-bottom:0;"> Customize Application</p>
            </td>

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

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-service-support_legacy-264-0-0-production-enus/081af4ec-6c06-4d4b-9443-cb3516bbc46d/images/icon_note.png)

Note Starting with Spring ’12, the Self-Service portal isn’t available for new Salesforce orgs. Existing orgs continue to have access to the Self-Service portal.

Your portal’s fonts and colors are specified in a portal “color theme.” Select a predefined color theme and customize it using a point-and-click editor.

1. From Setup, enter Fonts and Colors in the Quick Find box, then select **Fonts and Colors**. Salesforce offers predefined themes that you can customize. Click **Preview** to view any theme.
2. Select the color theme you want to customize. From the color theme page, you can:
    - Click the **Reset to Default** link to remove all customizations from a theme.
    - Click the **Back to All Themes** link to return to the list of color themes.
    - Click **Preview Theme Name** to view the theme you are customizing.
3. Choose a portal page to customize. Color themes are customized page-by-page with some page elements being shared by multiple pages. From the portal page, you can:
    - Click **See Examples** to see all of the elements that you can customize.
    - Click **Clear** next to an element to remove customizations.
    - Click **Preview Theme Name** to view the theme you are customizing.
    - Click the **Back to All Pages** link to return to the list of all portal pages.
4. Click **Edit** next to the visual element you want to customize. Some elements are visible only on the selected portal page, and some are shared across multiple portal pages. Changes you make to shared elements affect all pages.
    
    Depending on the visual element, you can customize attributes using a point-and-click editor or a custom style sheet editor which lets you modify the cascading style sheets (CSS) directly. Choose the click here link to switch between the two. If you are using the point-and-click editor, select the Show advanced attributes box to access the click here link. We recommend that only users familiar with cascading style sheets (CSS) define them.
5. Edit the visual element as desired. If you are using the point-and-click editor:
    
    - Click **Edit** next to a basic or advanced attribute. If you do not see the advanced attributes, select the Show advanced attributes box.
    - In the popup window, change the attribute as needed.
    - Click **OK** to confirm your changes in the popup window.
        
        If you are using the custom style sheet editor, enter valid CSS code.
        
        For a list of all the page attributes you can edit, see [Self-Service Page Attributes](https://help.salesforce.com/s/articleView?id=service.self-service_page_attributes.htm&release=264.0.0&type=5 "You can modify certain Self-Service attributes with the point-and-click editor.").
6. Click **Save** to save all changes to the visual element and its attributes. Customizations are not visible to your Self-Service users until you set the color theme as active.
7. Repeat these steps to customize all visual elements and their attributes as necessary.
8. Return to the list of color themes by clicking the **Back to All Pages** link and then the **Back to All Themes** link.
9. Click **Set Active Theme**.
10. Select the theme to activate for your portal, live and in real-time. Your organization can only have one active theme.
11. Click **Save**.

Since changes to an active theme take effect immediately, we recommend that you fully customize a theme before activating it so as not to disturb your customers.

#### See Also

- [Set Up Your Self-Service Portal](https://help.salesforce.com/s/articleView?id=service.customize_selfservice.htm&release=264.0.0&type=5 "Self-Service provides an online support channel for your customers, allowing them to resolve their inquiries without contacting a customer service rep.")