Overriding the default CSS for Power Pages (formerly Power Apps Portals) allows you to fully customize the visual appearance of your portal, aligning it with your brand’s design standards. Here’s a detailed step-by-step guide explaining how to override default portal CSS effectively.
1. Understanding Portal Styling Structure
Power Pages portals apply default styling through:
- The site’s default theme
- Bootstrap CSS framework
- Additional platform CSS files for layout, buttons, forms, etc.
To override the default styles:
- You either inject custom CSS directly via Web Files
- Or include styles via custom themes or web templates
2. Create a Web File for Your Custom CSS
To manage custom styles centrally:
Steps:
- Navigate to Portal Management App.
- Go to Web Files > New.
- Fill in the following:
- Name: CustomStyles.css
- Website: Select your portal site
- Partial URL: /css/CustomStyles.css
- Mime Type:
text/css - Notes: Optional documentation
- In the File section, upload your
.cssfile or paste the CSS content directly.
After saving and publishing the web file, your stylesheet will be accessible via:
https://<yourportal>.powerappsportals.com/css/CustomStyles.css
3. Include the Custom CSS in the Portal Header
To apply the stylesheet globally:
Steps:
- Go to Portal Management > Web Templates.
- Open the Header or Default template (whichever is used by your pages).
- Add this line inside the
<head>tag:
<link rel="stylesheet" href="/css/CustomStyles.css" />
- Save and clear cache from Portal Management > Web Link Sets if needed.
4. Write CSS to Override Default Styles
When writing custom styles, use stronger selectors or !important to override default and Bootstrap styles.
Examples:
/* Override portal button style */
.btn-primary {
background-color: #123456 !important;
border: none !important;
color: white !important;
}
/* Customize headings */
h1, h2, h3 {
font-family: 'Segoe UI', sans-serif !important;
color: #000000 !important;
}
/* Modify form inputs */
input[type="text"], textarea {
border: 1px solid #888 !important;
border-radius: 4px !important;
padding: 10px !important;
}
5. Best Practices for CSS Overrides
- Use specific class selectors (
.navbar-brand,.entity-form,.form-control) - Minimize the use of
!importantunless necessary - Test changes across devices and screen sizes
- Use browser dev tools (F12) to inspect default styles and target your overrides accurately
6. Optional: Use Custom Theme Builder
You can also build themes using Power Pages Design Studio:
- Go to Power Pages Studio > Styling > Theme
- Start with a base and customize colors, fonts, and spacing
- For deeper control, link your web file CSS
7. Clear Cache and Republish
After updating CSS or header templates:
- Clear portal cache by restarting the site in Power Platform Admin Center
- Publish all changes to ensure they reflect
8. Debugging CSS Overrides
If overrides don’t work:
- Confirm the custom CSS file is correctly linked in the header
- Check for selector specificity
- Use browser developer tools to trace style conflicts