[英]customize wp_list_comments design
我正在使用wp_list_comments
函数在我的主题中列出 comment.php 中的评论。 请看下面我的设计。 风格对我来说有点复杂。 我正在使用 CSS 来设计外观。
在评论列表中, “THISIS2NDREPLY”评论是“SUBJECT”评论的回复。 如何添加将THISIS2NDREPLY连接到“SUBJECT”注释的行,如设计中所示?
/* CSS 文档 */
#comments {
clear: both;
}
#comments .navigation {
padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
color: #000;
font-size: 20px;
font-weight: bold;
margin-bottom: 0;
}
h3#comments-title {
padding: 24px 0;
}
.commentlist {
list-style: none;
margin: 0;
}
.commentlist li.comment {
/*border-bottom: 1px solid #e7e7e7;*/
line-height: 24px;
margin: 0 0 24px 0;
/*padding: 0 0 0 56px;*/padding: 0 0 0 0px;
position: relative;
}
.commentlist li:last-child {
border-bottom: none;
margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
margin-bottom: 18px;
}
#comments .comment-body p:last-child {
margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
margin-bottom: 24px;
}
.commentlist ol {
list-style: decimal;
}
.commentlist .avatar {
position: absolute;
top: 4px;
left: 0;
}
.comment-author {
}
.comment-author cite {
color: #4F57FF;
font-style: normal; font-size:16px;
font-weight: bold;
}
.comment-author cite a{ color: #4F57FF; text-decoration:none;}
.comment-author .says {
font-style: italic;
}
.comment-meta {
font-size: 12px;
margin: 0 0 18px 0; margin: 0 0 5px 0;
}
.comment-meta a:link,
.comment-meta a:visited {
color: #545354;
text-decoration: none; font-weight:bold;
}
.comment-meta a:active,
.comment-meta a:hover {
color: #ff4b33;
}
.commentlist .even {
}
.commentlist .bypostauthor {
}
.reply {
font-size: 12px;
padding: 0 0 0px 0; clear:both;
}
.reply a,
a.comment-edit-link {
color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
color: #ff4b33;
}
.commentlist .children {
list-style: none;
margin: 0;
}
.commentlist .children li {
border: none;
margin: 0;
}
.commentlist ul.children{
background: #fff url('images/cmt-thrd-L.gif') no-repeat 0px 0px;
}
.commentlist .depth-1 {
background: #fff url('images/cmt-thrd-vline.gif') repeat-y -38px 0; float:left;
}
.commentlist li.depth-2, .commentlist li.depth-3, .commentlist li.depth-4, .commentlist li.depth-5 {
background: #fff url('images/cmt-thrd-vline.gif') repeat-y -38px 0;
}
.commentlist li.depth-1{
border-left:0px solid #C1C5FE;}
我不知道如何将链接箭头应用于评论和回复。 所以请建议我。 这该怎么做。
谢谢
你能不能不应用这样的 css 背景图片:
.commentlist li ul li{
background: url('path to image') no-repeat left top;
padding-left:60px;
}
顺便说一句,这是一个非常好的设计
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.