一、概述

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. LInux操作随手笔记

    一.find 的用法 实例 find / -name test.txt 就可以找到这个文件的路径(如果存在). 二.学用vi编辑器,学用rz往linux服务器上面上传文件 linux中rz 和 sz ...

  3. python scrapy实战糗事百科保存到json文件里

    编写qsbk_spider.py爬虫文件 # -*- coding: utf-8 -*- import scrapy from qsbk.items import QsbkItem from scra ...

  4. Mysql处理海量数据时的一些优化查询速度方法【转】

    最近一段时间由于工作需要,开始关注针对Mysql数据库的select查询语句的相关优化方法.由于在参与的实际项目中发现当mysql表的数据量达到百万级时,普通SQL查询效率呈直线下降,而且如果wher ...

  5. Android弹出输入提示框--PopupWindow实现

    前言  之前直接用Dialog实现了弹出对话框.现在尝试用更好地解决方案--PopupWindow类--来实现 1.首先搞一个弹出框布局,和之前类似. 这样的东西,它的布局是这样: 1 <?xm ...

  6. web项目中获取spring的bean对象

    Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架,如何在程序中不通过注解的形式(@Resource.@Autowired)获取Spring配置的bean呢? Bean工厂(c ...

  7. NSThread那些事儿

    NSThread 哎呀,它面向对象,再去看看苹果提供的API,对比一下Pthreads,简单明了,人生仿佛又充满了阳光和希望,我们先来一看一下系统提供给我们的API自然就知道怎么用了,来来来,我给你注 ...

  8. 剑指Offer - 九度1503 - 二叉搜索树与双向链表

    剑指Offer - 九度1503 - 二叉搜索树与双向链表2014-02-05 23:39 题目描述: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树 ...

  9. 通过slf4j/log4j的MDC/NDC 实现日志追踪

    在分布式系统或者较为复杂的系统中,我们希望可以看到一个客户请求的处理过程所涉及到的所有子系统\模块的处理日志. 由于slf4j/log4j基本是日志记录的标准组件,所以slf4j/log4j成为了我的 ...

  10. Python 两种方式实现斐波那契数列

    斐波那契数列指的是这样一个数列 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233,377,610,987,1597,2584,4181,6765,10946 ...