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评论框架

已有 9 条评论

  1. 短短 短短   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

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

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

  2. YAMADIE YAMADIE   Windows 10 Windows 10   Google Chrome  Google Chrome

    学习了

  3. 子午 子午   Windows 10 Windows 10   Google Chrome  Google Chrome

    谢谢分享

添加新评论