教程 | 如何美化评论箱

一月 04, 2022 | views
Comments 0
教程 | 如何美化评论箱 - Tutorial requested by Michelle - 这篇教程有点乱、请大家耐心的浏览哦 :) * 教程只限新模板使用者 * 教程 I - 美化评论箱 1. 设计→ 修改 HTML 2. 按 Ctrl+F 寻找代码 .post

教程 | 如何美化评论箱


- 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. 保存即可。