自定义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主题，将非常简单：

    1.配置插件

    Manage Jenkins > Configure System > Theme

        

          我把css和png文件都存放在JENKINS_HOME/userContent/Jenkins_Theme下面，这样可以用过URL来访问：http://jenkins_server/userContent/Jenkins_Theme，省得安装apache。

           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;
}

      大功告成！