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

From Dreamwidth Notes
Jump to: navigation, search
Line 9: Line 9:
 
The bottom is a bit different from that described in [[S2 CSS: Entry ids and classes]]:
 
The bottom is a bit different from that described in [[S2 CSS: Entry ids and classes]]:
  
−
== div.footer ==
+
== <tt>div.footer</tt> ==
  
−
=== div.tag ===
+
=== <tt>div.tag</tt> ===
  
−
=== ul.entry-management-links ===
+
=== <tt>ul.entry-management-links</tt> ===
  
−
=== hr.above-entry-interaction-links ===
+
=== <tt>hr.above-entry-interaction-links</tt> ===
  
−
=== ul.entry-interaction-links ===
+
=== <tt>ul.entry-interaction-links</tt> ===
  
−
=== hr.below-entry-interaction-links ===
+
=== <tt>hr.below-entry-interaction-links</tt> ===
  
−
=== hr.below-reply-container ===
+
=== <tt>hr.below-reply-container</tt> ===
  
−
= div#comments =
+
= <tt>div#comments</tt> =
  
 
* '''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>.
  
−
== div#ljcmt$N ==
+
== <tt>div#ljcmt$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 35: Line 35:
 
  style='margin-left: 25px; margin-top: 5px'
 
  style='margin-left: 25px; margin-top: 5px'
  
−
=== div.comment-wrapper ===
+
=== <tt>div.comment-wrapper</tt> ===
  
 
{{Warn|text=.comment-wrapper-a/b might change to wrapper-odd/even}}
 
{{Warn|text=.comment-wrapper-a/b might change to wrapper-odd/even}}
Line 41: Line 41:
 
Different classes:
 
Different classes:
  
−
* .comment-wrapper-a  
+
* <tt>.comment-wrapper-a </tt>
−
* .comment-wrapper-b  
+
* <tt>.comment-wrapper-b</tt>
−
* .visible  
+
* <tt>.visible</tt>
−
* .screened
+
* <tt>.screened</tt>
−
* .poster-$USER  
+
* <tt>.poster-$USER </tt>
−
* .full  
+
* <tt>.full</tt>
−
* .partial
+
* <tt>.partial</tt>
−
* .no-userpic
+
* <tt>.no-userpic</tt>
−
* .has-userpic
+
* <tt>.has-userpic</tt>
  
−
==== div.separator and div.separator-pre ====
+
==== <tt>div.separator</tt> and <tt>div.separator-pre</tt> ====
  
 
{{Warn|text= separator-pre might change to separator-before}}
 
{{Warn|text= separator-pre might change to separator-before}}
  
−
has .inner
+
has <tt>.inner</tt>
  
−
==== div.comment ====
+
==== <tt>div.comment</tt> ====
  
−
== div.bottomcomment ==
+
== <tt>div.bottomcomment</tt> ==
  
−
=== ul.entry-management-links ===
+
=== <tt>ul.entry-management-links</tt> ===
  
−
=== ul.entry-interaction-links ===
+
=== <tt>ul.entry-interaction-links</tt> ===
  
−
= Inside div.comment =
+
= Inside <tt>div.comment</tt> =
  
−
has .inner
+
has <tt>.inner</tt>
  
 
{{Warn|text=Right now some things are not inside the inner div.}}
 
{{Warn|text=Right now some things are not inside the inner div.}}
  
−
== div.header ==
+
== <tt>div.header</tt> ==
  
−
=== div.comment-title ===
+
=== <tt>div.comment-title</tt> ===
  
−
=== span.datetime ===
+
=== <tt>span.datetime</tt> ===
  
−
== div.contents ==
+
== <tt>div.contents</tt> ==
  
−
has .inner
+
has <tt>.inner</tt>
  
−
=== div.userpic ===
+
=== <tt>div.userpic<tt> ===
  
−
=== span.poster and span.comment-poster ===
+
=== <tt>span.poster</tt> and <tt>span.comment-poster</tt> ===
  
−
==== span.ljuser ====
+
==== <tt>span.ljuser</tt> ====
  
−
=== div.comment-content ===
+
=== <tt>div.comment-content</tt> ===
  
−
== div.footer ==
+
== <tt>div.footer</tt> ==
  
−
has .inner
+
has <tt>.inner</tt>
  
−
=== span.multiform-checkbox ===
+
=== <tt>span.multiform-checkbox</tt> ===
  
−
=== ul.comment-management-links ===
+
=== <tt>ul.comment-management-links</tt> ===
  
 
The links/buttons for managing comments: delete/screen/freeze/track/etc
 
The links/buttons for managing comments: delete/screen/freeze/track/etc
  
−
* li.link
+
* <tt>li.link</tt>
−
* li.delete_comment
+
* <tt>li.delete_comment</tt>
−
* li.screen_comment
+
* <tt>li.screen_comment</tt>
−
* li.freeze_thread
+
* <tt>li.freeze_thread</tt>
−
* li.watch_thread
+
* <tt>li.watch_thread</tt>
  
−
=== ul.comment-interaction-links ===
+
=== 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
  
−
* li.link
+
* <tt>li.link</tt>
−
* li.reply
+
* <tt>li.reply</tt>
−
* li.thread
+
* <tt>li.thread</tt>
  
 
[[Category: S2 CSS]]
 
[[Category: S2 CSS]]

Revision as of 01:57, 27 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<tt>

<tt>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</tt>

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