Theme Options in 28.0

by Community Manager ‎04-24-2017 10:24 AM - edited ‎04-24-2017 01:05 PM

OVERVIEW

Customize your Quote Line Editor with the new theming options available in Salesforce CPQ 28.0.

 

KEY CONCEPTS

DETAILS

This article provides a reference for all theme editor fields in Salesforce CPQ. We're using exaggerated color and spacing to clearly display examples - but use whatever styles you believe will look best to your end users.

 

For an overview of general Theme Editor and Theme object functionality, check out the Theme Editor Overview article.

 

COLOR PICKER OPERATION

When using the Color Picker, make sure you select the Choose button after selecting your color. Salesforce CPQ will not apply the new color to your theme if you leave the picker without selecting Choose.choose.png

 

EXAMPLES

General

Example
Style settings for non-admin CPQ sections. In the example below:

- General color: Black
- General font color: Blue
- General border color: Black
- General font family: Salesforce Sans
- Drawer color: Grey
- Tab selected color: Yellow

General 3.png

General.png

 

Loading Mask

Example
The loading mask highlights the screen as pages load. In image below, the user has selected a grey loading mask.

theme-mask.png

 

Dialogs

Example
Style settings for all pop-up modals, such as the Guided Selling box or the Alert Rule box. In the example below:

Dialog background color: Red
Dialog mask color: Gray
Dialog close color: Black
Dialog footer color: Blue
Dialog header border style: Dotted
Dialog header border color: Green
Dialog header border width: 10px
Dialog header top padding: 18px
Dialog header right padding: 18px
Dialog header bottom padding: 18px
Dialog header left padding: 18px
Dialog footer border style: Dashed
Dialog footer border color: Light blue
Dialog footer border width: 10px
Dialog border radius: 10px

theme 28 dialog.png

 

Header

Example
Style settings for the header at the top of the page. In the example below:

- Header color: Blue
- Header font color: White
- Header font size: 24px
- Header font family: Salesforce Sans
- Header font style: Italic
- Header font weight: 300
- Header text decoration: Underline
- Header secondary font color: Red
- Header secondary font size: 14px
- Header secondary font family: Salesforce Sans
- Header secondary font style: Oblique
- Header secondary font weight: 400
- Header secondary text decoration: Overline
- Header border color: Black
- Header border width: 10px
- Header border style: Dashed
- Header minimum height: 90px
- Header top padding: 36px
- Header right padding: 36px
- Header bottom padding: 80px
- Header left padding: 18px
- Header icon color: Green 

theme header.png

 

Standard Buttons

Example
Here the user set Standard Button Color & Standard Button Font Color to black and red, then set Standard Button Hover Color & Standard Button Hover Font Color to teal and black.
theme buttons 1.png
The user also set custom padding, font size and font weight values.
Theme Buttons 2.png

Theme 3 - Border Radius.png


 

 Brand Buttons

Example
Style settings for custom actions that have been configured as brand buttons.

- Brand Button Color: Black
- Brand Button Font Color: White
- Brand Button Hover Color: Blue
- Brand Button Font Hover Color: White
- Brand Button Border Color: Green

Screen Shot 2017-03-01 at 12.11.46 PM.png


 

Badge

Example
The Badge icon displays the number of available products that match user search parameters. In the example below:

- Badge background color: Grey
- Badge font color: Red
- Badge font family: Salesforce Sans
- Badge font size: .8rem
- Badge border color: Green
- Badge border width: 2px
- Badge border style: Dashed

Badge.png

 

Table 

Example
Table cell padding controls the space between each field cell in a quote line. In the example below:

- Table cell left padding: 20px
- Table cell right padding: 30px
- Table cell bottom padding: 50px
- Table cell left padding: 60px

theme - table cells.png

 

Table Header

Example
Style settings for the header (row where field names are listed) of the quote line table. In the example below:

- Table header color: Grey
- Table font color: Black
- Table header font family: Salesforce Sans
- Table header font size: 18px
- Table header font weight: 400
- Table header font style: Italic
- Table header text decoration: Underline
- Table header cell height: 49px

Table Header.png

 

Table Row

Example
Style settings for quote lines in the Quote Line Editor. In the example below:

- Table row background color: Grey
- Table row font color: Black 
- Table row hover color: Red
- Table row font family: Salesforce Sans
- Table row font size: 14px
- Table row font weight: 400
- Table row font style: Italic
- Table row text decoration: None
- Table row border bottom style: Dashed
- Table row border bottom color: Light grey
- Table row border bottom width: 2px
- Table row line height: Normal
- Table row padding top: 10px
- Table row padding bottom: 10px

