一、概述

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

大功告成!

原文转载:猛击这里

jenkins 自定义主题的更多相关文章

  1. Jenkins自定义主题

    x下载自定义样式 http://afonsof.com/jenkins-material-theme/ 打开连接 最后点击:DOWNLOAD TOUR THEME! 得到样式文件:jenkins-ma ...

  2. ModernUI教程:创建自定义主题

            Modern UI WPF包括两个内置主题(dark与light).在1.0.3版本,您可以构建自定义的主题.Modern UI应用程序通常有在全局资源字典App.xaml中有如下定义 ...

  3. 如何优雅使用Sublime Text3(Sublime设置豆沙绿背景色和自定义主题)

    ♣Sublime Text3软件的下载 ♣设置字体的大小 ♣设置背景色和关键字颜色(Color Scheme 生成器) ♣快速生成html头文件 1.Sublime Text3软件的下载地址和包含的文 ...

  4. ExtJS4.2.1自定义主题(theme)样式详解

    (基于Ext JS 4.2.1版本) UI组件 学习ExtJS就是学习组件的使用.ExtJS4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. Ex ...

  5. Android菜鸟的成长笔记(6)——剖析源码学自定义主题Theme

    原文:Android菜鸟的成长笔记(6)--剖析源码学自定义主题Theme 还记得在Android菜鸟的成长笔记(3)中我们曾经遇到了一个问题吗?"这个界面和真真的QQ界面还有点不同的就是上 ...

  6. Sublime Text3自定义主题

    设置背景色和关键字颜色(Color Scheme 生成器): Color Scheme 生成器地址:http://tmtheme-editor.herokuapp.com/ 首先:点击General- ...

  7. WebAppBuilder自定义主题

    WebAppBuilder自定义主题 by 李远祥 基本步骤: 创建新主题的文件夹 注册新的主题到manifest.json 文件 覆盖HeaderController 部件的颜色. 覆盖panel的 ...

  8. Material使用05 自定义主题、黑夜模式\白天模式切换

    需求: 1 不使用materil依赖内建的主题,使用自己创建的主题 2 利用自己创建的主题实现白天模式和黑夜模式 1 自定义主题 1.1 创建自定义主题文件 them.scss // 引入materi ...

  9. 18 UI美化自定义主题样式代码

    自定义主题 假设我们我们对现有的样式不大满意 那么可在工程目录res/values下的styles.xml自定义 方法: 1. res/values下的styles.xml文件中自定义一个标签 < ...

随机推荐

  1. py2exe安装使用

    一.简介 py2exe是一个将python脚本转换成windows上的可独立执行的可执行程序(*.exe)的工具,这样,你就可以不用装python而在windows系统上运行这个可执行程序. py2e ...

  2. django-simple-captcha

    在注册页面生成验证码的时候,出现错误如下: build_attrs() takes from 1 to 2 positional arguments but 3 were given, 不知道为什么报 ...

  3. paramiko基本操作

    paramiko 是一个用作远程控制的模块,它遵循SSH2协议,支持以加密和认证的方式来进行远程服务器的连接.操作.上传和下载. 官方文档地址:http://docs.paramiko.org/ pa ...

  4. python pycharm2018开启debug模式

    为什么需要开启DEBUG模式1.如果开启了DEBUG模式,那么在代码中如果抛出了异常,在浏览器的页面中可以看到具体的错误信息,以及具体的错误代码位置,方便开发者调试.2.如果开启DEBUG模式,那么以 ...

  5. CSAcademy Palindromic Concatenation 字符串哈希

    题意: 题目链接 给出\(n\)个字符串,求有多少对\((i,j),i \neq j\)使得\(s_i\)与\(s_j\)拼起来是回文串 分析: 设\(s_i,s_j\)的长度分别为\(L_i, L_ ...

  6. linux下解压命令大全[转]

    本文是复制大神的博文, 供自己参考. 原文出处:http://www.cnblogs.com/eoiioe/archive/2008/09/20/1294681.html .tar 解包:tar xv ...

  7. 【Binary Search Tree Iterator 】cpp

    题目: Implement an iterator over a binary search tree (BST). Your iterator will be initialized with th ...

  8. CSS简易学习笔记

    学习地址:http://www.w3school.com.cn/css/index.asp cnblog不能把格式复制上来,有格式文字版:https://github.com/songzhenhua/ ...

  9. 自动化测试学习之路--json、dom编程

    1.json: json是JavaScript Object Notation,是一种数据传输格式. 以下程序都是在浏览器的Console下执行的. 创建一个javaScript的对象: var st ...

  10. 【Python】重定向 Stream 到文件

    Python 系统模块 sys 中有三个变量 stdin . stdout 与 stderr ,分别对应标准输入流.输出流与错误流.stdin 默认指向键盘, stdout 与 stderr 默认指向 ...