Modify a Power Pages theme

  • 4 minutes

A theme describes the colors, fonts, section margins, and other design elements of a Power Pages site. Each site is provisioned with a theme defined by the selected template. Using Styling workspace elements, you can customize the theme to align the site appearance with the design requirements such as specific corporate branding. Now, let's explore key features and step-by-step instructions to help you effectively personalize your website by adding themes, custom style sheets, and custom templates.

Styling options

Power Pages offers 13 preset themes that serve as a starting point for styling your site. These themes include customizable elements such as color palettes, fonts, button styles, and section margins. You can apply these themes globally across your site or customize them further using the Styling workspace.

  • The Styling workspace allows you to:
    • Apply corporate branding updates.
    • Customize colors, fonts, and other design elements.
    • Preview changes in real-time on the right side of the app window.

Screenshot of GUI with the Styling workspace menu option selected.

Note

Each theme includes a predefined color palette, but you can adjust it to match your brand's identity.

If you need to start over, use the ellipsis (...) menu to reset the theme to its default state.

Screenshot of GUI with the reset to default option highlighted.

Add custom CSS

For more complex styling requirements, Power Pages design studio allows makers to upload custom CSS files. To update your site by adding custom CSS code, go to the Styling workspace, and select the ellipsis. You can now upload your custom CSS file.

Screenshot of the Manage CSS button.

Once the custom CSS file is uploaded, it applies to all themes, and the page canvas reflects the applicable styles. You can upload multiple CSS files and set their order as required. For more information about custom CSS, see Manage CSS files in Power Pages in product documentation.

Styling can also be applied to individual pages using Visual Studio Code for the Web editor. When a page is opened in the editor, three files are loaded: HTML, CSS, and JavaScript. Any changes in a CSS file apply to the selected page only.

Warning

Don't deactivate, delete, or change the display order of default CSS files like bootstrap.min.css, theme.css, or portalbasictheme.css. Doing so can cause errors.

Apply templates

For complex sites, standard layouts available in Power Pages design studio may not be sufficient. For these scenarios, Power Pages supports creating pages using custom layouts.

You can access the Portal Management app by selecting the ellipsis next to your site from the Power Pages home page.

Screenshot of menu to access the Portal Management app.

Because Power Pages is built on the foundation of Power Apps portals, it can use page templates created by makers and pro developers in Portal Management app. When a new Page Template is defined, it becomes available in the design studio as a custom layout.

Screenshot of window in which to add a custom layout to a page.

For detailed information on how to create custom page templates, go to Create and manage page templates and Store source content by using web templates in the Power Apps documentation.