随着Ubuntu 11.10 的发布,并且在官方源添加了gnome3.2,会有更多的人想尝试gnome-shell。但是,黑又硬的界面并不是每个人都喜欢,所以今天来和大家一起学习gnome-shell主题的修改。
gnome-shell的主题制作非常简单,就是修改/usr/share/gnome-shell/theme/ 文件夹下的gnome-shell.css文件。如果有css基础的同学最好的方式是从gnome-look下载一个主题然后照着修改。没接触过css也不要紧,只需要了解自己使用编辑器的复制和粘贴功能即可。
-------------------------W3CSchool的CSS教程 http://www.w3schools.com/css/default.asp
------关-----------源-DA上的gnome-shell主题 http://browse.deviantart.com/customizat ... nome+shell
相---------资---------gnome-look上的主题 http://gnome-look.org/index.php?xconten ... 236eabbb82
我的桌面: =========================================================================================================================================
从“头”开始
我们先来修改顶部面板,但是改之前先记得备份一下,要不到时候出错了会很悲剧的。备份好了之后用root权限打开/usr/share/gnome-shell/theme/gnome-shell.css 。
打开之后会看到一堆英文,前19行是一些版权说明之类的东西,我们看第21行有font-family:,这就是字体没错,如果你对默认的字体不满意就可以改这里,font-family: 字体名称, sans-serif;这里的字体名称需要注意,要用字体查看器里的名称,而不是像“字体.ttf”这样的: 保存,然后按下Alt+F2,输入r这个字母,回车。这个命令是重启gnome-shell,目的是为了使刚才修改的代码生效。怎么样,字体是不是变了?[/color]
提示:重启gnome-shell的过程可能会崩溃,但是没关系,他会提示你注销来重新登录,这时如果成功登录,说明没有问题,重新打开编辑即可,如果一直失败,可能是出现了灾难性的错误,把原来备份的文件覆盖进去即可。
我们再来看看整个css文件,他有一个特点,就是被一行行的空白分成了一块一块的,而且每一块里又分成两部分 ,一部分在“{ }”里,一部分在花括号前边: 为什么要这样写?这里就需要了解一下css的基础知识了,首先说css是干什么的。我们看一看wikipedia的定义:
我们把他缩一下,他是“添加样式的语言”。这种语言干什么用呢?它用来描述网页和XML应用长什么样,以及gnome-shell(不知道gnome-shell算不算XML应用,如果算的话我这里就说重复了)。想想我们描述一个人长什么样,我们首先得先选一个部位,比如眼。然后是这个部位的属性,比如颜色。最后是这个属性的值,比如绿色。那么连起来用一句话说就是“他的眼睛的颜色是绿色的”。这么说我们能理解,但是用来解析css的程序就比较笨了,你必须用“css语言”来告诉他,css语言怎么说呢? 眼睛 { 颜色:绿色;} 眼睛 { 形状:桃花眼; },既然都是在说眼睛我们就可以把他们写在一起 眼睛 { 颜色:绿色; 形状:桃花眼; } 我们像整理数学公式一样整理一个格式就是 : 选择器 { 属性:值; 属性:值; ·······} 这里的选择器指的就是我们选择的部位。这样写成一行不容易阅读,我们可以像上边图一样分开写。层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。目前最新版本是CSS 2.1,为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。
我们刚才修改的
代码: 全选
stage {
font-family: Hiragino Sans GB, sans-serif;
}
现在我们需要解决的问题就是:
1. 知道gnome-shell各个部位的名称,也就是选择器能选什么。
2.知道每个部位能用什么属性。
3.知道每个属性能用什么取值。
对于第一个问题,我推荐直接找一份别人修改过的在上边修改。这样的好处是可以找一个看着不错的修改,有些地方自己满意可以减小工作量,而且默认的css文件没有添加的属性大多都已经添加上了,只需要修改值即可,这样连第二个问题都解决了。
对于第三个问题我们接着往下说
[/color]
=========================================================================================================================================
颜色
颜色属性的值可以分成三种表示方法,十六进制,rgb,rbga。先来看rgb是什么意思,他是光的三原色(关于颜色体系的细节原理我推荐去看一下李涛老师免费放在网上的photoshop cs2的前几课的教程。)r:red g:green b:blue.可以这么想:屏幕是由一个个像素组成的,每个像素又是有rgb三个颜色的灯组成的,我们想要这个像素是红色,就只开红灯,想要绿色,就只开绿灯,想要更复杂的颜色,就要三盏灯都开到不同的级别,最大是255,最小是0,用rgb表示红色就是rgb(255,0,0),括号内的三个值,依次是rgb的值。十六进制的颜色值就是把这三个值改成十六进制,前边放一个#,比如红色就是#FF0000,前两位是红色,中间两位是绿色,最后是蓝色,rgba就是在rbg的基础上添加了不透明度的变化,比如rgba(255,0,0,0.5)就表示一个半透明的红色,括号内依次是红,绿,蓝,不透明度。0表示完全透明,1表示完全不透明。
那么如何确定一个颜色的值呢?一种方法是搜索色值表,一种方法是利用图像处理软件,比如GIMP。我们点击GIMP工具箱里的色板,就会弹出拾色器: 我们可以直接看到当前颜色的rgb值,下面的HTML格式就是十六进制值。[/color]
图片
图片更简单,url("图片路径");如果图片就在/usr/share/gnome-shell/theme/ 里,直接添图片名字就可以,如url("calendar-arrow-right.svg");
大小
大小单位基本有三种,em px pt 具体大小看着调就可以。
=========================================================================================================================================
部分位置的图示: css文件的注释,这个不是最新的3.2的,但是注释的部分都一样。http://forum.ubuntu.org.cn/viewtopic.php?f=155&t=336195
这个是3.2的,不带注释,但是里面有新添加的东西。另外这个是根据几个主题改的未完成品,以在这个基础上直接改。 [/color]
=========================================================================================================================================
替换活动按钮
#panelActivities { /*通常状态*/
transition-duration: 300;
border: none;
background-image: url("gnomefix.png");
background-position: 0 0;
width: 60px;
height: 23px;
color: rgba(0,0,0,0.0);
}
#panelActivities:hover { /*鼠标悬浮*/
background-image: url("gnomefix2.png");
}
#panelActivities:active,
#panelActivities:overview {/*鼠标按下或进入overview视图*/
background-image: url("gnomefix3.png");
}
默认的CSS没有这几条属性,可以自己加在.panel-menu {...}的后边(实际放哪都一样)。 [/size]