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

From Dreamwidth Notes
Jump to: navigation, search
m (added category)
(div.userpic)
 
(12 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category: S2 CSS]]
+
The following are found inside of div.entry within the <tt>#primary</tt> section of the page.  These all occur on the Reading, Recent, Entry, and Day pages unless otherwise noted.
 
+
{{Expand|text=This page is mostly finished, but not entirely.  It should be synced after open beta, as I've opened a bug with suggestions I've come up with while doing this, which may or may not get implemented. --[[User:Foxfirefey|Foxfirefey]] 20:41, 26 April 2009 (UTC)}}
+
 
+
The following are found inside of div.entry within the #primary section of the page.  These all occur on the Reading, Recent, Entry, and Day pages unless otherwise noted.
+
  
 
= Outer shell =
 
= Outer shell =
Line 17: Line 13:
 
==== Even/Odd ====
 
==== Even/Odd ====
  
Note: entries on Entry pages are always <tt>.entry-wrapper-odd</tt>.
+
Note: entries on Entry pages are always <tt>.entry-wrapper-odd</tt>.  Other views will alternate between the two.
  
 
* <tt>.entry-wrapper-odd</tt>
 
* <tt>.entry-wrapper-odd</tt>
 
* <tt>.entry-wrapper-even</tt>
 
* <tt>.entry-wrapper-even</tt>
 
{{Warn|text=These are currently <tt>.entry-wrapper-a</tt> and <tt>.entry-wrapper-b</tt>.}}
 
  
 
==== Security ====
 
==== Security ====
Line 34: Line 28:
  
 
==== Adult content ====
 
==== Adult content ====
 
{{Warn|text=These are not named this currently!}}
 
  
 
* '''<tt>.restrictions-18</tt>'''
 
* '''<tt>.restrictions-18</tt>'''
* '''<tt>.restrictions-nsfw</tt>'''
+
* '''<tt>.restrictions-NSFW</tt>'''
 
* '''<tt>.restrictions-none</tt>'''
 
* '''<tt>.restrictions-none</tt>'''
  
 
==== Journal type and poster ====
 
==== Journal type and poster ====
  
{{Warn|text= <tt>.journal-$JOURNAL</tt> not currently added to posts on personal journals.}}
+
* '''<tt>.journal-type-P</tt>''' -- post from a personal journal
 
+
* '''<tt>.journal-type-C</tt>''' -- posts from a community
* '''<tt>.journal-type-P</tt>'''
+
* '''<tt>.journal-type-Y</tt>''' -- post from a feed account
* '''<tt>.journal-type-C</tt>'''
+
 
* '''<tt>.poster-$USER</tt>''' -- indicates the specific poster
 
* '''<tt>.poster-$USER</tt>''' -- indicates the specific poster
 
* '''<tt>.journal-$JOURNAL</tt>''' -- indicates the journal posted in, ie a community
 
* '''<tt>.journal-$JOURNAL</tt>''' -- indicates the journal posted in, ie a community
Line 52: Line 43:
 
==== Other ====
 
==== Other ====
  
* '''<tt>.has-userpic</tt>''' -- This post has a userpic associated with it
+
* '''<tt>.has-userpic</tt>''' -- This post has a user icon associated with it.
 +
* '''<tt>.no-userpic</tt>''' -- This post doesn't have a user icon associated with it.
  
=== <tt>.separator .separator-before</tt> ===
+
=== <tt>.separator.separator-before</tt> ===
  
{{Warn|text=This is currently <tt>.separator-pre.</tt>}}
+
A div separator that is before the main <tt>.entry</tt> class, with nothing in it.
 
+
<tt>.separator</tt> classes are found within the <tt>.entry-wrapper</tt>.  They can be associated with:
+
 
+
* <tt>.separator-before</tt> -- A separator that is before the main <tt>.entry</tt> class
+
* <tt>.separator-after</tt> -- A separator that is after the main <tt>.entry</tt> class
+
 
+
There is no content actually <i>in</i> these divs.
+
  
 
=== <tt>.entry</tt> ===
 
=== <tt>.entry</tt> ===
Line 71: Line 56:
 
* '''Affects:''' All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view
 
* '''Affects:''' All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view
  
=== <tt>.separator .separator-after</tt> ===
+
=== <tt>.separator, .separator-after</tt> ===
 
+
{{Warn|text=This is currently <tt>.separator-pre.</tt>}}
+
 
+
This <tt>.separator</tt> classes are found within the <tt>.entry-wrapper</tt>.  They can be associated with:
+
  
* <tt>.separator-before</tt> -- A separator that is before the main <tt>.entry</tt> class
+
A div separator that is after the main <tt>.entry</tt> class, with nothing in it.
* <tt>.separator-after</tt> -- A separator that is after the main <tt>.entry</tt> class
+
  
 
= Inside <tt>.entry</tt> =
 
= Inside <tt>.entry</tt> =
Line 112: Line 92:
  
 
* '''Affects:''' Userpics
 
* '''Affects:''' Userpics
* '''Other information:''' Found within entries and also comments.
+
* '''Other information:''' Found within entries, comments and the Profile module. It be can printed even when there is no userpic so be careful with this one. You may want to add parent selectors first such as .has-userpic or .module-userprofile or target the image itself with .userpic img.
  
 
=== <tt>span.poster</tt> ===
 
=== <tt>span.poster</tt> ===
Line 181: Line 161:
 
* '''<tt>li.entry-readlink</tt>''' -- The "N comments" link, where N is a number; may be customised by the user to say something else.  Don't make assumptions about the length of the text.  Does not appear if there are no comments.
 
