Using colors to create visually appealing pages

Create engaging and visually appealing pages for your workplace by selecting the right colors and backgrounds for your workplace studio pages and components. Color customization is available for page background, design canvas background, text, links, and buttons. You can add a background image to a page, to the design canvas, and in content blocks.

Required license

DWP Advanced icon.png BMC Helix Digital Workplace Advanced

Before you begin

Create the page. For more information about how to create a page, add components, and configure them, see Creating-pages-in-the-studio.

Color management at different levels

You can define the colors for your workplace pages from the following places:

Application level from the Branding page. Specify the branding colors for BMC Helix Digital Workplace. Branding colors are global colors that by default apply to all studio pages and components. These brand colors, also called as theme colors, are configured as part of the application rebranding. Keep your workplace pages consistent by controlling the colors from only the Branding page. The colors specified on the branding page determine the colors used in rendering the UI elements, such as labels, buttons, links, and so on. For more information, see Rebranding-BMC-Helix-Digital-Workplace.
Page level from the page properties. Specify the colors at a page level. All components on the page are updated with the page colors. For more information, see To create visually appealing workplace studio pages through colors, images, and textured backgrounds.
Element level in the content block properties. Override the branding and page colors and select colors specific to an element of a content block. For more information, see To override the branding and page colors in a content block.

The following image shows how to change the Active color (used for links) at different levels. The branding color applies to all links in the application. The page color applies to all links on a page. The element color applies to all links in one text block in a content block.

Levels of color management, application level, page level, and element level

Important

From the branding page, you can change the theme colors. When you change the theme colors, all the pages and components using these colors are updated with the changes. For example, if you change the primary color from orange to red, the red color replaces the orange color in all pages and components where you have selected the primary color. However, when you use a custom color for the page or its components, the color persists forever, until you manually change it.

Color picker in studio pages

By using the color picker, you can apply the colors from the theme color palette or any color of your choice to the studio pages. The color picker is available for an element and page component to which you can add color, including the page background. The theme colors are the current branding colors that are specified on the Branding page. For more information about theme or branding colors, see Rebranding-BMC-Helix-Digital-Workplace.

The color picker has one of the following two titles, as shown in the table below:

Color picker title	Color scheme	This color picker is seen in
	Contains colors that reflect the branding colors	Page backgrounds and palette colors
	Contains colors that reflect the page level colors	Content blocks

Brand colors for buttons and links

The following image shows the color picker and where the first three colors are used.

Brand colors for statuses and alerts

The following image shows where you find the brand colors for statuses and alerts in the color picker.

Where are theme or palette colors used in page components

Button colors—used on buttons. Colors depend on the style of the button, whether primary, secondary, or tertiary.
Text colors—used to color the text in all components and component names. Text, such as the page navigation in the list view of an events block uses a secondary text color.
Active—used on all links and the filter options in events block.

The following image shows where colors are used:

To create visually appealing workplace studio pages through colors, images, and textured backgrounds

Page properties allow you to add background images and colors to the page and the content area to create contrast, highlight areas, and draw attention to the graphics and content on the page. Use images and colors to create common themes across pages and maintain consistent visual messaging and branding. Instead of using the default branding colors, you can select custom colors for an individual workplace studio page. The selected color scheme applies to all components that you add to the page. Note that page properties apply only to the page you are working on.

Tips

Do not use busy backgrounds because they might distract your user.
Maintain a good contrast between the background and text.
Ensure that the contrast does not affect readability.
Tile small images to fill the page to get a pattern or textured background.
Use brand colors to give a consistent look and feel to the pages.
Ensure that the images are sized properly, so that they render correctly in different screen sizes.
To create watermark of a background image, select the custom size option of the display options and size the image. Then, position the image as desired.

You can define the background for both, the page and the content area. The content area is the design canvas where you add page components. Page background can be a color, a textured image, or a gradient image. If you add a background image, you can configure it to fit, stretch, fill, or tile vertically, horizontally, or in both directions.

The following image shows the page and design canvas areas:

The following table describes how you can change the colors on your page through page properties:

Option	Content block
Retain the default theme, with dark text on a light background in content blocks.
Invert the color theme with light text on a dark background in content blocks.
Add background color or image to the page.	The following video shows how you can add a background color or image to a page:
Add color or image to the page and the design canvas.	The following video shows how you can add a background color or image to a page and its design canvas area:

To customize the color settings for components at a page level

When you change the colors at a page level, all components on the page are shown in the new color scheme.

To change the colors at the page level, click the Customize toggle button and select the colors for buttons, text, secondary text, and links.
Use the Customize toggle button to switch between the default colors and customized colors for the page.
If the customization toggle button is disabled and you save the page, all previous customizations are removed.
Save your configuration.

Important

Changes to the page color settings do not affect the color customization done at the component level.
Button colors can be customized down to the page level. You cannot customize individual button colors.

The following image shows custom colors for components selected from the page properties panel:

Customize button color via page properties

To compare and finalize the color scheme for your page

If you change the theme value from default to inverse or vice versa, the action removes all previous customizations and sets the colors to the theme default values.

Open the page properties panel of the page.
Click the Customize toggle button, and select the colors as desired for the different elements.
Save the page configuration after customizing the colors.
Click the Customize toggle button to compare between the default and custom color scheme.
Change the palette to view the color in the selected palette.
(Optional) Inverse the palette to swap the colors, for example, from light text on a dark background to dark text on a light background. Ensure that you do not save the inversed palette.
Refresh the page to see the custom color scheme that you have configured in Step 1.
Finalize the color scheme for your page and save your page.

To override the branding and page colors in a content block

You can override the page colors and specify custom colors for a content block.

Open the properties panel of the content block and customize the colors as you want.
If you select colors by their RGB or Hex values, changes to the page colors or a change in the palette do not affect any customization that you do in the content block.
After customizing the colors, if at any time you want to revert to the page colors, click the Reset option.
Note that the Reset option is visible only if you have changed or customized the color at the component level.

The following image shows the Reset option:

Reset option to set the element colors back to the page or theme default color

Tip

The color picker in a text block enables you to select colors for both, the text and the inline links. For inline links, the color picker is visible only when you enter an inline link.

Where to go from here

Duplicating-content

Defining-navigation-through-links-in-pages

Making-studio-pages-available-to-end-users