Theme Options in 28.0

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


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




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.



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




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



Loading Mask

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




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



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

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

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



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




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

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

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



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:



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

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

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

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



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



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



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

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)


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

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