cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
jackrose
New Member

Reference CSS Web File in Header

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

1 ACCEPTED SOLUTION

Accepted Solutions
NatGeo
Resolver I
Resolver I

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

View solution in original post

5 REPLIES 5
NatGeo
Resolver I
Resolver I

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

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

NatGeo
Resolver I
Resolver I

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

 

 

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 😄

NatGeo
Resolver I
Resolver I

Hi @jackrose ,

 

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

Thank you for answering.

NatGeo

Helpful resources

Announcements
Carousel Community Blog

Check out the Community Blog

Read all about the most recent blogs in the community!

Carousel News & Announcements

What's New in the Community?

Check out the latest News & Events in the community!

Users online (3,080)