Theme - Table Row.png

 

QLE Row

Example
Style settings for quote line rows:

- Parent Line Row Font Color:
- Parent Line Row Font Style:
- Parent Line Row Font Weight:
- Parent Line Row Text Decoration:
- Component Row Font Color:
- Component Row Font Style: 
- Component Row Font Weight:
- Component Row Text Decoration: 
- Standalone Product Row Font Color
- Standalone Product Row Font Style:
- Standalone Product Row Font Weight:
- Standalone Product Row Text Decoration:

 

Groups

Example
Style settings for the Quote Line Group header section. In the example below:

- Group border color: Red
- Group border width: 30px
- Group header color: Black
- Group header border bottom color: Grey
- Group header border bottom width: 10px
- Group header font color: White
- Group header font family: Salesforce Sans
- Group header font size: 14px
- Group header font weight: Bolder
- Group header font style: Italic
- Group header text decoration: Underline

group header.png

 

Table Grouped Rows

Example
Style setting for the collapsible rows that display when users group by field in a Product search.

- Grouped row color: Blue
- Grouped row line height: Normal
- Grouped row padding top: 2px
- Grouped row padding bottom: 2px
- Grouped row border bottom color: Gray
- Grouped row border bottom width: 1px
- Grouped row border bottom style: Solid

theme 28 grouped rows.png

 

Feature Header Instructions

Example
Style settings for a feature's Additional Instructions text field. In the example below:

- Feature instructions font color: Red
- Feature instructions font family: Salesforce Sans
- Feature instructions font size: 20px
- Feature instructions font weight: 300
- Feature instructions font style: Italic
- Feature instructions text decoration: Underline
- Feature instructions top padding: 10px
- Feature instructions right padding: 10px
- Feature instructions bottom padding: 10px
- Feature instructions left padding: 10px

additional inst.png

 

Bundle Layout Header

Example
Style settings for the header above the configuration table when you configure a bundle. In the example below:

- Bundle layout header color: Blue
- Bundle layout font color: Black
- Bundle layout header font family: Salesforce Sans
- Bundle layout header font size: 1.5em
- Bundle layout header font weight: Lighter
- Bundle layout header font style: Italic
- Bundle layout header text decoration: Underline

Theme - Bundle Header.png

 

Forms

Example
Style settings for form input methods (textboxes, picklists, checkboxes and radio buttons). In the examples below:

- Textbox Background Color: Red
- Textbox Border Color: Green
- Textbox Border Style: Dotted
- Textbox Border Width: 5px
- Textbox Border Radius: 15px
- Textbox Border Height: 25px
- Textbox Top Padding: 10px 
- Textbox Right Padding: 15px
- Textbox Bottom Padding: `0px
- Textbox Left Padding: 15px
form theme textbox.png

- Picklist Background Color: Red
- Picklist Border Color: Black
- Picklist Border Style: Dashed
- Picklist Border Width: 5px
- Picklist Border Radius: 1 rem
- Picklist Border Height: 25px
- Picklist Top Padding: 10px
- Picklist Right Padding: 1rem
- Picklist Bottom Padding: 10px
- Picklist Left Padding: .4375rem
new picklist theme.png

- Checkbox Check Mark Color: Green
- Checkbox Background Color Checked: White
- Checkbox Background Color Unchecked: Yellow
- Checkbox Size: 10px
- Checkbox Border Color: Black
- Checkbox Border Style: Dashed
- Checkbox Border Width: 2px
- Checkbox Border Radius: 5px
forms checkbox.png

- Radio button color checked: Red
- Radio button color unchecked: Dark blue
new theme radio.png

 

Icons

Example
Style settings for icons. In the example below:

- Icon font color: Red
- Icon hover color: Green
- Icon disabled color
- Page loading icon color
theme desktop icons.png


 

Hyperlinks

Example
Style settings for hyperlinks within the quote line editor, such as "clear selections" option in a feature header.

- Hyperlink color
- Hyperlink active color
- Hyperlink disabled color
- Hyperlink hover color

 

Contract Selector

Example
These features hide the Skip button on the Existing Contracts page, which users see when performing an addon or amendment. Select these if you want to ensure your users associate an amended or add-on opportunity with an existing contract:

- Hide Skip Action (Add-on Workflow)
- Hide Skip Action (Amend Workflow)

 

Comments
by jenlefor
on ‎06-16-2017 03:30 PM

The Theme Editor Overview link should be: (the same as the Theme Editor  link)

 

https://community.steelbrick.com/t5/Get-Started-Knowledge-Base/Theme-Editor-Overview/ta-p/1848

Contributors