Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-44466

Allow plugins to override aspects of the Blue Ocean theme

    • Blue Ocean 1.2-beta3

      Problem

      It's currently difficult to make changes to the Blue Ocean CSS because it is compiled by the plugin when a release is prepared. Right now this makes the Blue Ocean CSS difficult to modify for theming purposes. Another plugin should be able to override any of the colors defined in `variables.less` to create a new "Theme" for Blue Ocean. It would also be nice if Blue Ocean made it easy to replace the logo with a custom logo.

      Solution

      • Make it easy to build the CSS based on of a primary brand color or two. Less allows you to define colors that have a relationship to with another. For example, the primary theme could define one color for the header (blue) and define the selection color to be a tint of the header (light blue). A derived theme could then specify it’s own header color (green) and the selection color would be automatically adjust to a tint of the header (light green). If colors are defined to have a relationship with each other it makes it easy for a theme to declare slight adjustments to the main theme without specifying all of the color values (which is harder to maintain as the base theme changes).
      • Make it easy to replace the logo with a custom logo. The theme should be able to provide one image for the entire logo, or a logo mark and text (for example, CJE has a 24x24 pixel logo mark with the text “CloudBees Jenkins Enterprise”). The provided logo (or logo mark) could be a gif, PNG, SVG.

      Example

      I've attached an example theme showing how CloudBees Jenkins Enterprise modifies the Blue Ocean theme to make the header dark teal. The goal of this story is to make it easy for the a plugin to supply:

      • A Logo mark
      • Logo text (In this example: “CloudBees Jenkins Enterprise”)
      • A header background color (In this example: #4e7c91)

      And everything is adjusted automatically, including the buttons and the selection colors.

      Our current approach for CJE accomplishes this by adding an additional stylesheet that adds rules to override the generated Blue Ocean CSS (bad approach). This is problematic because the CSS in the upstream Blue Ocean package can change without warning and we run the risk of having to re-theme components to get them to use the CloudBees theme.

      It would be much easier if we could supply our own “variables.less” and the Blue Ocean CSS would be generated based on our own variables.

      Technical Notes

      • JDL and other plugins export the less rather than compiled CSS
      • Blue Ocean compiles and serves less at runtime

       

          [JENKINS-44466] Allow plugins to override aspects of the Blue Ocean theme

          James Dumay added a comment -

          michaelneale this is one we need to unblock for the blue steel people

          James Dumay added a comment - michaelneale this is one we need to unblock for the blue steel people

          Josh McDonald added a comment -

          kzantow Do we need this ticket any more now that we have the UX project specifically to deal with these issues?

          Josh McDonald added a comment - kzantow  Do we need this ticket any more now that we have the UX project specifically to deal with these issues?

          Keith Zantow added a comment -

          It's a concern for v2 of some things, so I'll take this on, it won't happen right away and it doesn't need to.

          Keith Zantow added a comment - It's a concern for v2 of some things, so I'll take this on, it won't happen right away and it doesn't need to.

          Brandon Fryslie added a comment - - edited

          Is there any known timeline on when this might be implemented?  We would appreciate this feature a lot.    We use different color schemes to signal to users which environment Jenkins is running in.  e.g., a Jenkins running in 'dev' has different colors to that running in 'prod'.  This helps prevent issues where a user thinks they are running a job on their local 'dev' Jenkins instance but instead they are running it on the actual production instance.

          Implementing a field in the global configuration that lets us define our own CSS file to load from the 'userContent' directory of Jenkins would be straightforward and allow us to change things as needed.  This doesn't need to be complicated, we just need some way to inject some minor CSS into the page.

          Brandon Fryslie added a comment - - edited Is there any known timeline on when this might be implemented?  We would appreciate this feature a lot.    We use different color schemes to signal to users which environment Jenkins is running in.  e.g., a Jenkins running in 'dev' has different colors to that running in 'prod'.  This helps prevent issues where a user thinks they are running a job on their local 'dev' Jenkins instance but instead they are running it on the actual production instance. Implementing a field in the global configuration that lets us define our own CSS file to load from the 'userContent' directory of Jenkins would be straightforward and allow us to change things as needed.  This doesn't need to be complicated, we just need some way to inject some minor CSS into the page.

          Karl Parry added a comment -

          We use Jenkins in the same ways as brandonfryslie with different Banner colours per environment (mostly just red banner for Production). 

          As the default view is still the legacy UI it is not a concern for us yet but definitely a nice v2 feature. 

          Karl Parry added a comment - We use Jenkins in the same ways as brandonfryslie with different Banner colours per environment (mostly just red banner for Production).  As the default view is still the legacy UI it is not a concern for us yet but definitely a nice v2 feature. 

          We are using Blue Ocean with generic pipelines and custom backend (custom approvals & audits via rest calls) and a way to customize the main UI will be very useful. Just like Brandon, we use colors to help some users easily identify Test vs Production Environments.

          Ricardo Catalfo added a comment - We are using Blue Ocean with generic pipelines and custom backend (custom approvals & audits via rest calls) and a way to customize the main UI will be very useful. Just like Brandon, we use colors to help some users easily identify Test vs Production Environments.

          We use Jenkins Blue Ocean for ci with custom pipeline libraries that do a lot a complex "sh" step call. Each and everyone of theses steps have a custom label that I would like to use as the step name.

           

          Basically that only mean overriding result-item-label-name and result-item-label-name classes.

           

          It would be very convenient to be able to load a custom CSS (that replace or overrride the existing one) instead of having to recompile the plugin

          Nathan Delhaye added a comment - We use Jenkins Blue Ocean for ci with custom pipeline libraries that do a lot a complex "sh" step call. Each and everyone of theses steps have a custom label that I would like to use as the step name.   Basically that only mean overriding result-item-label-name and result-item-label-name classes.   It would be very convenient to be able to load a custom CSS (that replace or overrride the existing one) instead of having to recompile the plugin

          Is there any known timeline on when this might be implemented?  We would appreciate this feature a lot.     

          Abdennour Toumi added a comment - Is there any known timeline on when this might be implemented?  We would appreciate this feature a lot.      

          Mark Waite added a comment -

          There is not any known timeline when this might be implemented abdennour.

          Jeremy Hartley stated in a Nov 2019 message to the Jenkins Developers mailing list:

          We have started a project to revamp the Jenkins User Experience and launched a new User Experience Special Interest Group (SIG) to involve the open source community in this process.

          CloudBees does not believe that Blue Ocean is the most appropriate vehicle with which to make these changes. As such, we will focus on alternative approaches and we will not be working on any major new functionality within Blue Ocean.

          As we implement improvements to the Jenkins UI and UX, the Blue Ocean pipeline experience will remain relevant to users for quite some time. The work on the new UX will be prioritised and due to the relative modernity of the Blue Ocean pipeline UX, it is not a candidate to be replaced early on in the process. During this time we will selectively address significant security issues and functional defects.

          As a part of the Jenkins OSS project, we encourage community contributions that resolve functional issues and add small enhancements to Blue Ocean. We intend to merge worthy community PRs and release these at a regular cadence.

          Mark Waite added a comment - There is not any known timeline when this might be implemented abdennour . Jeremy Hartley stated in a Nov 2019 message to the Jenkins Developers mailing list : We have started a project to revamp the Jenkins User Experience and launched a new User Experience Special Interest Group (SIG) to involve the open source community in this process. CloudBees does not believe that Blue Ocean is the most appropriate vehicle with which to make these changes. As such, we will focus on alternative approaches and we will not be working on any major new functionality within Blue Ocean. As we implement improvements to the Jenkins UI and UX, the Blue Ocean pipeline experience will remain relevant to users for quite some time. The work on the new UX will be prioritised and due to the relative modernity of the Blue Ocean pipeline UX, it is not a candidate to be replaced early on in the process. During this time we will selectively address significant security issues and functional defects. As a part of the Jenkins OSS project, we encourage community contributions that resolve functional issues and add small enhancements to Blue Ocean. We intend to merge worthy community PRs and release these at a regular cadence.

            kzantow Keith Zantow
            tscherler Thorsten Scherler
            Votes:
            10 Vote for this issue
            Watchers:
            17 Start watching this issue

              Created:
              Updated: