jorg3lucas / jenkins-modern-themes Goto Github PK

View Code? Open in Web Editor NEW

23.0 2.0 10.0 4.72 MB

Home Page: https://jorg3lucas.github.io/jenkins-modern-themes/

License: MIT License

JavaScript 24.77% Less 75.23%

jenkins-material-theme theme-plugin

jenkins-modern-themes's Introduction

Beautify your Jenkins with the Material Design theme!

Website: https://jorg3lucas.github.io/jenkins-modern-themes

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

Features

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

Screenshots

Installation

Using this GitHub page (recommended) (auto-updated)

Choose your color:
Replace {{your-color-name}} in the URL by the chosen color: https://raw.githack.com/Jorg3Lucas/jenkins-modern-themes/main/dist/modern-{{your-color-name}}.css
Install Jenkins Simple Theme Plugin
Click Manage Jenkins
Click Configure System and scroll down to Theme
Set the CSS field to the generated URL.
Click Save

Using your Jenkins Hosting

Follow the step 1 and 2 of the previous method
Download the generated URL
Upload the downloaded file to your web server
Follow the steps 3 to 7 of the previous method using your uploaded file as URL in step 6

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

Follow the step 1 and 2 of the previous method
Copy the content of the file downloaded file
Install the Stylish Chrome extension
Go to Stylish options and click in Write new style
Paste the theme css in the code box
Click in Specify and set your jenkins domain
Click in Save
Go to your Jenkins website and enable the theme in the Stylish Chrome toolbar icon

Development

CSS file are minified and compressed with Grunt. If you have Node & yarn installed, you can build everything with:

yarn install
yarn test

This will generate the following file:

dist/modern-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 Material 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

jenkins-modern-themes's People

Contributors

Stargazers

Watchers

Forkers

jhnc-oss offa morganchristiansson diegoprofeta ryolambert imdevin567 roc6 badcure wgoyer wp-jackliu

jenkins-modern-themes's Issues

change icon size doesn't work

At the bottom of the jobs page (view) jenkins provide button to change icon sizes: Small/Medium/Large)
This doesn't work in current theme.

css generate page not working correctly.

test

repo website is 404

https://jorg3lucas.github.io/jenkins-material-theme/

should be https://jorg3lucas.github.io/jenkins-modern-themes/

Color not visible anymore

Hi @Jorg3Lucas

after upgrading Jenkins to a newer LTS version (e.g. 2.346.1) the theme color and logo is not shown anymore.
The bug seems to be equal to upstream: afonsof/jenkins-material-theme#194

It would be great if the issue could be fixed without having a local .css file on Jenkins.

Regards
Dominik

rawcdn.githack.com

Per https://raw.githack.com/

It says to use https://rawcdn.githack.com/ or bad things could happen.

Additionally perhaps github pages is better suited for hosting the css?

(this is for readme update...)

Oversized images in menu

Hello there

There are certain images in the menu that are larger than others and thus stand out. The ones I've found are the icons for Workspace & Console Output. See:

Other icons are displayed in a smaller (nicer) size:

I realize this issue would not exist if Jenkins would reference those icons as icon-md instead of icon-xlg, however, I've spun up a Docker image with Jenkins and had a look at the default UI and for some reason they manage to display the icons in same size eventhough they also use icon-xlg on both Workspace & Console Output. See: