rackerlabs / canon-jenkins

Jenkins Rackspace Cannon Theme

Jenkins Rackspace Canon(tm) Theme

CSS and JS to implement Rackspace Canon as a theme for Jenkins CI.

Compatible with Jenkins UI post-1.572. For pre-1.572, see below.

Last tested with 1.591.

Before

After

CDN URLs

HTTP

CSS: http://css.cdn.rackspace.com/canon-jenkins/style.css

JS: http://js.cdn.rackspace.com/canon-jenkins/app.min.js

HTTPS

CSS: https://8ab972673b5689e842a8-4ce0e842e9a020b19bb3a8bec8532674.ssl.cf1.rackcdn.com/canon-jenkins/style.css

JS: https://577351e10bc4a0198d93-f60a0bb748a3c84145bb10da7563bafb.ssl.cf1.rackcdn.com/canon-jenkins/app.min.js

Note: these URLs are for the Jenkins UI redesign as of 1.572. For the legacy UI theme files, please see Legacy Jenkins UI (pre-1.572) CDN URLs below

Usage

1. Install the Simple Theme Plugin for Jenkins
2. Navigate to Jenkins > Manage Jenkins > Configure System > Theme
3. Set URL of theme CSS to http://css.cdn.rackspace.com/canon-jenkins/style.css (or another URL of your setting/choosing)
4. Set URL of theme JS to http://js.cdn.rackspace.com/canon-jenkins/app.min.js (or another URL of your setting/choosing)

Building

npm install
grunt

To manually change SimpleTheme CSS and JS values

1. Edit: $JENKINS_HOME/org.codefirst.SimpleThemeDecorator.xml with code below
2. Restart Jenkins

<?xml version='1.0' encoding='UTF-8'?>
<org.codefirst.SimpleThemeDecorator plugin="[email protected]">
  <cssUrl>http://css.cdn.rackspace.com/canon-jenkins/style.css</cssUrl>
  <jsUrl>http://js.cdn.rackspace.com/canon-jenkins/app.min.js</jsUrl>
</org.codefirst.SimpleThemeDecorator>

Legacy Jenkins UI (pre-1.572) CDN URLs

CSS: http://css.cdn.rackspace.com/canon-jenkins/legacy/style.css

JS: http://js.cdn.rackspace.com/canon-jenkins/legacy/app.min.js

HTTPS

CSS: https://8ab972673b5689e842a8-4ce0e842e9a020b19bb3a8bec8532674.ssl.cf1.rackcdn.com/canon-jenkins/legacy/style.css

JS: https://577351e10bc4a0198d93-f60a0bb748a3c84145bb10da7563bafb.ssl.cf1.rackcdn.com/canon-jenkins/legacy/app.min.js

canon-jenkins's Issues

Unstable job status is not displayed

The unstable build color status is not displayed after build was run or running.
Seems missing style for

/* Unstable state (yellow) styling for project table */
#projectstatus td:first-child[data="2"] {
    background-color: #FFA400 !important;
}

...
/* Building state (orange stripes) styling for main project table and build process table on left side */
#projectstatus td:first-child[data="1"],
#projectstatus td:first-child[data="3"], <-- missing this
...

Some dropdown fields have transparent background

For example the "Add post build stepps" dropdown background is transparent

Theme is broken on Jenkins 1.572

Can't use on an HTTPS jenkins

Unfortunately, I can't use this in my jenkins, because jenkins is behind HTTPS, so the browser won't load the "insecure content."

Changing the URL to https, results in an invalid certificate problem.

Jenkins breadcrumbs doesn't display correctly

Using chrome.

Progress bar of stable build display wrong animation

Progress bar for stable build are display with yellow progress instead of green progress bar

/* Building state (green stripes) styling for main project table and build process table on left side */
#projectstatus td:first-child[data="5"] {
    background-image: url("data:image/png;base64,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") !important;
}

• data 0: build failed;
• data 1: failed build in progress;
• data 2: build unstable;
• data 3: unstable build in progress;
• data 4: build stable;
• data 5: stable build in progress;
• data 13: first build of a project.

Height of breadcrumbs div on Jenkins v1.59

I'm using the CDN CSS and JS on a fresh install of Jenkins 1.59 and I noticed that the breadcrumbs bar was much smaller than in the screenshots. This is easily fixed by changing #breadcrumbs height from 2em to 3em.

Before and after fix:

Green progress bar isn't displayed

In my coverage, the green part of the bar isn't displayed.

Add JS to updated Rackspace Web Team CDN domain

Add CSS to updated Rackspace Web Team CDN domain

css style is broken if name is too long on the build history

Hi,
The css style is broken if name is too long on the build history.

Build artifact tree label and top right summary box have wrong (white) background

As topic the label of Build Artifact tree have white backgroud.

In the build detail in the summary box that contains infomation about when last build started and how many time took have white backgroud.

Incompatible with MultiJob View

We are using MultiJob Plugin with our Jenkins Jobs.
When I try to view my job with MultiJob plugin. It is showing breking UI.
In multiJob view status is the 2nd column not the 1st column.
Can we add any stylesheet to make it compatible.

Ant Target in Console page has dot before name

When we open Console page the Executed Target has dot before name

Original jenkins page align the "Executed Targets" table to the border left so

list style is hidden.

Jenkins image still shows in background

Installed theme via CDN urls & Simple Theme Plugin. README screenshot shows Jenkins background image as removed, but actual result is that Jenkins background image is retained, at least in Jenkins 1.545 on Mac.

Difficult console text when using ansicolor plugin

The console is hard to see for certain colour fonts (grey, for instance). This is especially true when using the very common ansi color plugin https://wiki.jenkins-ci.org/display/JENKINS/AnsiColor+Plugin.

You only read the text when highlighting.