Typecho 默认主题评论框架样式修改方法
网站使用的主题是基于 Typecho 1.0 正式版默认主题二次开发的，此方法仅测试了默认主题，其他主题未测试，可照葫芦画瓢参考修改 CSS 以及评论框架。
之前修改了整体UI样式，简约风格一直是我所喜欢的，主题也不便开源，因为有些实现的功能是修改了 Typecho 程序源码的，一旦分享，当你安装之后有可能出现未知 BUG，除非你动手能力强，否则别轻易找我要，虽然我很乐意分享。
本来想把功能都集成在主题里，开源也方便，但是我也忘记修改了哪些具体的源码，这个网站修改的时间前前后后大概有两三个月，毕竟上班族，只能抽出闲时时间慢慢修改，就这样吧，如果想要此主题的人比较多了，我再抽出时间慢慢集成在主题里并开源。
新评论框架：
看上去是不是比默认主题的评论框架更顺眼呢？
修改方法：
进入后台编辑 style.css 主题文件，在最后添加以下 CSS 代码；
#comment-form {
padding-top: 5px;
}
.col1 {
margin-right: -210px;
height: auto;
float: left;
width: 100%;
position: relative;
background-position: 0 0;
}
.col2 {
width: 194px;
float: right;
position: relative;
overflow: hidden;
background-position: right top;
}
.clear {
clear: both;
}
.col2 p, .col1 p {
margin: 9px 0;
}
#comment-form label {
display: block;
color: #888;
position: absolute;
margin: 8px;
}
#comment-form input {
padding: 5px 6px;
line-height: 16px;
height: 32px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
border: solid 1px #D4D4D4;
background: #fdfdfd;
font: 14px;
padding-left: 50px;
}
button.submit {
border: 1px solid #ddd;
display: block;
line-height: 32px;
width: 100%;
outline: none;
background: #e8e8e8;
}
button.submit {
color: #6E7173;
text-decoration: none;
-webkit-transition: all .1s ease-in;
-moz-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
border: 1px solid #ddd;
display: block;
line-height: 32px;
width: 100%;
outline: none;
background: #e8e8e8;
}
button.submit:hover {
background: #dfdfdf;
}
.col1 p {
margin-right: 210px;
}
textarea.textarea {
line-height: 1.8;
padding: 5px 10px 5px 10px;
width: 100%;
height: 162px;
padding: 10px;
overflow: auto;
margin: 0;
line-height: 1.8;
color: #222;
font-size: 14px;
background: #fdfdfd!important;
font-family:"Microsoft Yahei";
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {
padding: 5px;
border: 1px solid #ddd;
width: 100%;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
点击保存.
进入后台编辑 comments.php 主题文件定位到以下标签；
<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
在定位到以上代码之后，删除此代码之后</form>标签之前的所有代码，并添加以下代码；
<div class="col1">
<p><textarea rows="8" cols="50" name="text" id="textarea" class="textarea" required><?php $this->remember('text'); ?></textarea></p>
</div>
<div class="col2">
<p><label for="author" class="required">称呼</label><input type="text" name="author" id="author" class="text" value="<?php $this->remember('author'); ?>" required=""></p>
<p><label for="mail" <?php if ($this->options->commentsRequireMail): ?> class="required"<?php endif; ?> >邮箱</label><input type="email" name="mail" id="mail" class="text" value="<?php $this->remember('mail'); ?>" <?php if ($this->options->commentsRequireMail): ?> required <?php endif; ?>></p>
<p><label for="url"<?php if ($this->options->commentsRequireURL): ?> class="required"<?php endif; ?>>网站</label><input type="url" name="url" id="url" class="text" placeholder="https://example.com" value="<?php $this->remember('url'); ?>" <?php if ($this->options->commentsRequireURL): ?> required<?php endif; ?>></p>
<p><button type="submit" class="submit">提交评论</button></p>
</div>
<div class="clear"></div>
点击保存.
Bug：后台登陆之后切换到前台无法直接回复评论（无管理员已登录提示）
现在清空一下 cookie 缓存或者浏览器无痕模式刷新一下，即可看到新的评论框。
如果您怕修改出错，可使用我已经修改好的两个主题文件，直接上传覆盖即可；
下载地址：comment.zip
技术支持：https://vircloud.net
