Style your pages site

Power Pages contains a robust set of themes and tools to use to style your site. Choose from several preset themes that you can apply to your portal. Use these themes as a starting point and apply further customization with the styling menu.

The Styling workspace lets you apply global site styles. You can apply corporate branding updates, and review the changes in the preview on the right side of the app window. Styling offers 13 preset themes. For each theme, you can customize the color palette, background color, font styles, button styles, and section margins.

1. Open the design studio.

2. On the left pane, select Styling.

   

   • Note the list of themes in the Styling workspace. Further customization can be done with the styling menu.

3. Select one of the preset themes to see how the style is reflected on the canvas workspace to the right.

   • Each theme has its own color palette.

   • You can adjust the styling menu to make adjustments to each theme. Text options include font, weight, size, and color.

4. Choose between Save Changes or Discard Changes after you've made your edits.

   A modified theme will be noted next to the theme name unless or until a theme is reset to preserve changes.

Resetting a theme

To reset a theme to its original state, select the ellipsis (...) and then select the Reset to default option.

Viewing your page

To see the full page in the design studio, select the full page icon.

To see the site as it will appear in production, select the preview icon.

You can also use the viewport selector to choose from web, tablet, and mobile views of the workspace.

Theme mapping

Each color on the palette maps to a specific element on the page. The preset theme consists of nine colors and three slots for user-selected colors. If you customize elements, the mapping won't be correct unless the theme is reset.

To add a new color or to change an existing color, select the plus sign (+) in the color palette and choose your color using the color picker, hexadecimal value, or RGB values.

After a new color is added to the color palette, it can be used to color components in the context menu.

Note

For sites created using Power Pages prior to September 23, 2022 there is a known issue related to themes. More information: Adjusting the background color for your Power Pages site

See also

Use design studio
Create and design pages
Customize pages