Issue

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

Environment

• CloudBees Jenkins Enterprise - Managed Master (CJE-MM)
• CloudBees Jenkins Team (CJT)
• CloudBees Jenkins Platform - Client Master (CJP-CM)
• 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 CloudBees Jenkins Enterprise instance with the modified header.

Please note that CJE and CJOC layouts slightly differ from open-source Jenkins instances, so the existing themes for Simple Theme Plugin may work incorrectly.

Customizing instance headers

Below you can find a list of steps, which allow customizing headers of both
CloudBees Jenkins Enterprise and CloudBees Jenkins Operations Center.
These steps apply to the versions 1.625.x and 1.642.x, steps for other versions
may differ.

1. Install Simple Theme Plugin
2. Go to the JENKINS_HOME/userContent directory
3. Create the layout directory
4. Create the 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 CJP instance and find the Theme section there
8. In URL of Theme CSS specify the following path: http://example.com/userContent/layout/logo.png

Example of Simple Theme Plugin configuration:

style.css code:

/* Custom style for CloudBees Jenkins Platform */
.logo img {
  content:url("http://example.com/userContent/layout/logo.png");
}

.logo span {
  display: none;
}

.logo:after {
  content: 'Jenkins. My instance (powered by CJE)';
  font-weight: bold;
  font-size: 20px;
  position: relative;
  color: black;
  right: -370px;
  top: -28px;
  display: block;
  color: white;
  background-image: url("http://example.com/userContent/layout/logo.png");
  background-position-x:right;
  background-position-y:top;
}