Difference between revisions of "S2 CSS: Entry page ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (→div#comments) |
Foxfirefey (Talk | contribs) (→div.contents) |
||
| (8 intermediate revisions by 2 users not shown) | |||
| Line 29: | Line 29: | ||
* '''Affects:''' The whole comments section of the page. This is right under the <tt>div.entry-wrapper</tt>. | * '''Affects:''' The whole comments section of the page. This is right under the <tt>div.entry-wrapper</tt>. | ||
| − | == <tt>div | + | == <tt>div.comment-thread</tt> == |
| + | * <tt>.comment-depth-odd</tt> -- An odd level comment in the thread. Threads start at odd. | ||
| + | * <tt>.comment-depth-even</tt> -- An even level comment in the thread. Threads start at even. | ||
| + | * <tt>.comment-depth-$N</tt> -- Where $N is the level depth of the comment. | ||
| + | |||
| + | == <tt>div#cmt$N</tt> === | ||
| + | = | ||
$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. | $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. | ||
| Line 39: | Line 45: | ||
style='margin-left: 25px; margin-top: 5px' | style='margin-left: 25px; margin-top: 5px' | ||
| − | === <tt>div.comment-wrapper</tt> === | + | ==== <tt>div.comment-wrapper</tt> ==== |
| − | + | ||
| − | + | ||
Different classes: | Different classes: | ||
| − | * <tt>.comment-wrapper- | + | * <tt>.comment-wrapper-odd</tt> -- An odd numbered comment for comments on that level in the thread. |
| − | * <tt>.comment-wrapper- | + | * <tt>.comment-wrapper-even</tt> -- An even numbered comment for comments on that level in the thread. |
| − | * <tt>.visible</tt> | + | * <tt>.visible</tt> -- This comment is visible. |
| − | * <tt>.deleted</tt> | + | * <tt>.deleted</tt> -- This comment is deleted. |
| − | * <tt>.screened</tt> | + | * <tt>.screened</tt> -- This comment is screened. |
| − | * <tt>.poster-$USER </tt> | + | * <tt>.poster-$USER </tt> -- This comment was made by $USER |
* <tt>.full</tt> | * <tt>.full</tt> | ||
* <tt>.partial</tt> | * <tt>.partial</tt> | ||
| − | * <tt>.no-userpic</tt> | + | * <tt>.no-userpic</tt> -- This comment doesn't have an icon. |
| − | * <tt>.has-userpic</tt> | + | * <tt>.has-userpic</tt> -- This comment has an icon. |
| + | * <tt>.entry-author</tt> -- This comment was made by the entry's author. | ||
| − | ==== <tt>div.separator</tt> | + | ===== <tt>div.separator</tt>, with <tt>div.separator-before</tt> and <tt>div.separator-after</tt> ===== |
| − | + | These separator divs come before and after comment content. | |
| − | + | These divs have an <tt>.inner</tt> div, too. | |
| − | == <tt>div. | + | ===== <tt>div.comment</tt> ===== |
| − | === <tt> | + | === <tt>div.bottomcomment</tt> === |
| − | === <tt>ul.entry-interaction-links</tt> === | + | ==== <tt>ul.entry-management-links</tt> ==== |
| + | |||
| + | ==== <tt>ul.entry-interaction-links</tt> ==== | ||
= Inside <tt>div.comment</tt> = | = Inside <tt>div.comment</tt> = | ||
| Line 84: | Line 91: | ||
has <tt>.inner</tt> | has <tt>.inner</tt> | ||
| − | === <tt>div.userpic<tt> === | + | === <tt>div.userpic</tt> === |
=== <tt>span.poster</tt> and <tt>span.comment-poster</tt> === | === <tt>span.poster</tt> and <tt>span.comment-poster</tt> === | ||
==== <tt>span.ljuser</tt> ==== | ==== <tt>span.ljuser</tt> ==== | ||
| + | |||
| + | === <tt>span.poster-ip</tt> === | ||
| + | |||
| + | Only shown to viewers. | ||
=== <tt>div.comment-content</tt> === | === <tt>div.comment-content</tt> === | ||
| Line 108: | Line 119: | ||
* <tt>li.watch_thread</tt> | * <tt>li.watch_thread</tt> | ||
| − | === ul.comment-interaction-links</tt> === | + | === <tt>ul.comment-interaction-links</tt> === |
The text links to reply/parent/thread on a given topic | The text links to reply/parent/thread on a given topic | ||
Latest revision as of 08:58, 28 December 2010
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.
Contents
Changes from normal entry classes
The bottom is a bit different from that described in S2 CSS: Entry ids and classes:
div.tag
ul.entry-management-links
hr.above-entry-interaction-links
ul.entry-interaction-links
hr.below-entry-interaction-links
hr.below-reply-container
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.
div.comment
div.bottomcomment
ul.entry-management-links
ul.entry-interaction-links
Inside div.comment
has .inner
Warning: Right now some things are not inside the inner div.
div.header
div.comment-title
span.datetime
div.contents
has .inner
div.userpic
span.poster and span.comment-poster
span.ljuser
span.poster-ip
Only shown to viewers.
div.comment-content
has .inner
span.multiform-checkbox
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
