Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

power-pages-docs/power-pages-docs/getting-started/style-site.md

Go to file
 
 
Cannot retrieve contributors at this time
Style your pages site Resetting a theme Viewing your page Theme mapping See also
76 lines (47 sloc) 3.52 KB
Raw Blame
Open in GitHub Desktop
title description author ms.topic ms.custom ms.date ms.subservice ms.author ms.reviewer contributors
Style your Power Pages site
Learn how to style your Power Pages site.
rob-moyer
conceptual
10/05/2022
robmoyer
kkendrick
rob-moyer
nickdoelman
ProfessorKendrick

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.

    :::image type="content" source="media/style-site/styling-workspace.png" alt-text="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.

:::image type="content" source="media/style-site/reset-default.png" alt-text="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.

:::image type="content" source="media/style-site/full-page.png" alt-text="GUI with the full page icon highlighted.":::

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

:::image type="content" source="media/style-site/preview-icon.png" alt-text="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.

:::image type="content" source="media/style-site/color-picker.png" alt-text="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.

[!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