Skip to main content

Notifications

Community site session details

Community site session details

Session Id : bSKPeSSabfMWmPAOxVfmG0
Power Pages - Customize & Extend
Unanswered

Power Pages CSS complexity

Like (4) ShareShare
ReportReport
Posted on 21 Jun 2024 00:37:35 by 114

Hi all, 
Rhetorical question: why is the CSS in the latest Bootstrap 5 Power Pages templates so complex? It ignores the old coding principle DRY (don't repeat yourself). CSS works through the cascade and specificity, but there are so many layers of CSS that it's a headache to customize these Power Pages sites.

 

Bootstrap 5 is a great UI framework, yet Power Pages still ships with theme.css that overrides much of the Bootstrap 5 CSS, and then Portalbasictheme.css overrides those styles, and finally they include Preform.BootstrapV5.bundle.css which also overrides the styling of many elements again. Why do they do this? 

 

Couldn't Bootstrap 5 CSS provide base styling without so many overrides? All the Style Editor should do is modify colors, but instead it does a poor job of styling a handful of other selectors including fonts, buttons and tables. Theme.css should only modify the Power Pages elements not included in Bootstrap 5. It contains errors and incomplete attributes.


It's disappointing. CSS feels like an afterthought by the Power Pages team. I was hoping for a quality implementation of Bootstrap 5, but what we have is a band-aid patch. I hope eventually they refactor the entire implementation. In the meantime it's a time-consuming headache to customize Power Pages.

 

Cheers, Jady

Categories:
  • aofosu Profile Picture
    103 on 13 Aug 2024 at 13:48:46
    Power Pages CSS complexity
    We are developing with a blank template for our client, who must adhere to a strict "look & feel" ecosystem specific to their organization. We encountered similar issues with having to override much of the CSS in theme.css and portalbasetheme.css. To address this, the client provided their own CSS library. To minimize overrides, we disabled the theme.css web file but kept the bootstrap and portalbasetheme.css files.
    Going forward, our plan is to copy the necessary CSS from portalbasetheme.css, make the required changes, and then disable it entirely. Since we don't rely heavily on the design studio for styling, we are not concerned about seeing CSS errors in that app.
  • GWham Profile Picture
    58 Super User 2025 Season 1 on 12 Aug 2024 at 10:12:00
    Power Pages CSS complexity
    I agree, and find you spend most of your time overwriting styles created in theme stylesheets.
  • Christian Leverenz Profile Picture
    1,214 on 08 Aug 2024 at 14:52:12
    Power Pages CSS complexity
    Hi Jady,
    thanks for that post. I am more a backend developer and always thought i completely got the whole stuff wrong. But it seems that you have the same questions as me :-)
    Have fun,
      Christian

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Understanding Microsoft Agents - Introductory Session

Confused about how agents work across the Microsoft ecosystem? Register today!

Warren Belz – Community Spotlight

We are honored to recognize Warren Belz as our May 2025 Community…

Congratulations to the April Top 10 Community Stars!

Thanks for all your good work in the Community!

Leaderboard > Power Pages - Customize & Extend

#1
oliver.rodrigues Profile Picture

oliver.rodrigues 2 Most Valuable Professional

#1
Fubar Profile Picture

Fubar 2 Super User 2025 Season 1

#1
Ajlan Profile Picture

Ajlan 2

Overall leaderboard

Featured topics

Loading started
Loading complete