Skip to main content

Notifications

Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages - Customize & Extend / Reference CSS Web File...
Power Pages - Customize & Extend
Answered

Reference CSS Web File in Header

(0) ShareShare
ReportReport
Posted on by jackrose 6

Hi all,

 

Hoping someone could give me some guidance on a CSS issue we're trying to resolve. We are wanting to replace the CSS stylesheet based on a query from the user field when they're signed in. We essentially have 4 brands of which we want to display the relevant stylesheet for depending on the brand of the user.

 

I have added the Web File as the documentation has suggested. However, whenever I try to reference the stylesheet (e.g. <link rel="stylesheet" id="maincss" href="/brand1-style.css" type="text/css">) I am presented with a 404 error. 

jackrose_0-1663942609378.png

 




I have tried linking the stylesheet to home page and this works, however we're trying to append the stylesheet using JavaScript so that we can change the stylesheet based on the brand field that is set against the user. Is there a way that we can change the style of the portal via web roles for example or is there a way that we can reference the stylesheet in the Head/Bottom content snippet and allow this to show throughout the portal?

 

Many thanks in advance

Categories:
Portals
  • natalya Profile Picture
    natalya 133 on at
    Re: Reference CSS Web File in Header

    Hi @jackrose ,

     

    It's great you managed to add the new style to your quick form!

    Thank you for answering.

    NatGeo

  • jackrose Profile Picture
    jackrose 6 on at
    Re: Reference CSS Web File in Header

    Hi @NatGeo,

     

    Thanks for coming back so quickly. We originally used the <style></style> tags and a web template so populate the information, but what we found was the the D365 Quick View Forms are processed as iframes rather than us referencing an external website.

     

    From what we can see, the iframe automatically picks up the stylesheets and contents of the head tags. But it was excluding the manual style tags. Turns out that I put the style tags in the wrong place, I created a new Head/Bottom content snippet and put our liquid language in there and it appears to have resolved the issues and pulls this through now and styles the quick view forms correctly.

    I will make your previous suggestion as a solution, as this is what we were already using and hopefully this can help others!

     

    Thanks again for your help 😄

  • natalya Profile Picture
    natalya 133 on at
    Re: Reference CSS Web File in Header

    Hi @jackrose,

     

    Could you please tell more about what you would like to achieve. 

    I understood that you embed a portal in another website by using an iframe and want to brand the portal based on the value of certain field? Is it correct?

     

    Thank you,

    NatGeo

     

     

  • jackrose Profile Picture
    jackrose 6 on at
    Re: Reference CSS Web File in Header

    Hi @NatGeo,

    Thanks for your update. So we currently use the <style></style> tags but we found that the styles then do not apply to iframes. We would prefer to use the file reference, but appreciate that it might not be possible. I've tried using the liquid to pull through the stylesheet, but it just says that it can't be found because we don't include the parent page.

     

    Many thanks,

    Jack

  • Verified answer
    natalya Profile Picture
    natalya 133 on at
    Re: Reference CSS Web File in Header

    Hi @jackrose,

     

    You can try to refer to your stylesheet based on the web role in Web Template.

    {% if user.roles contains 'Web Role' %} {% include 'snippet' snippet_name:'Style' %} / or use <style></style>
{% endif %}

     

    Hoping it helps.

     

    NatGeo

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

News and Announcements

Welcome to the Power Platform Communities
Check out the New Agent Creator Community

Quick Links

Michael Gernaey – Community Spotlight

We are honored to recognize Michael Gernaey as our June 2025 Community…

Congratulations to the May Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard >

Last month Overall leaderboard

Featured topics

Product updates

Microsoft Power Platform Community release plans