Introduction to Themes in Power Pages
The theme in Power Pages determines the visual identity of your site. It includes color schemes, fonts, button styles, spacing, background colors, and other UI styling elements that define how your site looks and feels.
Themes help maintain design consistency across all web pages and ensure your branding is reflected accurately.
Power Pages provides a theme editor within the Design Studio, allowing both no-code and low-code users to define and apply styles.
Why Customizing a Theme Matters
- Brand Alignment: Ensures the site reflects your company’s branding.
- User Experience: Enhances navigation and readability.
- Professional Appearance: Gives a polished look across devices.
- Accessibility: Makes your site usable for all audiences.
Theme Customization: Step-by-Step
Step 1: Open Power Pages Design Studio
- Go to: https://make.powerpages.microsoft.com
- Select your site and click Edit.
- From the left-side panel, click Styling.
Step 2: Explore the Styling Panel
You’ll find four primary sections:
- Colors
- Typography
- Buttons
- Layout
Each of these sections allows detailed control over how your website elements appear.
Step 3: Customize Site Colors
Elements You Can Change:
- Primary color: Main branding color used for headings, links, and buttons.
- Secondary color: Used for highlights and accents.
- Text color: Controls body and heading text.
- Background color: Page background color.
- Link color: Applied to clickable text links.
Example:
If your company uses blue and white as primary colors:
- Primary:
#0033cc - Secondary:
#ffffff - Text:
#000000 - Background:
#f4f4f4 - Link:
#0066cc
You can use the color picker or manually input hex codes.
Step 4: Customize Fonts and Typography
Click the Typography section to configure:
- Font Family (e.g., Arial, Roboto, Segoe UI)
- Font Sizes for:
- Headings (H1, H2, H3)
- Paragraphs
- Buttons
- Font Weights (Regular, Bold)
- Line Spacing
Typography affects readability and design hierarchy. Choose fonts that are:
- Web-safe or Google Fonts
- Legible across devices
- Aligned with your brand identity
Step 5: Style Buttons
Buttons are a key part of interaction design. You can modify:
- Primary Button Color (fill, text color, border)
- Secondary Button Style
- Hover Effects (hover background and text color)
- Button Shape (rounded, square)
- Size & Padding
Example:
- Primary Button Fill:
#0033cc - Text:
#ffffff - Hover Fill:
#001a66 - Border Radius:
8px
Step 6: Adjust Page Layout
Within Layout, configure:
- Section Padding: Top and bottom spacing
- Column Gap: Space between columns
- Container Width: Fluid or fixed
- Alignment: Content centering, alignment for mobile view
This helps maintain responsive and well-structured content blocks across all screen sizes.
Step 7: Live Preview and Testing
- After making changes, click Preview to view updates without publishing.
- Test on different screen sizes (desktop, tablet, mobile).
- Verify readability, alignment, and contrast.
Step 8: Save and Publish Your Theme
Once satisfied:
- Click Save at the top right.
- Then click Publish to apply the new theme to your live site.
You can also clone themes for experimentation or create multiple themes for different portals under the same tenant.
Advanced Theme Customization with CSS (Optional)
If you need advanced control beyond the GUI:
- Use the Web Files entity in the Portal Management App.
- Create or modify a CSS file (e.g.,
custom.css) - Add the link reference in your site’s Header Web Template:
<link href="/webfiles/custom.css" rel="stylesheet" />
This allows control over:
- Custom animations
- Shadow effects
- Responsive grids
- UI tweaks not exposed in the theme editor
Use advanced CSS only if you’re confident, as it can override Design Studio settings.
Tips for Effective Theme Customization
- Keep it simple: Too many colors and fonts confuse users.
- Use contrast: Ensure text and background have enough contrast.
- Test accessibility: Check color combinations with accessibility tools.
- Be consistent: Use the same color codes and typography throughout.
- Document your styles: Maintain a brand style guide for future reference.
Common Use Cases for Custom Themes
| Use Case | Description |
|---|---|
| Company Branding | Match portal style to your corporate website or identity. |
| Client-Specific Themes | Provide a unique portal theme per client. |
| Event Portals | Use vibrant, themed colors and fonts for events or seasonal promotions. |
| Government/Public Sector | Meet accessibility and UI compliance requirements. |
| Multi-language Portals | Adjust typography and layout for international audiences. |