Jenkins UI customization

Question

I want to change the look and feel(ui customization) of Jenkins. Also I would like to add new views(say like new html pages or web pages) with navigation to the required jenkins pages etc.

Please let me know if any single plugins will help me to do so.Any relevant information(how ever generic) will be very helpful. Any suggestions or links or tutorials is also appreciated.

PS:- Pretty new to jenkins.The inputs from here will help me to add more details to the questions.

I am looking for documents or tutorials that specify Skinning Jenkins using plugins like :-

https://wiki.jenkins-ci.org/display/JENKINS/Simple+Theme+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/jQuery+UI+Plugin
https://wiki.jenkins-ci.org/display/JENKINS/JSWidgets+Plugin

The plugin page is providing very little information on how to use these and the benefits and the extend to which the UI can be changed.

Any doc or link is appreciated.

Answer 1

We use the Simple theme plugin - pointed at a css file for the simple styling, and a JS file to fix a couple of DOM oddities (some of the tables in the new look and feel have mismatching column counts).

Those two files need only be hosted either a handy http server, or you can place them in usercontent. You need only refresh the page in the browser to see the changes. Both files can then happily reference other files served up too.

Handy things to note:

• Jenkins has jquery, parts of YUI loaded and prototype loaded - so you can use them in your scripts.
• If while debugging, the refresh gets in the way then use the console to enter the following to temporarily stop it without pausing JS: refreshPart = function() {}
• When making DOM tree changes to content that is refreshed - attach it to the layout updates with: layoutUpdatecallback.add(my_function) - that way your changes are applied to new incoming content.

Answer 2

Assuming you don't want to write a Jenkins plugin, for adding pages, the best suggestion I can make is to use an HTTP proxy such as NginX, and configure it so that the pages you want to add are plain html files, and Jenkins is proxied for the rest of them. To a visitor, they will look like they are all part of the same site; you could copy code from the head and body sections of Jenkins-served pages to include some of the navigation.

The Simple Theme Plugin, which you found, will let you do basic customization of the look and feel of Jenkins. I do that for my build server and proxy it using this configuration fragment for NginX. The relevant CSS is in this CSS file - toward the end, look for the // JENKINS CUSTOMIZATION comment.