Difference between revisions of "S2 CSS: Entry page ids and classes"

From Dreamwidth Notes
Jump to: navigation, search
(Created page with '{{Expand|text=We are expanding the content here!}} = Classes found only on the Entry page = In addition to the entry stuff described above, these additional classes are found o...')
 
(→‎div.contents)
 
(12 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{Expand|text=We are expanding the content here!}}
 
{{Expand|text=We are expanding the content here!}}
  
−
= Classes found only on the Entry page =
+
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.
  
−
In addition to the entry stuff described above, these additional classes are found only on the entry page. They mostly apply to the display of comments.
+
The entry page has <tt>body.page-entry</tt> as its body class.  
  
−
== div.comments ==
+
= Changes from normal entry classes =
  
−
* '''Affects:''' The whole comments section of the page
+
The bottom is a bit different from that described in [[S2 CSS: Entry ids and classes]]:
−
* '''Views:''' Entry
+
  
−
=== div.comment ===
+
== <tt>div.footer</tt> ==
  
−
* '''Affects:''' A single comment
+
=== <tt>div.tag</tt> ===
−
* '''Views:''' Entry
+
  
−
==== div.header ====
+
=== <tt>ul.entry-management-links</tt> ===
  
−
* '''Affects:''' A comment's header block, which is made up of the subject and the date/time stamp
+
=== <tt>hr.above-entry-interaction-links</tt> ===
−
* '''Views:''' Entry
+
  
−
==== div.comment-title ====
+
=== <tt>ul.entry-interaction-links</tt> ===
  
−
* '''Affects:''' The subject/title of a specific comment
+
=== <tt>hr.below-entry-interaction-links</tt> ===
−
* '''Views:''' Entry
+
  
−
==== div.userpic ====
+
=== <tt>hr.below-reply-container</tt> ===
  
−
Described above, under the classes used in entries.
+
= <tt>div#comments</tt> =
  
−
==== div.comment-content ====
+
has <tt>div.inner</tt>
  
−
* '''Affects:''' The content of the comment, as written by the comment author
+
* '''Affects:''' The whole comments section of the page.  This is right under the <tt>div.entry-wrapper</tt>.
−
* '''Views:''' Entry
+
−
* '''Other information:''' Excludes all metadata; this is just what the author wrote, nothing about their name etc
+
  
−
==== ul.comment-management-links ====
+
== <tt>div.comment-thread</tt> ==
  
−
* '''Affects:''' The links/buttons for managing comments: delete/screen/freeze/track/etc
+
* <tt>.comment-depth-odd</tt> -- An odd level comment in the thread.  Threads start at odd.
−
* '''Views:''' Entry
+
* <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.
  
−
==== ul.comment-interaction-links ====
+
== <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.
  
−
* '''Affects:''' The text links to reply/parent/thread on a given topic
+
{{Warn|text=The inline style is going away!}}
−
* '''Views:''' Entry
+
 
 +
Has inline style of:
 +
 
 +
style='margin-left: 25px; margin-top: 5px'
 +
 
 +
==== <tt>div.comment-wrapper</tt> ====
 +
 
 +
Different classes:
 +
 
 +
* <tt>.comment-wrapper-odd</tt> -- An odd numbered comment for comments on that level in the thread.
 +
* <tt>.comment-wrapper-even</tt> -- An even numbered comment for comments on that level in the thread.
 +
* <tt>.visible</tt> -- This comment is visible.
 +
* <tt>.deleted</tt> -- This comment is deleted.
 +
* <tt>.screened</tt> -- This comment is screened.
 +
* <tt>.poster-$USER </tt> -- This comment was made by $USER
 +
* <tt>.full</tt>
 +
* <tt>.partial</tt>
 +
* <tt>.no-userpic</tt> -- This comment doesn't have an icon.
 +
* <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>, 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.comment</tt> =====
 +
 
 +
=== <tt>div.bottomcomment</tt> ===
 +
 
 +
==== <tt>ul.entry-management-links</tt> ====
 +
 
 +
==== <tt>ul.entry-interaction-links</tt> ====
 +
 
 +
= Inside <tt>div.comment</tt> =
 +
 
 +
has <tt>.inner</tt>
 +
 
 +
{{Warn|text=Right now some things are not inside the inner div.}}
 +
 
 +
== <tt>div.header</tt> ==
 +
 
 +
=== <tt>div.comment-title</tt> ===
 +
 
 +
=== <tt>span.datetime</tt> ===
 +
 
 +
== <tt>div.contents</tt> ==
 +
 
 +
has <tt>.inner</tt>
 +
 
 +
=== <tt>div.userpic</tt> ===
 +
 
 +
=== <tt>span.poster</tt> and <tt>span.comment-poster</tt> ===
 +
 
 +
==== <tt>span.ljuser</tt> ====
 +
 
 +
=== <tt>span.poster-ip</tt> ===
 +
 
 +
Only shown to viewers.
 +
 
 +
=== <tt>div.comment-content</tt> ===
 +
 
 +
== <tt>div.footer</tt> ==
 +
 
 +
has <tt>.inner</tt>
 +
 
 +
=== <tt>span.multiform-checkbox</tt> ===
 +
 
 +
=== <tt>ul.comment-management-links</tt> ===
 +
 
 +
The links/buttons for managing comments: delete/screen/freeze/track/etc
 +
 
 +
* <tt>li.link</tt>
 +
* <tt>li.delete_comment</tt>
 +
* <tt>li.screen_comment</tt>
 +
* <tt>li.freeze_thread</tt>
 +
* <tt>li.watch_thread</tt>
 +
 
 +
=== <tt>ul.comment-interaction-links</tt> ===
 +
 
 +
The text links to reply/parent/thread on a given topic
 +
 
 +
* <tt>li.link</tt>
 +
* <tt>li.reply</tt>
 +
* <tt>li.thread</tt>
  
 
[[Category: S2 CSS]]
 
[[Category: S2 CSS]]

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.

Changes from normal entry classes

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

div.footer

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

div.footer

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
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS:_Entry_page_ids_and_classes&oldid=9399"