背景

Jenkins 的前端 CSS 樣式堅挺了這麼多年已經覺得膩的不行了，於是想換個風格緩解一下視覺疲勞，便有了這個專案。由於本人不是前端，所以很多隻是隨便改改，有些複雜的需求也實現不了，但是總的來說，使用還是將就能用。當然，由於新版本專案還是熱乎的，所以肯定會有很多相容性的問題，也歡迎有機會的人能夠在評論區或者其他方式給我提出來。

配置 Jenkins 自定義 CSS 樣式

做這個之前，首先需要安裝一個外掛：Simple Theme Plugin

安裝完成後重啟 Jenkins，此時在系統配置裡面：

可以找到我們安裝的外掛：

第一種方式：

我們可以通過 CSS URL 的形式匯入樣式：

https://github.com/KU4NG/Jenkins-Theme/blob/master/css/jenkins.css

這樣你能保證程式碼是最新的，但是問題就是 github 可能不是很穩定，當然你可以可以下載下來本地部署，然後填寫改 css 的地址。

另外一個也是我比較推薦的，使用 Extra CSS 選項，將 CSS 檔案內容貼上到這裡儲存：

第一版內容如下，可以直接用：

*{font-size:13px;font-weight:normal;color:#161823!important;letter-spacing:1px}div{border-radius:0!important}a{text-decoration:none!important}a:link{text-decoration:none!important}a:visited{text-decoration:none!important}a:hover{text-decoration:none!important;color:red!important}a:active{text-decoration:none!important}body,table,form,input,td,th,p,textarea,select,#tasks .task{font-size:12px!important}#header{background-color:#161823}#header #visible-am-container a{color:#fff!important}#header .login a{color:#fff!important;font-size:12px}#header .login b{color:#fff!important;font-size:12px}#header #visible-am-button{background-color:#c33}#header #jenkins-name-icon{left:40px;bottom:-3px;height:30px;width:120px}#header .searchbox{padding:8px 11px}#breadcrumbBar a{color:#fff!important;font-size:12px!important}#breadcrumbBar .top-sticker-inner{background-color:#c33}#breadcrumb-menu-target a{color:#161823!important}#breadcrumbs{border-bottom-width:0!important}#breadcrumbs{height:25px!important;line-height:25px!important}#breadcrumbs LI{height:25px!important;line-height:25px!important}#breadcrumbs LI:hover{background-color:#036!important}#breadcrumbs .mouseIsOverMenuSelector{background-color:transparent!important}@media(min-width:1170px){body.two-column #side-panel{width:300px}body.two-column #main-panel{margin-left:300px}}#side-panel{position:absolute;top:65px;bottom:0;background-color:#161823}#side-panel a,b{color:#fff!important;font-size:13px;letter-spacing:2px}#side-panel #tasks .task{position:relative;left:-15px;width:300px;max-width:300px;margin-bottom:0;height:30px;line-height:30px;padding-left:13px}#side-panel #tasks .task a::before{content:"配置："}#side-panel #tasks .task:hover{background-color:#c33}#side-panel .task-icon-link{display:none}#side-panel .col-xs-24{padding:5px 5px 5px 5px!important}#side-panel .pane-header{font-size:13px;font-weight:normal;color:#161823;border-radius:0}#side-panel .pane-header a{font-size:13px;font-weight:normal;color:#161823!important}#side-panel .pane-frame{border:solid 1px #f0f0f0;border-radius:0}#side-panel td{font-size:9px!important;color:#fff!important;padding:5px 2px 5px 5px;text-align:left!important;height:20px;line-height:20px}#main-panel{padding:10px 10px 20px 10px}#main-panel b{color:#161823!important}#main-panel #description{display:none}#main-panel .tabBar{background-color:#161823}#main-panel .tabBar .tab:first-child{margin-left:0}#main-panel .tabBar [type=radio]:checked~a{border:0;background:0;color:#fff!important}#main-panel .tabBar .tab a.addTab{color:#fff!important;border:0}#main-panel .tabBar .tab a{color:#fff!important;font-weight:normal;border:0}#main-panel .tabBar .tab a:hover{background:0;color:red!important}#main-panel .tabBar .tab a.addTab:hover{background:0;color:red!important}#main-panel table.stripped-odd tr:nth-child(odd){background:#f4f4f4}#main-panel .bigtable th a{font-weight:bold!important;font-size:13px!important}#main-panel .icon-xlg{width:26px!important;height:26px!important}#main-panel .icon-md{width:24px!important;height:24px!important}#main-panel .icon-sm{width:12px!important;height:12px!important}#main-panel h1 img{width:26px!important;height:26px!important}#main-panel .bigtable td{padding:7px}#main-panel .bigtable td,a{font-size:12px}#main-panel table.stripped tr:hover,table.stripped-even tr:hover,table.stripped-odd tr:hover{background:#ebebeb!important}#main-panel table.stripped tr:hover td,table.stripped-even tr:hover td,table.stripped-odd tr:hover td{color:#fff!important}#main-panel table.stripped tr:hover td a,table.stripped-even tr:hover td a,table.stripped-odd tr:hover td a{color:#fff!important}#rss-bar span a{font-size:12px}footer{background-color:transparent;border-top:0;border-bottom:0}footer a,span{font-size:12px}#add-item-panel .add-item-name{padding:20px 10px}#add-item-panel .add-item-name label{font-size:18px}#add-item-panel input{background-color:#fff;padding:5px 10px;border:1px solid #999;min-width:300px;border-radius:3px;line-height:1.4em;font-size:14px}#add-item-panel .setting-input{width:50%}#add-item-panel .icon:before{border:none!important;background:none!important}#add-item-panel .icon{border:none!important;background:none!important}#add-item-panel .icon img{height:40px!important;width:40px!important}#add-item-panel .categories.flat .category:first-child{padding:0}#add-item-panel .categories.flat .category:last-child{padding:0}.j-item-options li.active{background-color:#c33;border:0;box-shadow:none}.j-item-options li{border-radius:0;border:0}.j-item-options li:hover{background:#c33}.j-item-options li.active .desc{color:#fff!important}.j-item-options li.active span{color:#fff!important}.j-item-options li:hover .desc{color:#fff!important}.j-item-options li:hover span{color:#fff!important}#add-item-panel .item-copy p.description{font-size:13px}#buildHistory .pane-footer{display:none}table.stripped tr:nth-child(even){background:#161823}table.stripped tr:hover,table.stripped-even tr:hover,table.stripped-odd tr:hover{background:#161823!important}
#buildHistory .build-row-cell a{font-size:10px}.build-row.model-link-active{background:#161823!important}#jenkins .yui-button.primary .btn,#jenkins .yui-button.primary button{background-color:#036;color:#eee!important;border:1px solid #036}#jenkins .yui-button .btn,#jenkins .yui-button button{padding:2px 20px;border-radius:0;font-weight:normal}#add-item-panel form>.footer .btn-decorator button[type=submit]{padding:0 30px;background-color:#036;color:#eee!important;border:1px solid #036;border-radius:0;font-weight:normal;font-size:12px;line-height:25px}#add-item-panel form>.footer .btn-decorator{padding:10px 50px}.call-to-action a,.call-to-action a:visited{font-size:18px}.danger button{color:#fff!important}.yui-button{vertical-align:middle!important}.section-header{font-size:17px;padding-top:20px!important;padding-bottom:10px!important}h1{font-size:17px;font-weight:bolder}.manage-option dl dt{font-size:14px;line-height:24px}dt{font-weight:normal}.manage-option dl dd{font-size:10px}#visible-am-container div#visible-am-list{padding:10px!important;border-radius:0!important}#visible-am-container div#visible-am-list a{color:#c33!important}#visible-am-container .am-message{margin-bottom:0!important}

儲存就能看到效果！當然，最新程式碼可以檢視我的 GITHUB：

https://github.com/KU4NG

效果展示

1. 主頁

2. 新建專案

3. 系統配置

4. 配置詳情

5. 控制檯輸出

特別說明

專案剛寫完，肯定有很多 BUG，歡迎大家反饋！