Creating a custom theme with brand guidelines

Building a custom theme in Power Pages ensures that your web portal aligns visually with your organization’s brand guidelines—covering colors, fonts, logos, button styles, spacing, and more. A consistent brand theme boosts credibility, user experience, and trust.

Below is a comprehensive guide (approx. 1000 words) explaining how to create, apply, and manage a custom theme in Power Pages with respect to branding rules.

1. Understand the Branding Requirements

Before you start customizing, gather:

Brand color palette (HEX or RGB)
Typography (font family, weight, size)
Logos and imagery
Button styles, spacing, and icon usage
Brand tone (minimalist, vibrant, professional, etc.)

Ensure you have the organization’s official brand guidelines PDF or document for reference.

2. Open Power Pages Design Studio

Go to https://make.powerpages.microsoft.com
Open your site.
Navigate to “Styling” from the left navigation pane.
Under Themes, you’ll see predefined templates and the option to create a new custom theme.

3. Create a New Custom Theme

Click on “+ New Theme”
Name your theme (e.g., “Contoso Brand Theme”)
Start from a base template or from scratch.

4. Customize Theme Elements

Colors

Update these to match brand guidelines:

Primary color: Buttons, links, highlights
Secondary color: Accents
Background color: Page or section backgrounds
Text colors: Main text, headings, links

Example:

--primary-color: #0047AB;
--secondary-color: #FFC107;
--background-color: #FFFFFF;
--text-color: #1A1A1A;

Fonts and Typography

If you have a custom font:

Add it via CSS @import (e.g., from Google Fonts)
Apply it in the theme’s CSS file

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}

Define sizes for:

Headings (h1–h6)
Paragraph text
Button text

Buttons and Forms

Style buttons with custom properties:

.btn-primary {
  background-color: var(--primary-color);
  color: white;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.btn-primary:hover {
  background-color: #003399;
}

For input fields:

input[type="text"], select, textarea {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
}

Header and Footer

In the Theme CSS or web template file:

.site-header {
  background-color: var(--primary-color);
  color: white;
  padding: 1rem 2rem;
}

.site-footer {
  background-color: #222;
  color: #ccc;
  padding: 2rem;
}

Include logos and favicons according to brand:

Upload in Web Files
Reference them in the web template header via Liquid

<img src="/path-to/logo.png" alt="Company Logo" class="header-logo">

5. Use Web Template for Advanced Control

Sometimes you need more customization. Power Pages allows editing the main layout using Web Templates.

Edit the Header, Footer, or Default layout:

Go to Portal Management App
Navigate to Web Templates
Modify the HTML + CSS with custom classes following brand specs

Use Liquid syntax to maintain data binding:

<div class="hero-section" style="background-color: var(--primary-color);">
  <h1>{{ page.title }}</h1>
  <p>Welcome to our branded Power Pages portal</p>
</div>

6. Apply the Theme to Your Site

Once your theme is ready:

Click Apply Theme
Preview on desktop, tablet, and mobile
Adjust responsiveness using media queries

Example media query:

@media (max-width: 768px) {
  .btn-primary {
    width: 100%;
  }
}

7. Save and Test

Save your theme
Publish the site
Open in incognito or different browsers to check consistency
Test color contrast and accessibility (use tools like WebAIM)

8. Manage Themes with Multiple Brands (Optional)

If your portal serves multiple audiences or brands:

Create multiple themes
Apply themes conditionally using Liquid, JavaScript, or separate web pages

liquidCopyEdit{% if user.contact.firstname == "Contoso" %}
<link rel="stylesheet" href="/webfiles/contoso-theme.css">
{% endif %}

9. Best Practices

Keep CSS modular (create separate classes for sections)
Use variables (--primary-color) for easier updates
Stick to one primary and one accent color for clean design
Optimize logo file size and use SVG for scalability
Always test on mobile (Power Pages is mobile-first)

10. Optional: Use Theme JSON (Advanced)

Themes in Power Pages can be managed using JSON configuration files exported and imported through CLI or source control tools for ALM (Application Lifecycle Management).

Use the Power Platform CLI:

pac paportal download

Then modify /themes/custom.css and redeploy.