Replace Jenkins Logo and Text of your choice in JenkinsUI

Often times we have several Jenkins CI Servers and we always get 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 on your 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 in your jenkins host machine.
• 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 Autobahn Jenkins Platform */ .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; }