ccfenner / jenkins-themes

Themes for New Jenkins Design

Jenkins Themes

Improving your user experience

Updated for Jenkins version 2.222 and above

Website: https://jenkins-themes.alefnode.com/

Features

• Just one small css file (35K)
• Embed minified SVG images
• Multiple ways to install
• Customize the color and logo using the generator

Screenshots

Installation

Using your Jenkins Hosting

1. Choose your color:

2. Replace {{your-color-name}} in the URL by the chosen color: https://jenkins-themes.alefnode.com/dist/material-{{your-color-name}}.css

3. Download the generated URL

4. Upload the downloaded file to your web server

5. Click Manage Jenkins

6. Click Configure System and scroll down to Theme

7. Set the CSS field to the uploaded URL.

8. Click Save

Using Stylish (only you will be able to see the awesome theme)

1. Follow the step 1 and 2 of the previous method

2. Copy the content of the file downloaded file

3. Install the Stylish Chrome extension

4. Go to Stylish options and click in Write new style

5. Paste the theme css in the code box

6. Click in Specify and set your jenkins domain

7. Click in Save

8. Go to your Jenkins website and enable the theme in the Stylish Chrome toolbar icon

Development

CSS file are minified and compressed with Grunt. To prepare the environment:

npm install
grunt

This will generate the following file:

• dist/material-light.css

Compatibility

• Jenkins 2.222 and above

If you are experiencing issues please let me know! Also, feel free to contribute!

Thanks to

• Jenkins Theme for the Jenkins Themes based on repo
• Simple Theme Plugin for the Simple Theme plugin
• Google for the the material design inspiration and the icons
• Material Design Icons for some extra icons
• Stylish for making the test of new versions easy
• canon-jenkins for the base theme
• @Heldroe for Firefox and Microsoft support
• @bootstraponline for Jenkins native plugin