Sunday 10 September 2023

Jenkin: Change the theme or appearance

To change the theme or appearance of the Jenkins web interface, you can use Jenkins plugins that provide themes or styles. One such plugin is the "Simple Theme Plugin," which allows you to customize the CSS and JavaScript of the Jenkins UI. Here's how you can change the theme in Jenkins:


1. Log into Jenkins: 

    Open your web browser and access your Jenkins instance by navigating to (In my case)                             http://mongodb:8080


2. Install the Simple Theme Plugin:

    a. Click on "Manage Jenkins" in the Jenkins dashboard.
    b. Select "Manage Plugins" from the dropdown menu.
    c. Go to the "Available" tab.
    d. In the "Filter" box, type "Simple Theme Plugin."
    e. Check the checkbox next to "Simple Theme Plugin."
    f. Click the "Install without restart" button.






3. Create or Edit a Theme:

    a. After the plugin is installed, go back to the Jenkins dashboard and click on "Manage Jenkins"                 again.
    b. Select "Configure System."
    c. Scroll down to the "Theme" section. Here, you can add or edit themes.


4. Add/Edit a Theme:

    a. Click on the "Add" button to add a new theme or edit an existing one.
    b. Provide a name for your theme in the "Name" field.
    c. In the "URL of theme CSS" field, you can specify the URL of a CSS file that defines your custom     styles. This file should be hosted on a web server accessible to your Jenkins server.
    d. You can also add JavaScript files to customize the behavior of the Jenkins UI.
    e. Click "Save" to save your theme.

CSS URL where you can download/use theme: http://afonsof.com/jenkins-material-theme/


5. Apply the Theme:

    a. Once you've created or edited a theme, you can apply it to your Jenkins instance.
    b. Go to the Jenkins dashboard and click on your username in the top right corner.
    c. Select "Configure" from the dropdown menu.
    d. In the "User Themes" section, select the theme you created or edited from the "Theme" dropdown         list.
    e. Click "Save" to apply the theme.


6. View the New Theme:

Refresh your Jenkins dashboard, and you should see the changes applied by your custom theme.


Please note that modifying the Jenkins UI through custom themes can be powerful but should be used judiciously. 

Ensure that any changes you make do not compromise the functionality or security of your Jenkins instance. Additionally, be aware that Jenkins may undergo updates, and custom themes may need to be maintained accordingly.

No comments: