Due to some maintenance issues, this service has been switched in read-only mode, you can find more information about the why

and how to migrate your plugin documentation in this blogpost

Skip to end of metadata
Go to start of metadata

Plugin Information

View Simple Theme on the plugin site for more information.

This plugin allows to customize Jenkin's appearance with custom
CSS and JavaScript. It also allows to replace the Favicon.


  • Use your own CSS.
  • Use your own JavaScript.
  • Replace the Jenkins Favicon.


Go to "Manage Jenkins" > "Configure System" > "Theme" - there are settings to define the theme: You can specify URLs for CSS, JavaScript and Favicon. Additionally, you can add simple CSS rules right here.


Some ready-made themes can be found on GitHub, these can also serve as examples for fully customizing the Jenkins appearance:

Version History

Version 0.5.1 (30 August, 2018)

  • JENKINS-53327: Fix Inclusion of extra CSS
  • Don't migrate empty fields

Version 0.5 (26 August, 2018)

  • New configuration layout: Allow an arbitrary number of theme elements (Old configuration should be migrated automatically, but a downgrade WILL loose settings)
  • Supports Configuration-as-Code
  • DEV: Support incrementals
  • DEV: Code is forced into Google Code Style

Version 0.4 (12 February, 2018)

  • New feature: Set favicon, contributed by Taiki Sugawara
  • New feature: Allow specifying simple CSS rules right on the settings page
  • Initial translation support (for all 4 strings (wink))
  • Parent update, minor cleanups
  • Added CI builds and a simple test
  • Don't apply the theme on pages generated by the Build Monitor Plugin

Version 0.3 (5 March, 2013)

  • Simple bump of parent version so that the plugin correctly identifies as a Jenkins plugin for people using custom update centers

