Theme Editor Overview

by Community Manager on ‎12-22-2015 10:43 AM - edited on ‎02-07-2017 01:41 PM by Community Manager

OVERVIEW 

You can use themes to customize the colors in your organization's UI. By default, your organization uses the standard Salesforce theme. 

 

SCENARIOS

Admins can use custom Themes to provide a distinct layout to user groups based on how those groups interact with their Salesforce org. For example, admins could give a distinct color theme to users who only have access to the Salesforce CPQ Community.

 

DETAILS

When you create a new theme, a small .CSS file is saved in Documents. This file overwrites the Salesforce CPQ default color theme. You can associate this theme to either the SteelBrick Settings or to an individual user or user group profile, causing the new theme to overwrite the default theme when SteelBrick loads.

 

SETUP

  1. Admins may need to add a Themes tab to their org's default tab layout.
  2. Admins may need to add the Select Theme link to their User record. This is accomplished by navigating to the My Settings page, then clicking Personal>Advanced User Details >Edit Layout. Add the Custom Link titled "Select Theme" to the Custom Links related list.
    • Admins who wish to grant users the ability to select a theme may do so by adding the Select Theme link to that user's User record.select theme.png

PROCEDURES

To create a new theme for your organization:

  1. Navigate to the Theme object. 
  2. Click New.
  3. Enter a Theme Name and click Save
  4. Click Edit to continue to the Theme Editor page. 
  5. Use the picklist menus to assign colors to each UI element
  6. Click Preview to see the changes you've made. 
  7. When all changes are complete, click Publish to create or update the .CSS file associated with the theme.

NoteIf you make changes to a theme you created previously, you may need to clear your browser's cache to see the changes go into effect.

 

 

Header

Screen Shot 2015-12-22 at 1.22.13 PM copy 2.png

 

The Header section lets you set colors for the following header items:

  • Header Color sets the background color of headers.
  • Secondary Header Color sets the background color of headers found in features and in groups.
  • Header Border Color sets the color of the border lines on your headers.
  • Header Font Color sets the color of your primary header fonts.
  • Header Supporting Font Color sets the font color of your secondary headers.

General

Screen Shot 2015-12-22 at 1.37.21 PM.png

 

The General section lets you update colors for the major sections of your page, listed below:

  • General Color sets the background color of the page body.
  • Detail Background Color sets the background color of detailed sections like the MDQ segment editor.
  • General Font Color sets the font color for body text on the page.
  • Secondary Font Color sets the secondary font color used on bundled products in the Quote Line Editor.
  • General Border Color sets the border colors on the page body.
  • Tab Selected Color sets the color of the selected tab highlights.

Group Buttons

Group Buttons

 

The Group Buttons section lets you set colors for the following elements:

  • Group Button Color sets the fill color of group buttons.
  • Group Button Border Color sets the border color for group buttons.
  • Group Button Font Color sets the font color for group buttons.
  • Group Button Hover Color sets the hover fill color of group buttons.
  • Group Button Hover Font Color sets the hover font color for group buttons.
  • Group Button Disabled Font Color sets the font color for group buttons in the disabled state.

Table

Table

 

The Table section lets you set colors for the following table elements:

  • Table Header Font Color sets the font color for table headers.
  • Table Row Hover Color sets the hover color of row backgrounds.

Primary Buttons

Primary Buttons.png

 

The Primary Buttons section lets you update colors for the following elements:

  • Primary Button Color sets the fill color of your primary buttons.
  • Primary Button Font Color sets the font color of your primary buttons.
  • Primary Button Hover Color sets the fill color of your primary buttons in the hover state.

Icons

Icons

 

The Icons section lets you update colors for the following icon elements:

  • Icon Font Color sets the standard icon color.
  • Accent Icon Font Color sets the color of accent icons.
  • Accent Icon Hover Font Color sets the color of accent icons in the hover state.
  • Accent Icon Disabled Font Color sets the color of accent icons in the disabled state.

THEME MANAGEMENT

User themes can be set for individual users or for the entire organization.

Change Themes for Your Organization:

  1. Navigate to Installed Packages and configure Salesforce CPQ's package.
  2. Select the Additional Settings tab.
  3. Select the theme you want to use for your organization from the Theme drop-down menu.Select Theme

Set a User Theme

  1. Navigate to your user 
  2. Add the Select Theme custom link to your layout.
  3. On the User page, click Select Theme to view the Theme Lookup page.
  4. From the Theme Lookup page, select a theme for live preview.
  5. Save the theme from the pop-up window.

Automatic Theme Assignment

Admins can create a Workflow Rule that automatically assigns a Theme to a user based on that user's User Type. This feature is useful for admins who wish to distinguish their org's Parter Community Users from users with full access to Salesforce CPQ.

  1. Create a new Workflow Rule.
  2. Set the WFR's fields as follows:
    • Object: User
    • Rule Criteria: User: User Type Equals Partner
      • "Partner" refers to Partner Community Users but can be replaced with other User Types as needed.
    • Evaluation Criteria: Evaluate the rule when a record is createdWFR.png
  3. Create a new Workflow Action. 
  4. Set the Action's fields as follows:
    • Type: Field Update
    • Name: Set Theme
    • Field to Update: Theme
    • Value: [Create a formula to set the new Theme value]
    • Formula: [This should be the Document ID for the Theme, enclosed in single-quotes. The Document ID can be found by adding the Document ID field to the Theme page layout.]

 

Note: SteelBrick CPQ Minor Releases contain features and upgrades, for specific customers, that are not yet available in a public release. The feature noted below will be publicly available in the next Major Release.

Hide Icons on Object Header Pages 

As of Salesforce CPQ 26.1, admins may choose to hide icons on Page Headers. This is accomplished by navigating to the Theme Editor and checking the Hide Icons on Page Headers checkbox.

 

Unchecked

before.png

 

Checked

after.png

 

Notes:
- We consider it a best practice to create a Theme called "Salesforce" in case users don't want to use Themes when there is an organization Theme selected.  A user-defined theme will supersede an org-level theme.

-To turn off all themes, navigate to the SteelBrick CPQ Settings page and select --None-- from the Theme drop-down.

-Any patches made to the Theme Editor force the admin to manually publish each theme again to update the themes currently on the organization.

Comments
by Javedkhan
on ‎08-27-2016 12:04 AM

Can we update the theme for home screen as well.

 

Like Left column of home screen etc..

by axella
on ‎02-28-2017 04:45 PM

Hide Icons on Object Header Pages is not available. We are on version 27.0.23 and still we are unable to hide icons. When is this going to be fixed?