How to apply custom styling to my instance?

Issue

How to apply custom styling to my CloudBees Jenkins Platform instance?

Environment

Resolution

Custom styling can be applied via modification of the CSS structure being used by Jenkins.
Simple Theme Plugin is the most popular approach to customizing CSS outputs.

Below you can find a screenshot of a CloudBees CI instance with the modified header:

Output example

Please note that controller and Operations Center layouts slightly differ from open-source Jenkins instances, so the existing themes for Simple Theme Plugin may not work correctly.

Customizing instance headers

Below you can find a list of steps which allow customizing the headers of both CloudBees CI controllers and Operations Center.

  1. Install Simple Theme Plugin
  2. Go to the JENKINS_HOME/userContent directory
  3. Create the layout directory
  4. Create the layout/style.css file, copy the contents provided below.
  5. Customize the “content” text
  6. Put the logo of your instance to JENKINS_HOME/userContent/layout/logo.png. The logo should have 40px height.
  7. Go to the global configuration of your instance and find the Theme section there
  8. In URL of Theme CSS specify the following path: JENKINS_URL/userContent/layout/style.css

Example of Simple Theme Plugin configuration:
Simple Theme Plugin configuration

In the below examples, replace JENKINS_URL with the URL of your Jenkins controller.

style.css code - versions 2.249.1 and newer:

/* Replace stock logo with a custom image */
#header .page-header__brand .logo {
    background: url(JENKINS_URL/userContent/layout/logo.png) no-repeat 10px center;
}

/* Optional - Remove 'CloudBees CI' string */
#jenkins-home-link {
  display: none;
}

/* Optional alternative - replace 'CloudBees CI' string with something else */
#jenkins-home-link {
  visibility: hidden;
}
#jenkins-home-link:before {
  content: "My Sample Text";
  visibility: visible;
}

style.css code - versions older than 2.249.1:

/* Custom style for CloudBees Jenkins Platform */
#header .logo {
    background: url(JENKINS_URL/userContent/layout/logo.png) no-repeat 10px center;
}

#jenkins-home-link {
    font-size:0;
}

#jenkins-home-link:after {
  content: 'Jenkins. My instance';
  font-size:20px;
}

Have more questions?

5 Comments

  • 1
    Avatar
    Rajasekaran Radhakrishnan

    Hi Team,

    I tried to configure this simple theme plugin but i am seeing this logo two times. Can you suggest how to fix this issue.

     

  • 0
    Avatar
    Kalyan Bhave

    thanks for the beautiful blog. I used above steps and applied my theme to Jenkins. But What i observed is after I logout from Jenkins, .css file is not loading. Jenkins version is 1.651.3. Any help would be appreciated.

  • 0
    Avatar
    Peter Kelley

    @Kalyan Bhave - One thing I noticed where my installation seemed to be different from the example was that the "Theme" configuration entry was actually under the "Configure System" menu and not under the "Global Tool Configuration". Try out the url that you put in there in a browser to see if you can reach the stylesheet. 

    Another point was that the example stylesheet url points to "localhost" - try putting in your server URL instead. You generally shouldn't use "localhost" (as in the example) but the path to reach the jenkins server.
      

  • 0
    Avatar
    Peter Kelley
    Edited by Peter Kelley
  • 0
    Avatar
    Mike Mitterer

    The suggest URL is: 

    1. http://localhost:8080/jenkins/userContent/layout/style.css

    In my case this didn't work.

    The right URL is: 

    1. http://localhost:8080/userContent/layout/style.css

    I'm using Jenkins 2.89

Please sign in to leave a comment.