coconitro / jenkins-material-theme

Beautify your Jenkins with the Material Design theme!

jenkins-material-theme

Beautify your Jenkins with the Material Design theme!

Website: http://afonsof.github.io/jenkins-material-theme

So you love Jenkins but hate its ugly user interface and icons... Me too! Introducing Jenkins Material Theme. You can turn your favorite frog CI tool into a handsome prince in few steps!

Features

• Just one small css file (32K)
• Embed minified SVG images
• Multiple ways to install

Screenshots

Installation

Using your Jenkins Hosting

1. Install Jenkins Simple Theme Plugin

2. Upload the file http://afonsof.github.io/jenkins-material-theme/dist/material-light.css to your web server

3. Click Manage Jenkins

4. Click Configure System and scroll down to Theme

5. Specify the URL for material-light.css.

6. Click Save

Using this GitHub page

Skip step 2 and use this URL in step 5: http://afonsof.github.io/jenkins-material-theme/dist/material-light.css

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

1. Install the Stylish Chrome extension

2. Copy the content of the file http://afonsof.github.io/jenkins-material-theme/dist/material-light.css

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

4. Paste the theme css in the code box

5. Click in Specify and set your jenkins domain

6. Click in Save

7. Go to your Jenkins website and enable the theme in the Stylish Chrome t oolbar 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

You can publish the files on gh-pages with the following command:

grunt deploy

And you can find the file at:

• http://YOURUSER.github.io/jenkins-material-theme/material-light.css

Compatibility

• Simple Theme plugin 0.3
• Jenkins 1.636
• Firefox 3.5 [!]
• Chrome 4+
• Safari 4+
• Opera 15+
• It's not possible to support Microsoft IE or Edge because they don't implement css masks: http://caniuse.com/#feat=css-masks

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

##Thanks to

• 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