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...')
 
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 page 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 ==
+
= div#comments =
  
−
* '''Affects:''' The whole comments section of the page
+
* '''Affects:''' The whole comments section of the page.  This is right under the <tt>div.entry-wrapper</tt>.
−
* '''Views:''' Entry
+
  
−
=== div.comment ===
+
== div#ljcmt$N ==
  
−
* '''Affects:''' A single 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.
−
* '''Views:''' Entry
+
  
−
==== div.header ====
+
Has inline style of:
  
−
* '''Affects:''' A comment's header block, which is made up of the subject and the date/time stamp
+
style='margin-left: 25px; margin-top: 5px'
−
* '''Views:''' Entry
+
  
−
==== div.comment-title ====
+
=== div.comment-wrapper ===
  
−
* '''Affects:''' The subject/title of a specific comment
+
{{Warn|text=.comment-wrapper-a/b might change to wrapper-odd/even}}
−
* '''Views:''' Entry
+
  
−
==== div.userpic ====
+
Different classes:
  
−
Described above, under the classes used in entries.
+
* .comment-wrapper-a
 +
* .comment-wrapper-b
 +
* .visible
 +
* .screened
 +
* .poster-$USER
 +
* .full
 +
* .partial
 +
* .no-userpic
 +
* .has-userpic
  
−
==== div.comment-content ====
+
==== div.separator and div.separator-pre ====
  
−
* '''Affects:''' The content of the comment, as written by the comment author
+
{{Warn|text= separator-pre might change to separator-before}}
−
* '''Views:''' Entry
+
−
* '''Other information:''' Excludes all metadata; this is just what the author wrote, nothing about their name etc
+
  
−
==== ul.comment-management-links ====
+
has .inner
  
−
* '''Affects:''' The links/buttons for managing comments: delete/screen/freeze/track/etc
+
==== div.comment ====
−
* '''Views:''' Entry
+
  
−
==== ul.comment-interaction-links ====
 
  
−
* '''Affects:''' The text links to reply/parent/thread on a given topic
+
= Inside div.comment =
−
* '''Views:''' Entry
+
 
 +
has .inner
 +
 
 +
{{Warn|text=Right now some things are not inside the
 +
 
 +
== div.header ==
 +
 
 +
=== div.comment-title ===
 +
 
 +
=== span.datetime ===
 +
 
 +
== div.contents ==
 +
 
 +
has .inner
 +
 
 +
=== div.userpic ===
 +
 
 +
=== span.poster and span.comment-poster ===
 +
 
 +
==== span.ljuser ====
 +
 
 +
=== 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
  
 
[[Category: S2 CSS]]
 
[[Category: S2 CSS]]

Revision as of 22:37, 26 April 2009

Expand: We are expanding the content here!

In addition to the entry stuff described in S2 CSS: Entry page 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.

div#comments

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

div#ljcmt$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.

Has inline style of: 

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

div.comment-wrapper

Warning: .comment-wrapper-a/b might change to wrapper-odd/even

Different classes:

  • .comment-wrapper-a
  • .comment-wrapper-b
  • .visible
  • .screened
  • .poster-$USER
  • .full
  • .partial
  • .no-userpic
  • .has-userpic

div.separator and div.separator-pre

Warning: separator-pre might change to separator-before

has .inner

div.comment

Inside div.comment

has .inner

{{Warn|text=Right now some things are not inside the

div.header

div.comment-title

span.datetime

div.contents

has .inner

div.userpic

span.poster and span.comment-poster

span.ljuser

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=4472"