Issue

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

Environment

• CloudBees CI (CloudBees Core)
• CloudBees CI (CloudBees Core) on modern cloud platforms - Managed Master
• CloudBees CI (CloudBees Core) on modern cloud platforms - Operations Center
• CloudBees CI (CloudBees Core) on traditional platforms - Client Master
• CloudBees CI (CloudBees Core) on traditional platforms - Operations Center
• CloudBees Jenkins Platform - Client Master
• CloudBees Jenkins Platform - Operations Center
• CloudBees Jenkins Distribution
• Jenkins LTS
• Simple Theme Plugin

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:

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:

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;
}