S2 CSS: Entry page ids and classes

Expand: We are expanding the content here!

In addition to the entry stuff described in S2 CSS: Entry ids and classes, these additional classes are found only on the entry page. They mostly apply to the display of comments.

The entry page has body.page-entry as its body class.

Changes from normal entry classes

The bottom is a bit different from that described in S2 CSS: Entry ids and classes:

div#comments

has div.inner

• Affects: The whole comments section of the page. This is right under the div.entry-wrapper.

div.comment-thread

• .comment-depth-odd -- An odd level comment in the thread. Threads start at odd.
• .comment-depth-even -- An even level comment in the thread. Threads start at even.
• .comment-depth-$N -- Where $N is the level depth of the comment.

div#cmt$N =

= $N stands for the number of the comments. This isn't really all that useful for styling, it's more of a marker for browsers to be able to link to a certain comment.

Warning: The inline style is going away!

Has inline style of:

style='margin-left: 25px; margin-top: 5px'

div.comment-wrapper

Different classes:

• .comment-wrapper-odd -- An odd numbered comment for comments on that level in the thread.
• .comment-wrapper-even -- An even numbered comment for comments on that level in the thread.
• .visible -- This comment is visible.
• .deleted -- This comment is deleted.
• .screened -- This comment is screened.
• .poster-$USER -- This comment was made by $USER
• .full
• .partial
• .no-userpic -- This comment doesn't have an icon.
• .has-userpic -- This comment has an icon.
• .entry-author -- This comment was made by the entry's author.

div.separator, with div.separator-before and div.separator-after

These separator divs come before and after comment content.

These divs have an .inner div, too.

Inside div.comment

has .inner

Warning: Right now some things are not inside the inner div.

div.contents

has .inner

span.poster-ip

Only shown to viewers.

div.footer

has .inner

ul.comment-management-links

The links/buttons for managing comments: delete/screen/freeze/track/etc

• li.link
• li.delete_comment
• li.screen_comment
• li.freeze_thread
• li.watch_thread

ul.comment-interaction-links

The text links to reply/parent/thread on a given topic

• li.link
• li.reply
• li.thread