* '''<tt>li.entry-readlink</tt>''' -- The "N comments" link, where N is a number; may be customised by the user to say something else.  Don't make assumptions about the length of the text.  Does not appear if there are no comments.
 
* '''<tt>li.entry-postlink</tt>''' -- Link for commenting, change to <tt>li.entry-commentlink</tt> suggested; May be customised by the user to say something else.  Don't make assumptions about the length of the text.  Does not appear if comments are disallowed.
 
* '''<tt>li.entry-postlink</tt>''' -- Link for commenting, change to <tt>li.entry-commentlink</tt> suggested; May be customised by the user to say something else.  Don't make assumptions about the length of the text.  Does not appear if comments are disallowed.
 +
 +
[[Category: S2 CSS]]

Latest revision as of 12:46, 28 May 2011

The following are found inside of div.entry within the #primary section of the page. These all occur on the Reading, Recent, Entry, and Day pages unless otherwise noted.

Outer shell

.entry-wrapper

This, along with its nested div.inner, wraps around the entire entry and all of its classes.

Associated classes

The below are all classes that are associated with the .entry-wrapper.

Even/Odd

Note: entries on Entry pages are always .entry-wrapper-odd. Other views will alternate between the two.

  • .entry-wrapper-odd
  • .entry-wrapper-even

Security

Indicates the security level of a post.

  • .security-public
  • .security-custom
  • .security-protected
  • .security-private

Adult content

  • .restrictions-18
  • .restrictions-NSFW
  • .restrictions-none

Journal type and poster

  • .journal-type-P -- post from a personal journal
  • .journal-type-C -- posts from a community
  • .journal-type-Y -- post from a feed account
  • .poster-$USER -- indicates the specific poster
  • .journal-$JOURNAL -- indicates the journal posted in, ie a community

Other

  • .has-userpic -- This post has a user icon associated with it.
  • .no-userpic -- This post doesn't have a user icon associated with it.

.separator.separator-before

A div separator that is before the main .entry class, with nothing in it.

.entry

This class is inside .entry-wrapper and has its own div.inner.

  • Affects: All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view

.separator, .separator-after

A div separator that is after the main .entry class, with nothing in it.

Inside .entry

div.header

  • Affects: Heading for each entry
  • Other information: Contains the entry subject matter (h3.entry-title) as well as the date/time stamp and classes for showing access filters (eg. the lock icon) and adult content filters (eg. the NSFW warning)

h3.entry-title

  • Affects: Subject line
  • Other information: Subjects are shown as links, so the text of the subject line is technically found inside h3.entry.title a unless the subject itself contains a link; then only that link is printed as a link.

span.datetime

span.date

  • Affects: The date stamp on an entry
  • Other information: Within span.date are several a elements, for each of year/month/day.

span.time

  • Affects: The time of day (eg. "06:53pm") that a post is made
  • Other information: This is found inside div.datetime.

div.contents

  • Affects: The body of an entry; what the person posted, with the userpic and poster.
  • Other information: This div has a nested div.inner.

div.userpic

  • Affects: Userpics
  • Other information: Found within entries, comments and the Profile module. It be can printed even when there is no userpic so be careful with this one. You may want to add parent selectors first such as .has-userpic or .module-userprofile or target the image itself with .userpic img.

span.poster

This is also associated with span.entry-poster, to separate it from another span.poster in comments, which is associated with span.comment-poster. This span contains a span.ljuser as well.

div.entry-content

  • Affects: The contents of the entry.

div.entry-metadata

Contains a series of spans with the following classes:

  • .metadata-label
  • .metadata-item
  • .metadata-label-location
  • .metadata-item-location
  • .metadata-label-mood
  • .metadata-item-mood
  • .metadata-label-music
  • .metadata-item-music

div.footer

  • Affects: Tags and other metadata, management links, and interaction links.
  • Other information: This div has a nested div.inner.

div.tag

  • Affects: The div containing the tags on a post, including any "Tags:" heading
  • Other information: The tags themselves are within a unordered list inside this div.

span.tagtext

This is the text that goes before the tag list, ie "Tags:".

ul

This list contains all of the tag links.

ul.entry-management-links

Note: This category is done a little bit differently on entry pages.

  • Affects: The links/buttons which allow you to manage an entry, eg. edit/tag/memories/email/track
  • Other information What falls in this category rather than in entry-interaction-links, I hear you ask. Well, these buttons/links seem to send you away from the entry's page, while the interaction links all link to the entry's page.

Specific link classes

  • li.link -- General class for all of them
  • li.mem_add -- For adding to the memories
  • li.tell_friend -- For telling a friend
  • li.watch_commands -- For the tracking system NOTE: MIGHT CHANGE TO TRACK COMMENTS
  • li.edit_entry -- For editing the entry
  • li.edit_tags -- For editing the entry's tags

ul.entry-interaction-links

Note: This category is done a little bit differently on entry pages.

  • Affects: The list of links for each entry that read Link/N comments/leave a comment
  • Other information The text of these links can be changed by the journal owner through "Customize styles", so beware that they may be longer/shorter than you think.

Specific link classes

  • li.entry-permalink -- The "Link" link; does not appear(?) if there are comments.
  • li.entry-readlink -- The "N comments" link, where N is a number; may be customised by the user to say something else. Don't make assumptions about the length of the text. Does not appear if there are no comments.
  • li.entry-postlink -- Link for commenting, change to li.entry-commentlink suggested; May be customised by the user to say something else. Don't make assumptions about the length of the text. Does not appear if comments are disallowed.