Jenkins 主題樣式：刀鋒

本文轉載自查看原文 2019-11-30 12:15 1645 Jenkins/ CSS/ 運維/ linux/ 主題/ jenkins/ 教程

背景

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

2019-12-02：新增部分頁面手機適配

配置 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}#side-panel td a{font-size:10px!important}#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}td.progress-bar-done{padding:2px!important;height:5px}td.progress-bar-left{padding:2px!important;height:5px}@media(max-width:970px){a{cursor:pointer!important}body{margin:0;padding:0}#header{position:relative;margin:5px 5px;width:calc(100% - 10px)!important;overflow-y:hidden!important}#breadcrumbBar{display:none}#page-body{width:100%}#side-panel{position:relative;width:calc(100% - 10px)!important;top:-1px;bottom:auto;padding:5px;margin:5px}#side-panel #tasks{width:100%}#main-panel{padding:5px}#side-panel #tasks .task{width:100%;max-width:100%;left:0;padding-left:0}#main-panel a,td{font-size:10px!important}#main-panel #projectstatus .header{display:none}#main-panel .col-md-20{padding-left:0;padding-right:0}#main-panel .pane-frame table{display:inline}.jenkins-config-widgets{display:none}.jenkins-config{border-top:1px solid #ccc!important}table.pane{border:0}.pane-frame{border:0}#projectstatus tbody tr:last-child td:first-child{border:0;border-bottom-left-radius:0}#add-item-panel .setting-input{width:100%}#add-item-panel input{min-width:200px;width:100%}#add-item-panel .j-item-options li .desc{display:none}#add-item-panel .icon img{width:20px!important;height:20px!important}#add-item-panel .j-item-options li{min-height:auto}#add-item-panel .col-md-20{padding:0}#add-item-panel form>.footer .btn-decorator{padding:10px;width:100%;height:80px;position:initial;border:0;bottom:auto}#add-item-panel .icon:before{display:none}#add-item-panel form>.footer .btn-decorator button{width:100%}#add-item-panel .add-item-copy .icon{display:none}#add-item-panel .item-copy .add-item-copy{padding-left:0}#add-item-panel .item-copy{padding:5px}#add-item-panel form>.footer{height:80px;position:initial}footer{display:none}}