Skip to content
This repository has been archived by the owner on Jun 23, 2022. It is now read-only.

header colors #39

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
several header colors useful to identify diferent jenkins instances
Demaestri Adrian committed Mar 4, 2021
commit 668bd68e0d49d65b1bf623b722a313a3b652bf5d
15 changes: 14 additions & 1 deletion Gruntfile.js
Original file line number Diff line number Diff line change
@@ -4,7 +4,20 @@ module.exports = function (grunt) {
var pkg = grunt.file.readJSON('package.json');

var lessFiles = {
"dist/neo-light.css": "less/style.less",
"dist/neo-light.css":"less/style.less", //base style
"dist/red.css": "less/red.less",
"dist/pink.css": "less/pink.less",
"dist/purple.css": "less/purple.less",
"dist/indigo.css": "less/indigo.less",
"dist/blue.css": "less/style.less",
"dist/cyan.css": "less/light-blue.less",
"dist/green.css": "less/green.less",
"dist/lime.css": "less/lime.less",
"dist/yellow.css": "less/yellow.less",
"dist/orange.css": "less/orange.less",
"dist/brown.css": "less/brown.less",
"dist/blue-grey.css": "less/blue-grey.less",

};

grunt.initConfig({
65 changes: 56 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -32,25 +32,70 @@ an older version, for example `/v0.2.0/`.

### Using this GitHub page


1. Install [Jenkins Simple Theme Plugin][simple]

2. Click `Manage Jenkins`

3. Click `Configure System` and scroll down to `Theme`

4. Specify the URL for `https://tobix.github.io/jenkins-neo2-theme/dist/neo-light.css`.
4. Choose your color for the header:


<style>

.colorexample{float:left; padding:.5em; width:8em;}
#examples div{margin:.3em;}

.redstyle{ background-color:red;}
.pinkstyle{ background-color:#ec1561;}
.purplestyle{ background-color:#9d1cb2;}
.indigostyle{ background-color:#5341b9;}
.bluestyle{ background-color:#0172BA;}
.lightblue2style{ background-color:#0097ef;}
.cyanstyle{ background-color:#009fa2;}
.greenstyle{ background-color:#52a13a;}
.limestyle{ background-color:#afb513;}
.yellowstyle{ background-color:#fdc102;}
.orangestyle{ background-color:#fb5c00;}
.brownstyle{ background-color:#77655e;}
.bluegreystyle{ background-color:#607d8c;}

</style>
<div id="examples" style="padding:1em;">
<div class="colorexample redstyle">red</div>
<div class="colorexample pinkstyle">pink</div>
<div class="colorexample purplestyle">purple</div>
<div class="colorexample indigostyle">indigo</div>
<div class="colorexample bluestyle">blue</div>
<div class="colorexample lightblue2style">light-blue</div>
<div class="colorexample cyanstyle">cyan</div>
<div class="colorexample greenstyle">green</div>
<div class="colorexample limestyle">lime</div>
<div class="colorexample yellowstyle">yellow</div>
<div class="colorexample orangestyle">orange</div>
<div class="colorexample brownstyle">brown</div>
<div class="colorexample bluegreystyle">blue-grey</div>
<div style="clear: both;" ></div>
</div>

5. Click `Save`
5. Replace {{your-color-name}} in the URL by the chosen color: `https://tobix.github.io/jenkins-neo2-theme/dist/{{your-color-name}.css`.


>for example `https://tobix.github.io/jenkins-neo2-theme/dist/blue.css`
6. Click `Save`


### Using your Jenkins Hosting

1. Copy the file
`https://tobix.github.io/jenkins-neo2-theme/dist/neo-light.css` to the
directory `userContent` in your `JENKINS_HOME`
1. Follow the step 1 and 2 of the previous method

2. Follow the steps of the previous method and use `/userContent/neo-light.css`
as the URL.
2. Download the generated URL

3. Upload the downloaded file to your web server

4. Follow the steps 3 to 7 of the previous method using your uploaded file as URL in step 6


## Development
@@ -62,9 +107,11 @@ installed, you can build everything with:
yarn test
```

This will generate the following file:
This will generate the following files, one for each {{color}}:

- dist/{{color}}.css

- dist/neo-light.css
for example `dist/blue.css`

## Compatibility

3 changes: 3 additions & 0 deletions img/orange.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #EF6C00;
3 changes: 3 additions & 0 deletions less/blue-grey.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/brown.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/cyan.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/green.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #43A047;
3 changes: 3 additions & 0 deletions less/indigo.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/light-blue.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/light-green.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #689F38;
3 changes: 3 additions & 0 deletions less/lime.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/orange.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #EF6C00;
3 changes: 3 additions & 0 deletions less/pink.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/purple.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
3 changes: 3 additions & 0 deletions less/red.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;
2 changes: 1 addition & 1 deletion less/variables.less
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
@color-grey: #9E9E9E;
@color-lightergrey: #EEE;

@color-primary: #ff6f00;
@color-primary: #0172BA;
@color-accent-light: #B3D4FF;
@color-link: #34568E;
@color-button: #36578C;
3 changes: 3 additions & 0 deletions less/yellow.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@import 'style';

@color-primary: #F44336;