Version 0.2 (29 July, 2011)

  • Initial release


  1. Unknown User (jlpinardon)

    Hello !

    First of all, thanks for the job !
    It is quite simple to use.

    But it is important to note that the custom files (at least in a Apache/Tomcat environment) must be stored within the webapps directory.
    Otherwise a security error is raised.
    So, I have created a custom dir in the webapps dir and put my css and js files within.

    I have successfully used the plugin with the custom css file.
    But I have a remark and a question.

    • As Jenkins does not define the DOCTYPE, the custom css cannot use some CSS like :before pseudo element.
      The plugin is not invovled with that, but it is important to be noted to avoid some disappointment
    • Concerning the javascript, my need was to change the Jenkins logo.
      So, I decided to add a js file with the following code :
      Changing Jenkins Logo
      window.onload=function() {
      function chgeLogo() {
              var imgs=document.getElementsByTagName("img");

    This works well for all pages but the jobs configuratin ones, and all the help displays as well.
    Once a job confoguration page was requested, or a helo () was clicked, the page display loop over and over with the LAODING message.
    I don't understand what could be wrong with such pages, but it is clearly related to the javascript, because all goes back OK once the js has been removed.

    Thanks to anybody who could help me for that.

    Best regards.

    1. Unknown User (geevez)

      Hey Jean-Luc  

      Thanks this help me get the logo changed with you java script.

      As for getting the config pages to display I referenced this page for help: http://roberthahn.ca/articles/2007/02/02/how-to-use-window-onload-the-right-way/

      I'm able to configure pages and not have the loading issues you where having.

      Changing Jenkins Logo
      function makeDoubleDelegate(function1, function2) {
              return function() {
                  if (function1)
                  if (function2)
      function chgeLogo() {
              var imgs=document.getElementsByTagName("img");
      window.onload = makeDoubleDelegate(window.onload, chgeLogo);
  2. Unknown User (mykro76)

    To access your .css locally (on the same server), drop it into the directory

    (Windows) C:\Program Files\Jenkins\userContent

    Then in Manage Jenkins > Configure System > Theme point it to the url:

    http://<jenkins url>/userContent/my-style.css

    I'm sure this is obvious to some but it took me a little while to discover so I thought it was worth mentioning.

  3. Unknown User (ericlong)

    This looks great.  Thanks for the plug in.  I am having a problem hopefully someone can help me solve.

    The CSS works fine but after a few refreshes of the page it goes back to the stock CSS.  

    Does anyone have an idea why this happens?  I am using Chrome v26

    Here is a copy of my CSS:

     body {
    background: #FFFFFF;
    /* IE10 Consumer Preview */ 
    background-image: -ms-linear-gradient(top, #0099D8 20%, #F8FAF0 45%);
    /* Mozilla Firefox */ 
    background-image: -moz-linear-gradient(top, #0099D8 20%, #F8FAF0 45%);
    /* Opera */ 
    background-image: -o-linear-gradient(top, #0099D8 20%, #F8FAF0 45%);
    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%,rgba(0,153,216,1)), color-stop(45%,rgba(458,250,450,1)));
    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-linear-gradient(top, #0099D8 20%, #F8FAF0 45%);
    /* W3C Markup, IE10 Release Preview */ 
    background-image: linear-gradient(to bottom, #0099D8 20%, #F8FAF0 45%); }
    /* Text color
    h1, h2, h3, h4, h5, h6 {
      color: #0099D8; }
    #top-panel {
      background: #0099D8; }
      #top-panel td#login-field span a {
        background: #0099D8; }
      #top-panel td #searchform a {
        background: #0099D8;
        height: auto;
        width: auto; }
      #top-panel td > a {
        background: url("http://website:8080/userContent/qajenkins.png") 0 0 no-repeat;
     display: block;
        height: 55px;
        width: 276px;
        margin: 10px 0 0 10px; }
        #top-panel td > a img {
          display: none; }
    #projectstatus {
      background: none; }
      #projectstatus tr:nth-of-type(odd) {
        background-color: #e5e5e5; }
        #projectstatus tr:nth-of-type(odd):hover {
          background-color: #f0f0f0; }
      #projectstatus tr:nth-of-type(even) {
        background-color: white; }
        #projectstatus tr:nth-of-type(even):hover {
          background-color: #f0f0f0; }
    #left-top-nav {
      border-left: none; }
    #side-panel {
      background: none; }
      #side-panel > div:not(#navigation) {
        display: none; }
      #side-panel .task a {
     display: inline-block;
        text-decoration: none;
        width: 10%; }
        #side-panel .task a + a {
          width: 83%;
          padding: 4px; }
          #side-panel .task a + a:hover {
            background-color: #e5e5e5; }
        #side-panel .task a:hover {
          text-decoration: underline; }
    #main-panel {
      background: none; }
      #main-panel > h1 {
        margin-top: 0; }
    #main-table {
      background-image: url("http://website:8080/userContent/NGH_Logo_COLOR.png") !important;
      background-position:right bottom !important;
    #description div {
      font-size: 1.0em; }
    #footer {
      border-top: 1px solid #ccc; }
    #view-message #description a img {
      padding-right: 2px; }
    1. Unknown User (xiaopan3322)

      I got the same problem with you, not found the root cause yet...hope the author can solve this problem, it's not good to my team...

  4. Unknown User (landoltjp)


    I created a very simple style.css to put up a custom logo and top bar (colours fitting into my company's website color scheme.)

     * OLB CSS Customization
     * 1) install the Jenkins Simple Theme Plugin
     * 2) install this in $JENKINS_HOME\.jenkins\userContent\css\style.css
     * 3) configure: URL of theme CSS = /userContent/css/style.css
     * Custom top bar.  This is the same size as the original, but you can
     * put whatever you want here. I preferred the repeating image
    #top-panel {
        background: url("/userContent/images/topbar.png") repeat-x;
        margin-bottom: 3pt;
        height: 34px;
     * Custom title, larger than the Jenkins default.  Make sure
     * the width and height match the size of your image.
    #top-panel td > a {
        background: url("/userContent/images/title.png") 0 0 no-repeat;
        display: block;
        width: 267px;
        height: 34px;
        margin-bottom: 3pt;
    /* Hide the default Jenkins image */
    #top-panel td > a img {
        display: none;

    As you can see it does not do a lot, but it was effective.

  5. Unknown User (ryayon)


      It seems this plugin doesn't work behind a reverse proxy.

      Maybe I need to change some parameters.

      I work with a nginx reverse proxy.

      Any idea?


  6. Unknown User (cognitiaclaeves)

    Just wanted to make a note that it's also possible to use a relative reference for the style sheet:

    I put my new style sheet in userContent/themestuff and then used this URL for it in the Simple Theme config: /userContent/themestuff/accents.css

    This way it's not dependent on the host part of the URL.

  7. Unknown User (yeungs)

    What is a way to make a custom text on the top middle of the header? I am not a CSS expert and tried to add a style.css without success. This is useful to display different Jenkins master name within my organization. It would also allow me to post "maintenance" schedule dates. Thanks in advance

    1. Unknown User (yeungs)

      Actually, I figured it out

      center text
      @charset “utf-8”;
      .logo span {
        display: none;
      .logo:after {
        content: 'Maintenance: YYYY:MM:DD HH:MM';
        font-weight: bold;
        font-size: 25px;
        position: relative;
        color: red;
        right: -440px;
        height: 40px;
        top: 0px;
        padding-top: 12px;
        display: block;
        color: white;


  8. Unknown User (gurce)

    I noticed that even though I successfully changed the favicon, when I try to make a bookmark of the jenkins-page in my browser, this bookmark will still use the original butler favicon.


    Also, I notice that when when I refresh my jenkins page, I still see the butler icon appear in the tab for a small fraction of a second before being quickly replaced with my new favicon. That makes me wonder if the browser's bookmark system will just make use of the first favicon it sees (and not the 2nd one that we specify to override it).

  9. Unknown User (psteiner)

    After upgrading Simple Theme Plugin from version 0.4 to 0.5 on Jenkins ver. 2.107.3, the following simple CSS rule saved in the Theme global properties no longer works. I tried deleting and recreating the rule with no success.

    .pipeline-annotated {
    display: none;

     The CSS rule suppresses pipeline output, as recommended in a comment on this issue:  JENKINS-41845 - Getting issue details... STATUS  

    Can you recommend a solution? Should I downgrade the plugin to version 0.4?

    1. Unknown User (tgr)

      This is indeed a bug, introduced by the refactoring work between 0.4 and 0.5: While https://github.com/jenkinsci/simple-theme-plugin/blob/simple-theme-plugin-0.4/src/main/resources/org/codefirst/SimpleThemeDecorator/header.jelly#L9-L11 and https://github.com/jenkinsci/simple-theme-plugin/blob/simple-theme-plugin-0.5/src/main/java/org/jenkinsci/plugins/simpletheme/CssTextThemeElement.java#L12 look the same, it seems Jelly helpfully removed the CDATA tags before, which it can't anymore, since the tags are inserted raw... Would you be so kind to open a new JIRA issue (if you don't want to, I'll handle that this evening)?

      1. Unknown User (psteiner)

        Hi Tobias, thanks for the quick confirmation of the bug. I opened JIRA issue  JENKINS-53327 - Getting issue details... STATUS  to report the bug.

  10. Unknown User (pappnase)

    The Plugin Mgmt in Jenkins LTS v2.138.1 says the latest Plugin version 0.5.1 is incompatible. Is this a real issue or false alarm?

    1. Unknown User (tgr)

      It probably says something like the screenshots on the wiki page Marking a new plugin version as incompatible with older versions, yes? This is normal. As written in the changelog of version 0.5, the configuration format was changed from the previous version, so it won't be possible to downgrade from 0.5 (or newer) to 0.4 (or older) without losing data. Otherwise the update should be fine.

      1. Unknown User (pappnase)

        Yes you're right, i misinterpreted the warning message. Updating worked without a problem.