Theming web templates and layouts

Theming in Power Pages (formerly Power Apps Portals) allows you to craft a consistent visual identity by customizing layouts and web templates using CSS, HTML, and Liquid. This enables full control over the structure, look, and feel of your portal pages.

Here’s a step-by-step breakdown on how to apply theming using web templates and layouts:

1. Understand the Role of Web Templates and Page Layouts

Web Template:

A reusable HTML structure containing Liquid, HTML, CSS, and JavaScript.
Defines the layout and content rendering logic for multiple web pages.

Page Layout:

Uses a Web Template to determine structure.
Assigned to Web Pages, it dictates how content blocks are placed and styled.

2. Create or Customize a Web Template

Steps:

Go to Portal Management App > Web Templates
Click + New to create a new template.
Fields to fill:
- Name: (e.g., CustomMainLayout)
- Website: Choose your portal site
- Source: Add your layout code here (HTML + Liquid)

Example Web Template:

<!DOCTYPE html>
<html>
<head>
  <title>{{ page.title }}</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="/css/CustomStyles.css" />
</head>
<body>
  <header>
    {% include 'Header' %}
  </header>

  <main>
    {{ page.content }}
  </main>

  <footer>
    {% include 'Footer' %}
  </footer>
</body>
</html>

You can include other web templates (Header, Footer) for modular design.
CSS files are injected via <link> to apply custom themes.

3. Create Page Layouts with Custom Web Template

Navigate to Portal Management > Page Layouts
Click + New
Set:
- Name: e.g., HomeLayout
- Web Template: Select your CustomMainLayout
- Website: Choose your portal
- Save

Now this layout is ready to be used by any portal page.

4. Assign Page Layout to a Web Page

Go to Portal Management > Web Pages
Open any page (e.g., Home, Contact Us)
In the Page Template section:
- Choose a Page Template that uses your Page Layout
- If none exists:
  - Go to Page Templates, create a new one
  - Link it to your custom Page Layout
Save and publish

5. Apply Theming via CSS

Create a Web File to store your CSS styles:

Go to Web Files > + New
Fields:
- Name: CustomStyles.css
- Partial URL: /css/CustomStyles.css
- Mime Type: text/css
- File: Upload your custom .css

Sample CSS:

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f5f5f5;
}

header, footer {
    background-color: #004080;
    color: white;
    padding: 1rem;
}

main {
    padding: 2rem;
}

Link this file in the Web Template <head> section as shown before.

6. Use Liquid for Dynamic Theming

You can use Liquid logic to apply different themes conditionally:

{% if user.roles contains "Admin" %}
  <link rel="stylesheet" href="/css/admin-theme.css" />
{% else %}
  <link rel="stylesheet" href="/css/user-theme.css" />
{% endif %}

This lets you render unique stylesheets based on user roles or login state.

7. Use Bootstrap or Your Own Grid System

Power Pages comes with Bootstrap 3 by default. You can:

Override it by loading Bootstrap 5 or custom CSS grid
Design responsive layouts using:

<div class="container">
  <div class="row">
    <div class="col-md-8">Main content</div>
    <div class="col-md-4">Sidebar</div>
  </div>
</div>

8. Testing and Debugging

Use browser dev tools (F12) to inspect layout structure and applied styles.
Use the Network tab to confirm your custom CSS file loads.
Use clear cache or restart portal from Admin Center if changes are delayed.

9. Maintain Clean Theme Structure

Keep your structure modular:

One Base Web Template
Reusable Header, Footer, Sidebar templates
One or more Theme-specific CSS files

Use meaningful naming like:

Header_BrandA
Footer_Campaign2025
Layout_PromoBanner

10. Optional: Use Design Studio for Styling

In Power Pages Studio:

Navigate to Styling > Theme
You can change fonts, colors, padding, and more visually
Less control than custom templates but faster for non-dev users