Typecho 默认主题评论框架样式修改方法

网站使用的主题是基于 Typecho 1.0 正式版默认主题二次开发的,此方法仅测试了默认主题,其他主题未测试,可照葫芦画瓢参考修改 CSS 以及评论框架。

之前修改了整体UI样式,简约风格一直是我所喜欢的,主题也不便开源,因为有些实现的功能是修改了 Typecho 程序源码的,一旦分享,当你安装之后有可能出现未知 BUG,除非你动手能力强,否则别轻易找我要,虽然我很乐意分享。

本来想把功能都集成在主题里,开源也方便,但是我也忘记修改了哪些具体的源码,这个网站修改的时间前前后后大概有两三个月,毕竟上班族,只能抽出闲时时间慢慢修改,就这样吧,如果想要此主题的人比较多了,我再抽出时间慢慢集成在主题里并开源。

新评论框架:

20181206230457.png

看上去是不是比默认主题的评论框架更顺眼呢?

修改方法:

进入后台编辑 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


标签: typecho主题评论框架, typecho评论框架

已有 10 条评论

  1. 欧文斯 欧文斯   Windows 10 Windows 10   Google Chrome  Google Chrome

    管理员提示这个,不算是 bug,代码只考虑样式,没有加入是否登录判断,要解决也简单,加入即可,但要考虑的问题是加入后,又要以什么样的样式显示

  2. 短短 短短   Windows 10 Windows 10   Maxthon  Maxthon

    想请问下,就是Typecho原生主题如果想让抬头区域换个颜色,应该修改哪里的代码?谢谢。

    1. Cyclists站长 Cyclists   Windows 7 Windows 7   Google Chrome  Google Chrome

      您说的具体位置是什么地方?

      1. 短短 短短   Windows 10 Windows 10   Maxthon  Maxthon

        就是所有页面的header区域。我找遍了原生css文档,怎么改也改不了。

        1. Cyclists站长 Cyclists   Mac OS X Mac OS X   Safari Safari

          明白了,网站头部颜色更改?这个好解决,以前自己测试过,利用chrome浏览器审查元素,然后在需要的地方插入代码即可!

          1. 短短 短短   Windows 10 Windows 10   Maxthon  Maxthon

            是的是的,就是那个区域。我就是没找到要在哪个文件里改代码!

        2. Cyclists站长 Cyclists   Mac OS X Mac OS X   Safari Safari

          您好,是主题哪个地方需要修改?比如我网站LOGO标题导航菜单那一大片底部更改颜色?如果是,我三天之内帮你解决,因为过年期间没啥时间,我的微信在我关于页面有个wechat链接,那个是我的微信二维码!

          1. 短短 短短   Windows 10 Windows 10   Maxthon  Maxthon

            不着急不着急,我这几天也在过年。就是刚好看到你改的是原生主题,想请教下。

            毕竟我测试过很多主题,确实是原生主题在方方面面兼容性最好。

  3. YAMADIE YAMADIE   Windows 10 Windows 10   Google Chrome  Google Chrome

    学习了

添加新评论