February 02
Typecho 默认主题评论框架样式修改方法
进入后台编辑 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">
在定位到以上代码之后,删除此代码之后标签之前的所有代码,并添加以下代码;
<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>
作者:https://inwao.com/comment.html
:D 少女祈祷中...