Custom styles framework (like clarity design or bootstrap) in plugin page

[r.baeris...@gmail.com]

Hello

The Docker Swarm plugin I maintain (https://github.com/jenkinsci/docker-swarm-plugin) contains a dashboard (separate page accessible from the sidebar). In that dashboard I am using an external UI library (VMWare Clarity Design).

The issue I am now facing is that some styles overwrite the jenkins styles as well. I would like to have that styles only applied to my content of the plugin.

One approach that was already in the plugin is by just adding a new html/head/body tag inside the jelly. That seems to actually work but it feels wrong to have two html tags in one page.

I also thought about using an iframe as content of my plugin page and use the srcdoc attribute to set the content to plain html. But I haven't tried that yet.

Did anyone ever have a similar issue or an idea how that could be solved?

Many Thanks

Roman

[Gavin Mogan]

for lighthouse plugin i just made it a standalone page.

https://github.com/jenkinsci/lighthouse-report-plugin/blob/master/src/main/resources/io/jenkins/plugins/LighthouseReportBuildAction/client.jelly

I think the iframe works great if its a single page, but once you involve navigation the iframe will be tricky.

Gavin

--
You received this message because you are subscribed to the Google Groups "Jenkins Developers" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jenkinsci-de...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/30e1c513-391f-47e0-b665-c304f9d9bcc5n%40googlegroups.com.

[r.baeris...@gmail.com]

Thanks for the feedback. I kind of like the jenkins header/footer. While the iframe solution worked as a proof of concept, I now switched to shadow DOM and that seems to work really well.