jenkins 自定義主題

一、概述

jenkins更新后，頁面css布局都已改變，我現在用的jenkins.css, （ png圖片需自定義）

    #page-body {  
        background-image:url(http://localhost:8080/userContent/page_backround.png;  
    )!important;  
        height: 900px;  
        background-repeat: no-repeat;  
        background-size: cover;  
    }  
      
    .logo{  
        width:154px!important;  
        background:url(http://localhost:8080/userContent/Logo.png) no-repeat;  
        margin:10px;  
    }  
    #header{  
        background:none repeat scroll 0 0 #44367D!important;  
        height:60px!important;  
    }  
    #jenkins-head-icon,#jenkins-name-icon,#right-top-nav{display:none}  
      
    #search-box{  
        margin:12px;  
    }  
      
      
    #header .login{  
        top:inherit;  
        margin-top:16px  
    }  

 在1.625.2版本上親測可用。有些地方可能寫CSS覆蓋比較麻煩，可以直接修改$JENKINS_HOME/war/css目錄下的style.css,  比如我修改了一下footer。

    footer {  
      padding: 10px 0;  
      background-color: #E97B00;  
      border-top: 1px solid #d3d7cf;  
      width: 100%;  
      position: absolute;  
      bottom: 0;  
      left: 0;  
      font-size: 12px;  
      text-align: right;  
    }  
 

之前有段時間用過華為的ICP-CI，發現它其實就是給CruiseControl換了個皮膚。

現在轉向jenkins陣營，它提供了源碼，有很多人通過修改源碼的辦法去定制過自己的jenkins。不過這個方法，在升級后又得重新修改文件。

所以，今天我想介紹一個插件Simple Theme Plugin，它支持自定義CSS和JavaScript。

二、修改jenkins主題

2.1、配置插件

Manage Jenkins > Configure System > Theme

 

 我把css和png文件都存放在JENKINS_HOME/userContent/Jenkins_Theme下面，這樣可以用過URL來訪問：http://jenkins_server/userContent/Jenkins_Theme，省得安裝apache。

2.2、編寫css文件

如果沒有css基礎的話，沒關系，花上10幾分鍾，看看http://learning.artech.cn/20080621.mastering-javascript-jQuery.html的第三課和第四課，簡單的了解下css基礎即可。然后我們要了解一下jenkins頁面的結構，這里需要借用firebug來查看，很方便的一個工具。（練習下，找一下自己想修改的元素如何用css表達。）

然后就要寫css文件了，我結合我的一些修改來講一下：

首先我想換一下jenkins的logo。這個很多人都不知道怎么換，以為非要改jenkins源文件才行，其實不用這么麻煩。

/* change logo   
*/   
#top-panel td > a {  
        background: url("http://135.242.102.36:8080/userContent/Jenkins_Theme/logo.png") 0 0 no-repeat;  
        display: block;  
        height: 65px;  
        width: 276px;  
        }  
#top-panel td > a img {  
        display: none; } 

這里我們需要分兩步，先加載我的logo，然后隱藏原來的title，It's done!

接着，修改網頁頂部的藍條。由於公司的logo背景是白色的，所以，只需簡單地隱藏一下top-panel即可。

    /* behide top-panel background   
    */  
    #top-panel {  
            background: none; }  

  一直覺得jenkins背景大叔很猥瑣，我已經迫不及待想換下他了。照着Simple Theme Plugin插件介紹，將其改成了一只可愛的雪兔。

    /* change background picture   
    */  
    #main-table {  
       background-image: url("http://135.242.102.36:8080/userContent/Jenkins_Theme/snowrabbit.png") !important;  
    }  

 注意,!important的出現就是為了讓用戶自己設置被執行語句的優先級。不過它在IE6里面是不支持的。

 為了練習下css，我又給任務隊列和任務狀態加上邊框。

    /* add a border for buildQueue, executors  
    */  
    table#buildQueue.pane, table#executors.pane {  
        border-color:   #ab5b9f;  
        border-width:   2px;  
    }  

大功告成！

原文轉載：猛擊這里