Themes

Themes allow the Epicor CPQ user interface to match the color and font branding of your company.  They are also useful for matching a specific color scheme when embedding Epicor CPQ inside another website or app. 

One configurator can appear through many themes.
You can add your own custom themes, or select one of the standard themes.  A theme can style the user interface for...

1. all users who log in to Epicor CPQ natively, as the active theme for your company.  Set this in the company settings.
2. specific users who see Epicor CPQ embedded in a web site using our Embed API.  Set this in the embed code you build for that web site.
3. channel users who log in to Epicor CPQ natively, but only have access to a specific channel, if your company uses the optional Channels feature.  Set this in the channel settings.
4. integration users, who use Epicor CPQ embedded within another tool, such as Salesforce CRM or Salesforce CPQ.  The built-in salesforce theme is set automatically.

Creating, Editing, and Deleting Themes

In the administrative interface, click Settings > Themes.

• To create a new theme, click Add.
• To duplicate or delete a theme, click the checkbox next to one or more themes and click Clone or Delete. 

When setting theme options, the screen shows three columns:

• Edit the theme's settings in the first column on the left.
• Preview those settings in the other two columns to the right. 
  These other two columns display various UI components in the style of the current theme.  You can interact with these components, but they are for display only: no changes are saved in the two columns to the right.  These components, along with the rest of the screen, will dynamically update as you edit your theme settings in the first column.  

Theme Properties

The following properties are available when creating a new theme

Property	Description
Name	The name of the theme
Skin	Choose the "Classic" skin for fields with a strong visual border.  Choose the "Material Design" skin for a more modern look that provides subtle animated visual feedback of users actions and a clarity of design. Regardless of which you decide to use, neither skin has limitations: they both offer the same UI layout controls. You can change from the Classic to Material skin and back again: the change is reversible.
Font	Enter the name of a font to use for your theme. The Epicor CPQ default font is 'Roboto'. If you're not using a custom font URL, simply pick one of the fonts from the drop-down list. If you are using a custom font URL, type the exact name of the font to be used from that URL.  See more information on using fonts in Epicor CPQ.
Custom Font URL	A publicly-accessible URL to a font file. To use the custom font you are importing, make sure you also set the previous Font property to the name of that font.  See more information on fonts below.
Font Size	Enter the base size in points for fonts throughout your application.  The default is 15.
Border Radius	The border radius of buttons and other UI elements (in pixels).  The larger the border radius, the rounder the curve on the edges of some elements. The default is 4. Note that this setting appears on fewer UI components when using the "Material Design" theme.
Background	The background color of the main Epicor CPQ portal, as well as controls (like textboxes, etc.)
Input	The background color within input controls like textboxes, etc.
Border	The border color used for controls (like textboxes), as well as lines in data grids.
Primary	The color used for the top and bottom menu bars of the portal, as well as other various items in the UI. A theme works best if the primary color is a middle toned color that is associated with your brand, but not associated with warning or success.
Accent	An accent color used sparingly for effect throughout the UI. It is used for links, headers, selections, etc.
Success	Used to indicate success for logs, etc.  The default for this is green, which connotes positivity or completion in many western cultures.
Warning	Used for validation errors and error icons. The default for this is red, which connotes warning or the halt to a process in many western cultures.
Dark	If you have a primarily dark theme, the dark option can help provide more contrast by flipping the shading algorithms.

Understanding Fonts

You can use a public font stored on the internet, or a private font your company has purchased the rights to.  Learn more about using fonts in Epicor CPQ.

• Make your Word output documents match your theme, by embedding the same fonts in those documents.
• SVG elements in your UI can refer to fonts.
• SVG outputs you generate can also refer to fonts.
• 3D Scene elements, such as annotations or dimensions, can also refer to fonts.