Ubuntu 11.10一起学习修改gnome-shell主题(图文) 2011.11.12 更新

各种窗口管理器和美化相关
头像
jadeity
帖子: 689
注册时间: 2010-10-21 17:55

Ubuntu 11.10一起学习修改gnome-shell主题(图文) 2011.11.12 更新

#1

帖子 jadeity » 2011-10-15 17:43

图文,一起学习修改gnome-shell主题

随着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

我的桌面:
桌面截图.png
=========================================================================================================================================
从“头”开始

我们先来修改顶部面板,但是改之前先记得备份一下,要不到时候出错了会很悲剧的。备份好了之后用root权限打开/usr/share/gnome-shell/theme/gnome-shell.css 。

打开之后会看到一堆英文,前19行是一些版权说明之类的东西,我们看第21行有
font-family:,这就是字体没错,如果你对默认的字体不满意就可以改这里,font-family: 字体名称, sans-serif;这里的字体名称需要注意,要用字体查看器里的名称,而不是像“字体.ttf”这样的:
字体名称.jpg
保存,然后按下Alt+F2,输入r这个字母,回车。这个命令是重启gnome-shell,目的是为了使刚才修改的代码生效。怎么样,字体是不是变了?[/color]
提示:重启gnome-shell的过程可能会崩溃,但是没关系,他会提示你注销来重新登录,这时如果成功登录,说明没有问题,重新打开编辑即可,如果一直失败,可能是出现了灾难性的错误,把原来备份的文件覆盖进去即可。

我们再来看看整个css文件,他有一个特点,就是被一行行的空白分成了一块一块的,而且每一块里又分成两部分 ,一部分在“{ }”里,一部分在花括号前边:
css.jpg
为什么要这样写?这里就需要了解一下css的基础知识了,首先说css是干什么的。我们看一看wikipedia的定义:
层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。目前最新版本是CSS 2.1,为W3C的候选推荐标准。下一版本CSS 3仍然在开发过程中。
我们把他缩一下,他是“添加样式的语言”。这种语言干什么用呢?它用来描述网页和XML应用长什么样,以及gnome-shell(不知道gnome-shell算不算XML应用,如果算的话我这里就说重复了)。想想我们描述一个人长什么样,我们首先得先选一个部位,比如眼。然后是这个部位的属性,比如颜色。最后是这个属性的值,比如绿色。那么连起来用一句话说就是“他的眼睛的颜色是绿色的”。这么说我们能理解,但是用来解析css的程序就比较笨了,你必须用“css语言”来告诉他,css语言怎么说呢? 眼睛 { 颜色:绿色;} 眼睛 { 形状:桃花眼; },既然都是在说眼睛我们就可以把他们写在一起 眼睛 { 颜色:绿色; 形状:桃花眼; } 我们像整理数学公式一样整理一个格式就是 : 选择器 { 属性:值; 属性:值; ·······} 这里的选择器指的就是我们选择的部位。这样写成一行不容易阅读,我们可以像上边图一样分开写。

我们刚才修改的

代码: 全选

stage {
      font-family: Hiragino Sans GB, sans-serif;
}
stage 有舞台的意思,所以我猜这里指的是整个gnome-shell。后面的Hiragino Sans GB, sans-serif;是什么意思呢?google “css font-family” 善用搜索引擎。

现在我们需要解决的问题就是:
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工具箱里的色板,就会弹出拾色器:
颜色.jpg
我们可以直接看到当前颜色的rgb值,下面的HTML格式就是十六进制值。[/color]

图片
图片更简单,url("图片路径");如果图片就在/usr/share/gnome-shell/theme/ 里,直接添图片名字就可以,如url("calendar-arrow-right.svg");

大小
大小单位基本有三种,em px pt 具体大小看着调就可以。
=========================================================================================================================================
部分位置的图示:
zhengtu.png
css文件的注释,这个不是最新的3.2的,但是注释的部分都一样。http://forum.ubuntu.org.cn/viewtopic.php?f=155&t=336195

这个是3.2的,不带注释,但是里面有新添加的东西。另外这个是根据几个主题改的未完成品,以在这个基础上直接改。
theme.tar.gz
(113.21 KiB) 已下载 653 次
[/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 {...}的后边(实际放哪都一样)。
gnomefix.png
gnomefix.png (3.48 KiB) 查看 80800 次
gnomefix2.png
gnomefix2.png (3.51 KiB) 查看 80800 次
gnomefix3.png
gnomefix3.png (3.58 KiB) 查看 80800 次
gnomefix.png
gnomefix.png (4.16 KiB) 查看 80800 次
gnomefix2.png
gnomefix2.png (3.97 KiB) 查看 80800 次
gnomefix3.png
gnomefix3.png (4.11 KiB) 查看 80800 次
[/size]
上次由 jadeity 在 2011-11-12 22:33,总共编辑 4 次。
头像
ljj_jjl2008
论坛版主
帖子: 14255
注册时间: 2007-09-16 8:29

Re: 图文,一起学习修改gnome-shell主题.

#2

帖子 ljj_jjl2008 » 2011-10-15 17:44

置顶了,楼主继续。
头像
jadeity
帖子: 689
注册时间: 2010-10-21 17:55

Re: 图文,一起学习修改gnome-shell主题.

#3

帖子 jadeity » 2011-10-15 17:47

ljj_jjl2008 写了:置顶了,楼主继续。
:em20 动作太快了,话说你一直在论坛上挂着啊。
头像
ljj_jjl2008
论坛版主
帖子: 14255
注册时间: 2007-09-16 8:29

Re: 图文,一起学习修改gnome-shell主题.

#4

帖子 ljj_jjl2008 » 2011-10-15 17:50

jadeity 写了:
ljj_jjl2008 写了:置顶了,楼主继续。
:em20 动作太快了,话说你一直在论坛上挂着啊。
没有,开了个会,刚回来,正好赶上了。
头像
枫叶饭团
帖子: 14683
注册时间: 2010-06-16 1:05
系统: Mac OS X
来自: Tencent
联系:

Re: 图文,一起学习修改gnome-shell主题.

#5

帖子 枫叶饭团 » 2011-10-15 17:51

长门大神 :em66
头像
remeber
论坛版主
帖子: 13030
注册时间: 2009-01-06 15:18
来自: 人间

Re: 图文,一起学习修改gnome-shell主题.

#6

帖子 remeber » 2011-10-15 17:52

又见吞玻璃。
marked~

ff又不换行了。 :em06
“有一种被人抛诸脑后的过去,包含一些不该遗忘的点点滴滴。欢笑之余,我将故旧拾起,才刹见自己的薄情。人世间似乎存在着某种公平,每个人都曾被抛掷在他人的遗忘中;而今你所有哽咽难宣的话语,也正是你曾为人所期盼,却永远听不见的字句。” —赫曼 赫塞
头像
yq-ysy
论坛版主
帖子: 4432
注册时间: 2008-07-19 12:44
来自: 广西(桂)南宁(邕)

Re: 图文,一起学习修改gnome-shell主题.

#7

帖子 yq-ysy » 2011-10-15 17:58

支持LZ编写详细的教程。
建议把标题改为“Ubuntu 11.10一起学习修改gnome-shell主题美化gnome3(图文教程)”。

补充:有些下载的主题的“应用程序”图标会显得很拥挤,这也是可以修改的

代码: 全选

sudo gedit /usr/share/gnome-shell/theme/gnome-shell.css
可以修改图标垂直水平间距,也可以修改图标大小
可参考《gnome-shell.css 中文注释(附主题一枚)》 http://forum.ubuntu.org.cn/viewtopic.php?t=336195

代码: 全选

/* 这里可以修改图标的间距 */
.all-app .icon-grid {
/*    -shell-grid-item-size: 118px;   */
    -shell-grid-horizontal-item-size: 118px;
    -shell-grid-vertical-item-size: 118px;
}

/* 这里可以修改图标的大小 */
.all-app .overview-icon {
    icon-size: 96px;
}
头像
jadeity
帖子: 689
注册时间: 2010-10-21 17:55

Re: 图文,一起学习修改gnome-shell主题.

#8

帖子 jadeity » 2011-10-15 18:34

yq-ysy 写了:随着版本的更新换代,compiz 的3D桌面也终于可以退休了,支持LZ编写详细的教程。
建议把标题改为“Ubuntu 11.10一起学习修改gnome-shell主题美化gnome3(图文教程)”。
改了一下。
头像
liyin_it
帖子: 54
注册时间: 2011-08-21 23:40
来自: 一颗成长的小白菜

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#9

帖子 liyin_it » 2011-10-15 20:05

:em11 虽然我不懂ubuntu,但我一直用着ubuntu(只会一些简单的操作) :em03 我一直是一个渴望自由的孩子
头像
yejustme
帖子: 405
注册时间: 2007-04-18 12:08
联系:

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#10

帖子 yejustme » 2011-10-15 23:33

liyin_it 写了::em11 虽然我不懂ubuntu,但我一直用着ubuntu(只会一些简单的操作) :em03 我一直是一个渴望自由的孩子
你的头像和我的头像……
头像
到处看看
论坛版主
帖子: 8486
注册时间: 2010-01-17 13:05
系统: ubuntu

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#11

帖子 到处看看 » 2011-10-16 8:30

前排膜拜学习 :em11
头像
YeLee
论坛版主
帖子: 26406
注册时间: 2008-08-13 8:48
系统: Fundu i64
来自: 东海硇州,一双管钥。
联系:

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#12

帖子 YeLee » 2011-10-16 9:41

支持一下 :em11 :em11 :em11
◎当我站在道德的高度上俯视别人的时候,发现自己是多么渺小。
♥执着但不偏激,反对而不排斥,坚决捍卫矛盾体的存在方式。
★★★天气预报★★★
fcitx-yatable一个可以使用的码表输入法
[教程]几个实例攻克软件编译难关
Gentoo Development Guide
字体相关
头像
monk
帖子: 19507
注册时间: 2010-01-28 10:45

Re: 图文,一起学习修改gnome-shell主题.

#13

帖子 monk » 2011-10-16 9:53

remeber 写了:又见吞玻璃。
marked~

ff又不换行了。 :em06
刚发现 :em06 7.0.1的

*********宁静致远*********
如果我说的有什么不对,请看签名第一行
jiangzongjun
帖子: 23
注册时间: 2008-04-04 13:37

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#14

帖子 jiangzongjun » 2011-10-16 11:02

:em11 此帖必火!先顶再说。
头像
min459980089
帖子: 81
注册时间: 2011-03-01 9:45
联系:

Re: Ubuntu 11.10一起学习修改gnome-shell主题(图文)

#15

帖子 min459980089 » 2011-10-16 17:38

这个强大啊 :em02
日常就差一个CAD了。
回复