UI branding in SAP CPQ defines the look of the user interface, such as colors, images, and visual styles. While users can view the same products and pricing as others, their user interface can vary depending on the brand they belong to. Different user interfaces can be displayed to anonymous website visitors, internal users, and partners.
Changing the SAP CPQ Style
Changing the default look of SAP CPQ can be done through the available CSS files or creating new ones.
Rather than create a new template and customize JavaScript, it may be cost-effective to customize existing styling using CSS rather than creating customized web pages. In some cases, CSS is a better alternative to Knockout when editing background images and logos.
The file MyResponsiveStyles.css is a skeleton CSS file containing a bare CSS structural framework. To customize a brand's UI, download CSS file, update it, and upload again. Changes to the file are merged with the system CSS defined in the default UI. Your effective stylesheets will be a combination of these two CSS definitions. Attention must be paid to altering the behavior of system CSS classes. Use browser development tools to minimize the collateral impact of any UI re-styling. Ideally, there should be no impact. If you are creating new files, make sure the extension is .css.
For example, if an object or section of a CPQ page does not display in a responsive template, the CSS selector can easily locate the missing piece. CSS also allows you to exclude options from a dropdown list even if it is on a page and not normally displaying to administrators and developers.
