Jenkins界面配置：替换头部Logo及修改左侧面板标签

Hey there! Great question about tailoring Jenkins' UI to match your workflow's branding. Let's break down your two requirements and the most maintainable ways to implement them:

a) Replace the Header Jenkins Logo with Custom Text #

Directly editing Jenkins' core HTML or configuration files isn't recommended—any changes you make will get overwritten the next time you upgrade Jenkins. Instead, use the Simple Theme Plugin (a popular, well-supported tool for UI customization):

1. Install the plugin via Jenkins' Plugin Manager.
2. Go to Manage Jenkins > Configure System, scroll down to the "Theme" section.
3. Add a custom CSS snippet to hide the default logo and inject your text:

   /* Hide the default Jenkins icon */
   #jenkins-head-icon {
       display: none;
   }
   /* Add your custom header text */
   #header .logo::before {
       content: "Your Custom Workflow Title";
       font-size: 1.4em;
       font-weight: 600;
       color: #2c3e50; /* Adjust to your preferred color */
       margin-right: 10px;
   }
   

4. Save the changes, and refresh the Jenkins page—your custom text should replace the logo.

If you absolutely must edit files (not advised), you'd need to modify the header.jelly file in Jenkins' installation directory or unpacked WAR file, but remember these changes will be lost on upgrades.

b) Modify Left Panel Labels #

Again, editing core files isn't sustainable, but there are straightforward, upgrade-safe options:

• Rename "My View" directly: This is the easiest fix. Navigate to the "My View" page, click the Edit View button in the top-right corner, change the view name to "Workflow View", and save. No plugins needed here!
• Customize "Build History" and "Build Executor Status": Use the same Simple Theme Plugin to add a custom JavaScript snippet that swaps the labels:
  1. In the same "Theme" section under Configure System, add this JS code:

     document.addEventListener('DOMContentLoaded', function() {
         // Replace "Build History" with "Workflow History"
         const buildHistoryLinks = document.querySelectorAll('a:contains("Build History")');
         buildHistoryLinks.forEach(link => link.textContent = "Workflow History");
         
         // Replace "Build Executor Status" with "Workflow Executor Status"
         const executorStatus = document.querySelector('#executors a');
         if (executorStatus) executorStatus.textContent = "Workflow Executor Status";
     });
     

  2. Save and refresh—your left panel labels will update.

Alternatively, you could use the Scriptler Plugin to run custom scripts on page load, but Simple Theme Plugin handles both CSS and JS in one place, making it more convenient.

Key Takeaway #

Stick to plugins for UI customization—they're designed to persist through Jenkins upgrades and avoid breaking core functionality. Direct file edits should only be a last resort for one-off, non-critical changes.

内容的提问来源于stack exchange，提问作者Ranjit Kumar