教程 | 如何美化评论箱

- Tutorial requested by Michelle -

这篇教程有点乱、请大家耐心的浏览哦 :)

* 教程只限新模板使用者 *

教程 I - 美化评论箱

1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .post-footer {

3. 在 .post-footer { 里面添加你想要美化的代码，例：

添加框框

border: 1px solid #000000;

红色代码：框框的粗度

蓝色代码：框框的类型

紫色代码：框框的颜色

添加背景

（纯颜色）background-color: #000;

（背景图）background-image: url(图片 url);

红色代码：背景的颜色

蓝色代码：背景图的网址

添加小图片

background-image: url(图片 url);

background-repeat: no-repeat;

background-position: left top; 

红色代码：小图片的网址

蓝色代码：图片的位置

（left top = 左上角 以此类推）

为框框添加圆框

border-radius: 6px;

红色代码：框框的弧度

* 建议你们在 {...} 之间添加 padding: 3px; 这样看起来，你的内容不会粘着你的框框了。

4. 保存即可。

教程 II - 在作者旁边添加小图片

1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .comments .comments-content .icon.blog-author {

3. 将 .comments .comments-content .icon.blog-author { 里面的代码全部删除，添加以下的代码：

background-image: url(图片 url);
background-repeat: no-repeat;
padding: 2px;

红色代码：小图片的网址

4. 保存即可。

教程 III - 美化博友的留言箱

1. 设计 → 修改 HTML

2. 按 Ctrl+F 寻找代码 .comments .comments-content .comment-content {

若寻找不到此代码，可寻找代码：

/* Comments

----------------------------------------------- */

然后在这个代码下面添加 .comments .comments-content .comment-content {...}

3. 在 .comments .comments-content .comment-content { 里面添加美化的代码

美化方式如 教程 I 一样。

4. 保存即可。