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

From Dreamwidth Notes
Jump to: navigation, search
Line 1: Line 1:
 
{{Expand|text=We are expanding the content here!}}
 
{{Expand|text=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.
+
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 <tt>body.page-entry</tt> as its body class.  
 
The entry page has <tt>body.page-entry</tt> 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 =
 
= div#comments =
Line 41: Line 59:
 
==== div.comment ====
 
==== div.comment ====
  
 +
== div.bottomcomment ==
 +
 +
=== ul.entry-management-links ===
 +
 +
=== ul.entry-interaction-links ===
  
 
= Inside div.comment =
 
= Inside div.comment =
Line 46: Line 69:
 
has .inner
 
has .inner
  
{{Warn|text=Right now some things are not inside the  
+
{{Warn|text=Right now some things are not inside the inner div.}}
  
 
== div.header ==
 
== div.header ==

Revision as of 22:52, 26 April 2009

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

  • 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

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

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