背景

 

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: