制作 Elegant Box 主题风格

能不能做个橙色的风格?
有没打算做一个奥运中国红的风格?
为什么 2.1 版的 Elegant Box 中没有你上次用的黄色风格?

嗯... 没错, Elegant Box 是一个多配色的主题, 可以不断地往里面添新的风格, 而且做一个新的配色也不会费很多时间. 但我依然不能满足大家的要求, 原因有三:
1. 这个主题这么设计就是为了方便大家自定义自己的配色, 以免太多重复.
2. 全由我一个人完成, 再简单的事情也会变得吃力.
3. 转换风格一栏就那么点地, 多放几个就要换行了.

为此, 我以前在 1.4 版的时候追加了紫色风格, 里面有详细的中文注释. 但可能我表达不好, 貌似没起到什么效果. 所以我决定用图片加解说的办法再理一理制作新配色的步骤.

对于以下内容, 你需要知道一点 CSS, 尤其是 16 进制的他白色代码, 也就是说你知道 #0000FF 是什么都足够了.

制作准备

不知道你是否已经注意到, 其实几种配色的在结构上还是有一点点不同的, 现在有三种结构:
1. 白色, 蓝色, 紫色基本上是一样的.
2. 黑色最特别, 比较适合作为深颜色的风格.
3. 绿色的侧边栏边界和其他几款是不一样的.

如果你第一次做, 最好在三类中选择一个作为模板.

制作教程

以下教程演示在紫色风格的基础上修改出一个新的配色.

1. 拷贝 purple 文件夹, 并重命名它. (以 gray 为例) 注意: 文件夹名字只能包含英文, 数字, '-' 和 '_'.
新建后你可以在页面去刷新一下, 看风格转换栏是不是多了个按钮? 如果是, 恭喜你, 你的第一步成功了!

2. 进入 gray 目录, 打开文件 global.css, 修改风格转换按钮的颜色. 记得将文件中所有的 purple 替换为 gray 哦.

/* 灰色风格选择按钮的颜色 */
#style-gray a img {
	background:#AAA;
}
/* 灰色风格选择按钮的悬停颜色 */
#style-gray a:hover img {
	background:#CDCDCD;
}

打开文件 default.css 继续修改, 将文件中所有的 purple 替换为 gray, 并修修改目前风格按钮的背景颜色.

/* 目前风格按钮的外空白 */
#styleswitcher #style-gray {
	margin-top:0; /* 此项不用修改 */
}
/* 目前风格按钮的背景和大小 */
#styleswitcher #style-gray a img {
	background:#CDCDCD;
	width:12px; /* 此项不用修改 */
	height:12px; /* 此项不用修改 */
}

请看下图, 新建的是最后一个按钮 (你新建的不一定是最后一个). 上面的是在正常情况下的状态, 中间的是鼠标在其上悬停的时的状态, 下面的是选为当前风格时的状态. (因为其他样式还没修改, 所以周围都是紫色的)

第 3, 第 4 和第 5 步, 说白了就是替换所有颜色而已, 如果你已经有很好的办法, 可以跳过.

3. 接着要做的看似复杂, 其实还是比较简单的. 再次打开文件 default.css, 将所有 :# 置换为 : # (':' 和 '#' 之间留一个空格, 半角空格)

4. 搜索 ' #' (注意: '#' 前有个半角空格), 然后全局置换找到的颜色, 再将 ': #{颜色代号}' ('#' 前有空格) 全局置换为 ':#{颜色代号}' ('#' 前无空格). 如:
(1) 搜索 ' #' 找到 ': #E7DFE9' ('#' 前有空格)
(2) 将 '#E7DFE9' 全部置换为 '#E6E6E6'
(3) 将 ': #E6E6E6' ('#' 前有空格) 全部置换为 ':#E6E6E6' ('#' 前无空格)

5. 循环第 4 步, 直到不能在找到 ': #{颜色代号}' ('#' 前有空格). 这时候去刷新页面可能还有些边界什么的颜色和你预想的不一致. 那么你可以继续搜索 ' #' ('#' 前有空格), 通过查看注释找到需要修改的.

6. 当页面配色完成后, 你会发现有些图标可以看到锯齿, 那么你得自己动手做几个图片了. PNG 图片保存在 "/elegantbox/images/src/" 中, 你可以将它们做成 gif.
BTW, 记得换换背景图,

通过以上步骤, 就可以完成一个新的配色风格了, 其实只是简单的改改颜色.
如果你正发愁找不到合适的配色, 到这来逛逛吧, 这是一群十分 "好色" 的家伙. COLOURlovers
如果你想进一步修改, 只要你懂得 CSS, 在 default.css 这个文件里面修改就行了, 当你选中某个风格, 属于它的 default.css 的代码会覆盖主题目录中的 style.css 的部分代码的.

后记

当你做完一个新的配色风格, 并希望能与其他人分享, 你可以以自己的名义发布这个风格, 也可以将它发给我. 如果你准备发给我, 请确保它已经通过 CSS level 2.1 或以上验证, 并提供以下信息:
风格名称: (必须)
对应版本: (必须)
风格描述: (可选)
作者昵称: (必须)
个人主页: (可选)