Unanswered

Reference CSS Web File in Header

(0) Share

Report

Posted on by jackrose

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.

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:

Customize & extend

I have the same question (0)

All responses (5)

Answers (1)

Verified answer

natalya 133 on at

Like (0)

Report
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

Was this reply helpful? Yes No
jackrose 6 on at

Like (0)

Report

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

Was this reply helpful? Yes No
natalya 133 on at

Like (0)

Report

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

Was this reply helpful? Yes No
jackrose 6 on at

Like (0)

Report

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 😄

Was this reply helpful? Yes No
natalya 133 on at

Like (0)

Report

Hi @jackrose ,

It's great you managed to add the new style to your quick form!
Thank you for answering.
NatGeo

Was this reply helpful? Yes No