Replace Jenkins Logo and Text to your choice in JenkinsUI

Often we have several Jenkins CI Servers and we always gets confused to determine them. Some times we may need to change the Logo and text to customize Jenkins UI to reflect your organization details. This post helps to you to change the header and Logo in Jenkins UI.

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 are the steps to customize your Logo and Header Text:

• 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 “Sample Project” 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 (Manage Jenkins → Configure System)
• In URL of Theme CSS specify the following path: <JENKINS_HOME>/userContent/layout/logo.png eg:http://localhost:8080/userContent/layout/logo.png

Below is the css code to be used. Make sure you make the required changes as mentioned above.

/* Custom style for Jnekins */
.logo img {
content:url(“<JENKINS_HOME>/userContent/layout/logo.jpg”);
/*change the path to your logo path*/
}

#jenkins-name-icon {
display: none;
}

.logo:after {
content: ‘Sample Project’;
font-weight: bold;
font-size: 40px;
font-family:”Brush Script MT”, cursive;
margin-left: 200px;
margin-right: 12px;
color: Aqua;
line-height: 40px;
}

jenkins art work picutres

Jenkins Artwork

Choose your color:

green, purple, yellow

1. Replace `` in the URL by the chosen color:

https://raw.githubusercontent.com/shdowofdeath/jenkins_css/master/material-${color}.css

1. Install Jenkins Simple Theme Plugin
2. Click Manage Jenkins
3. Click Configure System and scroll down to Theme
4. Set the CSS field to the generated URL.
5. Click Save

sharing is caring please share this link :)