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

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

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

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/30e1c513-391f-47e0-b665-c304f9d9bcc5n%40googlegroups.com.
Reply | Threaded
Open this post in threaded view
|

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

Gavin Mogan
for lighthouse plugin i just made it a standalone page.


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

Gavin

On Wed, Sep 2, 2020 at 10:35 PM [hidden email] <[hidden email]> wrote:
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

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/30e1c513-391f-47e0-b665-c304f9d9bcc5n%40googlegroups.com.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/CAG%3D_DusGRCEE0SGyFK-K99dQmG3LkAPVJfZ%2BGnWuKscYxQ129w%40mail.gmail.com.
Reply | Threaded
Open this post in threaded view
|

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

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.

On Thursday, September 3, 2020 at 7:51:56 AM UTC+2 [hidden email] wrote:
for lighthouse plugin i just made it a standalone page.


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

Gavin

On Wed, Sep 2, 2020 at 10:35 PM [hidden email] <[hidden email]> wrote:
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

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/30e1c513-391f-47e0-b665-c304f9d9bcc5n%40googlegroups.com.

--
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 [hidden email].
To view this discussion on the web visit https://groups.google.com/d/msgid/jenkinsci-dev/c245bc53-9f32-4849-9940-bc0a3c61ff14n%40googlegroups.com.