Revisiting Changing Jenkins Header Color

I previously wrote a blog article about changing Jenkins’ header color so that we can easily distinguish which instance of Jenkins you are dealing with. Some readers reported that the snippet to change the color was not working anymore after upgrading Jenkins. (Thank you for letting me know!)

Here are the complete steps again.

  1. Navigate to Manage Jenkins.
  2. Click Manage Plugins.
  3. Click Available tab.
  4. Install “Simple Theme” plugin by clicking Install without Restart button.
  5. Go to Manage Jenkins -> Configure System.
  6. Click Add under Theme section and select Extra CSS.
    jenkins simple theme
  7. Enter the following simple CSS to change the background color of the header. This is what has changed from the previous article.
    #header
    {
    background:red;
    }
  8. Save the change and when you refresh your browser, the header color has changed.

I don’t remember the exact HTML before but here is what the header looks like now and the CSS makes sense.

When I left my previous job, I didn’t have a Jenkins instance to test it out but now that I provisioned my own instance with Docker, I can test things with Jenkins again.

Author: admin

A software engineer in greater Seattle area

Leave a Reply

Your email address will not be published. Required fields are marked *