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.
- Install Simple Theme Plugin
- Go to the
JENKINS_HOME/userContent
directory - Create the
layout
directory - Create the
style.css
file, copy the contents provided below. - Customize the “content” text
- Put the logo of your instance to
JENKINS_HOME/userContent/layout/logo.png
. The logo should have 40px height. - Go to the global configuration of your CJP instance and find the Theme section there
- 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 */
#header .logo {
background: url(http://example.com/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;
}
5 Comments