Changing Jenkins Header Color

Please visit the newer version of this article if you like. This article may not work for newer version of Jenkins.

When dealing with multiple instances of Jenkins, you sometimes forget which server you are working on. Imagine a situation where you thought you were testing a job on a pre prod Jenkins server but you executed the job against your production system and the system is completely down. It’s a scary thought.

By changing a little bit of the UI, you can easily tell which Jenkins server you are on. Here are the steps.

  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.
    div#header
    {
    background:red;
    }
  8. Save the change and when you refresh your browser, the header color has changed.
  9. There are many named colors available that you can use for your header color. Take a look here.

Hope this reduces your (and my) mistakes.