Brand Styling

The Brand Styling global configurations allow you to modify the colors, texts, buttons, and links of pages and widgets to comply with and reflect branding guidelines.

Style Syntax and Standards

When defining your brand styling, be aware of the following syntax and standards to provide style configurations in the proper format:

Colors: Colors are represented with hex color codes, which includes a # character followed by a six-character alphanumeric string. Some color configurations also provide a graphical color selector which allows additional options to select the required color.
Fonts: Fonts are supplied with the font names or font family names. If a font name or font family includes a space, you must enclose the name in quotes, such as "Times New Roman". Additionally, multiple fonts and font families can be provided, and the first available font from left to right is used. This allows defining fallback fonts or font families if some fonts cannot be retrieved.
Lengths: Lengths are used to define styling options such as padding and heights. Lengths are represented in pixels and must use the format of a value followed by px. For example, to define a padding of 10 pixels, enter the value of 10px.

Note: If the required value for a configuration is unclear, hover over the information icon for the configuration to review applicable information about the configuration, including valid values.

Portal

The Portal configurations define branding guidelines that are applied across the web portal elements of Digital Self Service - Transactions. While other brand styling categories are applied to the widget components, Digital Self Service configurations apply to web portal elements such as the main navigation menu, the side navigation menu, and various footers displayed throughout the web portal. Refer to the help information available for each configuration option for additional information on how to define the configuration.

In addition to brand styling, web portal element configuration also requires global configuration as described in Global Configs and message configuration for labels as described in Messages.

Colors

The Colors configurations define color branding guidelines that are applied across the widgets. Each color definition is applied in particular scenarios. For example, the primary color is often used in main elements of a widget such as a border, main color highlighting and so on. Additional colors, such as the You color, are used within insights to highlight the parts of the insight that are applicable to the customer viewing the content.

Text

The Text configurations define font styling guidelines that are applied across the widgets. The Headings options control the messages that act as headers or titles of content, while the Body options control the other messages throughout widgets. The main styling option defines the supported font family. You can also define a color to apply to heading messages.

When defining fonts, provide the main font for your web portal in the left-most location of the list of fonts. This font is used as long as it can be retrieved successfully. You can provide additional fonts and font families as fallback font styling options, which are used in the event that some fonts cannot be retrieved. For example, the default value of "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif attempts to apply Helvetica Neue font formatting first. If that font cannot be retrieved, the system attempts to retrieve the next font or font family in the list. This continues until a font is successfully retrieved. In this example, the final definition of sans-serif font is used if no others can be retrieved.

Buttons

The Buttons configurations define button styling guidelines that are applied across the widgets. Buttons are the interface elements that customers can interact with to complete various actions such as navigating to another feature or experience, submitting information, or selecting a call to action. The look and feel of primary and secondary buttons can be defined, with primary buttons having more formatting options than secondary buttons. Primary buttons are often in the main content of a widget that customers interact with or support common actions. For example, customers using the Home Energy Analysis click a primary button to start the survey. Secondary buttons often are in locations that are less commonly viewed by customers or support less common tasks.

Links

The Links configurations define hyperlink branding guidelines that are applied across the widgets. You can define the color of hyperlinks as well as the color displayed when a customer hovers over a link.

Reviewing Style Modifications

Style modifications can impact a large number of items in your workspace. Therefore, there is no preview available when you modify a style. An alternative approach is to save styling changes, and then navigate to a widget that uses the styles in its definition. For example, you can modify the Neighbor Color and save your change. Then you can navigate to the Neighbor Comparison widget and view the preview. The preview includes a graph element for All Neighbors which uses the Neighbor Color and would reflect your styling change.

Since Digital Self Service configurations apply to the web portal elements rather than the widgets, reviewing Digital Self Service style modifications would also require publishing your workspace to an environment, and reviewing the modifications, as described in Publishing Configurations.