Learning S2 Complete Style

S2 Complete Style is a pretty huge layout—it's easy to get overwhelmed! [info]s2complete is a complete documentation resource brought to you by [info]tessisamess.

This documentation breaks down S2 Complete Style piece by piece so you can learn just how every piece works. Once you understand the layout dynamics you'll be glad it's such a comprehensive sheet; it makes the possibilities nearly endless!

December 2017

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

Summary

Syndicate

RSS Atom
Powered by InsaneJournal

Posts Tagged: '07.+comments'

Dec. 4th, 2017

07. Comments

Since most of us don't use this section of Complete Style I'm going to make this lesson more of just a quick overview. The comments section is on .lj-view-entry and is only available on Paid and Permanent accounts. They bear some similarities to entry styling, as you'll see below. If you're making a layout for a free account you can delete this entire section from the stylesheet.

Your entire comments section is contained in two divs, like most of Complete Style's elements:

#comments{margin:0 1em;}
#comments-inner{}


Just inside of this is your header and navigation. The .comments-header class is a div containing an h2 title. Honestly, I usually find this a little superfluous and I disable it when I use comments pages. The .comments-nav class is a div containing a link and shows up twice, once before your entry comments and once after them; this is a link to post a new comment.

.comments-header{}
.comments-header h2{}

.comments-nav{text-align:center;margin:2em;}
.comments-nav a{}


The .comments-list container is the container that holds all comments on the entry, and .comment is each comment thread, NOT each individual comment. The .comment-each div is each individual comment. The .comment-even is a great additional class; it selects every other comment in a thread starting with the first reply (since the first comment is an odd number) and can be a really nice touch to style.

.comments-list{}
.comment{}
.comment-each{margin:20px 0 0 0;padding:1px;min-height:100px;}
.comment-even{}


Your .comment-header contains all upper comment content; this includes: userpic, poster name, date, subject, and IP address (if you have IP logging enabled.)

.comment-header{border:1px solid #aaa;background:#eee;padding:2px 5px;}

Your comment userpic is a div with an image inside of it, so you can style the container or the specific image, depending on your preference:

.comment-userpic{float:right;margin:5px;}
.comment-userpic img{}


The .comment-by class contains your .poster span (which contains an ljuser tag) and your .metadata span (which is your IP logging.)

.comment-by{}
.poster{}
.metadata{font-size:small;}


Your date is just beneath this section, and your comment subject is under that:

.comment-date{font-size:small;color:#999;}

.comment-subject{}
.comment-subject h3{margin:0;padding:.15em 0;font-weight:normal;}


The content of each comment is wrapped in .comment-content and this is ONLY the person's reply.

.comment-content{padding-top:1em;}

Your comment linkbar is very similar to your entry linkbar, except it's wrapped in an outer div called .comment-footer in addition to .comment-linkbar just inside of that.

.comment-footer{}
.comment-linkbar{}
.comment-linkbar ul{list-style:none;margin-left:0;padding-left:0;}
.comment-linkbar li{display:inline;padding:0 .5em;border-left:1px solid #000;}
li.first-cl{border-left:none;}


Each reply to a comment has an indent so you can tell threads apart, but I imagine if you wanted to reset this margin you could do that and signify new threads by styling .comment instead (that could be interesting!)

.comment-replies{margin-left:35px;}

When comments collapse the .comment container for that thread adds .collapsed-comment to itself, so this is a container and NOT each individual collapsed comment. For each collapsed comment use .collapsed-comment .comment-footer instead. The .collapsed-comment-link is for the link title of the comment, which will read either as the comment's subject line or (no subject) if there is none.

.collapsed-comment{}
.collapsed-comment .comment-footer{margin-bottom:1em;}
.collapsed-comment-link{}


Your comment reply forms have two versions. The .replyform is the one you'll get if clicking to add a comment while on the main entries view, and .quickreply_comment is the expanding comment form that shows up when you click to add a comment while on the actual entry itself. The #commenttext ID is for the textarea in your reply forms.

.replyform{}
.quickreply_comment{}
#commenttext{width:100%;}


There's a lot more you can do with these forms by styling the various types of input fields, etc., but I'll just leave you with this information on form elements to see what each type of form is so you'll know what to target if you want in-depth form styling for this area.

If there is more interest in using comments in Complete Style layouts, please leave a comment at the helpdesk and I'll break this section into subsections and spend more time on it!