After reading some comments from you on
Customize threaded comment system and check by myself ,there's an error when applying CSS in this post: the reply button and load more button are not work .
Now in this post ,I will show you how to customizing theaded comment system like Simplex Bigblue template .
New threaded comment system use more javascript than the old comment form . It's mean if we look into the template code ,we couldn't know what HTML tags will be used in comment form ,therefore hard to write CSS .
To know what HTML tags has been generated by javascript ,you can wait for page fully loaded ,and then save that page to your computer .
Check the downloaded page ,we can see what HTML tags in comment .
All of these HTML tags are decorated by CSS attributes in default Blogger CSS file . You can't download/edit/modify this CSS file . So the solution here is to write new CSS in template file to overwrite the defaults .
Here is the HTML code of threaded comment that I dumped in my blog :
<div class="comments-content">
<div id="comment-holder">
<div kind="x" id="xxx">
<div id="xxx">
<div u="x" t="x" kind="x" class="comment-thread" id="xxx">
<ol id="xxx">
<li kind="x" class="comment" id="xxx">
<div class="avatar-image-container">
<img src="avatar">
</div>
<div class="comment-block" id="xxx">
<div kind="x" class="comment-header" id="xxx">
<cite class="user"><a href="xxxx" rel="nofollow">Comment name</a></cite>
<span class="icon user"></span>
<span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time</a></span>
</div>
<p class="comment-content" id="xxx">comment body</p>
<span kind="x" class="comment-actions secondary-text" id="xxx">
<a o="r" target="_self" href="javascript:;" kind="i">Reply</a>
<span class="xxxxxx">
<a href="xxx" target="_self" o="x">Delete</a>
</span>
</span>
</div>
<div class="comment-replies" id="xxx">
<span kind="x" id="xxx">
<div u="x" t="x" kind="x" class="comment-thread inline-thread" id="xxx">
<span kind="x" class="thread-toggle thread-expanded" id="xxx">
<span class="thread-arrow" id="xxx"></span>
<span class="thread-count" id="xxx">
<span style="display: none;" id="xxx"></span>
<span style="display: none;" id="xxx"></span>
<a target="_self" href="javascript:;">Replies</a>
<div class="thread-dropContainer thread-expanded" id="xxx">
<span class="thread-drop"></span>
</div>
</span>
</span>
<ol class="thread-chrome thread-expanded" id="xxx">
<div>
<li kind="b" class="comment" id="xxx">
<div class="avatar-image-container">
<img src="avatar of people who reply comment above">
</div>
<div class="comment-block" id="xxx">
<div kind="m" class="comment-header" id="xxx">
<cite class="user blog-author"><a href="xxx" rel="nofollow">name of people who reply comment</a></cite>
<span class="icon user blog-author"></span>
<span class="datetime secondary-text"><a href="xxx" rel="nofollow">date and time reply comment</a></span>
</div>
<p class="comment-content" id="xxx">comment body</p>
<span kind="m" class="comment-actions secondary-text" id="xxx">
<span class="item-control blog-admin pid-868019743"><a href="xxx" target="_self" o="d">Delete</a></span>
</span>
</div>
<div class="comment-replies" id="xxx"></div>
<div class="comment-replybox-single" id="xxx"></div>
</li>
</div>
<div kind="ci" class="continue" id="xxx"><a target="_self" href="javascript:;">Reply</a></div>
</ol>
<div class="comment-replybox-thread" id="xxx"></div>
</div>
</span>
</div>
<div class="comment-replybox-single" id="xxx"></div>
</li>
</ol>
<div kind="ci" class="continue" id="xxx" style="display: none;">
<a target="_self" href="javascript:;">Add comment</a>
</div>
<div class="comment-replybox-thread" id="xxx">
xxxxxxxxx
</div>
<div kind="rb" class="loadmore loaded" id="xxx"><a target="_self" href="javascript:;">Load more...</a></div>
</div>
</div>
</div>
</div>
</div>
Please take a look at the code above . I censored unnecessary information in the code above . What we need to know is HTML tags and class attribute of these class .
Base on the HTML markup above ,we can write CSS code to decorate them as we want .
Here is the code that I applied in Simplex Bigblue template .You can consider it an example .
.comment {
list-style-type: none;
width: 100%;
}
.comment .avatar-image-container img {
width: 35x;
height:35px;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #DDDDDD;
margin: 0;
padding: 3px;
vertical-align: middle;
}
.comment .avatar-image-container {
float: left;
max-height: 36px;
overflow: visible;
width: 36px;
}
.comment .comment-block {
margin-left: 70px;
position: relative;
background: none repeat scroll 0 0 #F7F7F7;
border: 1px solid #E4E4E4;
border-radius: 4px 4px 4px 4px;
overflow: hidden;
padding: 15px 20px 5px;
}
.comment .comments-content .datetime {
font-size: 11px;
font-style: italic;
margin-left: 6px;
float:right;
}
.comment .comments-content .datetime a{
color:#999;
}
.comment .comments-content .user {
font-style: normal;
font-weight: bold;
}
.comment .comments-content .user a {
color:#333;
}
.comment .comment .comment-actions a {
background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
border-radius: 2px 2px 2px 2px;
border-right: 1px solid #C4C4C4;
border-style: solid;
border-width: 1px;
color: #424242 !important;
display: inline-block;
margin: 5px;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #FFFFFF;
font: 11px/18px sans-serif;
margin: 5px;
padding: 1px 6px;
}
.comment .continue a {
background: -moz-linear-gradient(center top , #FFFFFF 20%, #E5E5E5 100%) repeat scroll 0 0 transparent;
border-color: #E4E4E4 #C4C4C4 #C4C4C4 #E4E4E4;
border-radius: 2px 2px 2px 2px;
border-right: 1px solid #C4C4C4;
border-style: solid;
border-width: 1px;
color: #424242 !important;
display: inline-block;
margin: 5px;
padding: 7px 10px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #FFFFFF;
font: 11px/18px sans-serif;
margin: 5px;
padding: 1px 6px;
}
.comment .comments-content .loadmore.loaded {
background: none repeat scroll 0 0 #4488DD !important;
color: #FFFFFF;
max-height: 0;
opacity: 0;
overflow: hidden;
padding: 10px;
text-align: center;
}
You can copy this CSS code if you want threaded comment like Simplex Bigblue template ,or write more CSS code if you want to make it as you want .
Hope this post helpful to you .
ليست هناك تعليقات:
إرسال تعليق