Style your pages site

[This topic is pre-release documentation and is subject to change.]

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.

    GUI with the Styling workspace menu option selected.

    • 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.

GUI with the reset to default option highlighted.

Viewing your page

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

GUI with the full page icon highlighted.

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

GUI with the preview icon highlighted.

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.

The color picker feature within portals.

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

See also

Use design studio
Create and design pages
Customize pages