S2 CSS: Entry ids and classes

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.


 * .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
 * .journal-type-C
 * .poster-$USER -- indicates the specific poster
 * .journal-$JOURNAL -- indicates the journal posted in, ie a community

.separator .separator-before
.separator classes are found within the .entry-wrapper. They can be associated with:


 * .separator-before -- A separator that is before the main .entry class
 * .separator-after -- A separator that is after the main .entry</tt> class

There is no content actually in these divs.

.entry
This class is inside .entry-wrapper</tt> and has its own div.inner</tt>.


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

.separator .separator-after
This .separator</tt> classes are found within the .entry-wrapper</tt>. They can be associated with:


 * .separator-before</tt> -- A separator that is before the main .entry</tt> class
 * .separator-after</tt> -- A separator that is after the main .entry</tt> class

= Inside .entry</tt> =

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 trust 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.

span.date

 * Affects: The date stamp on an entry
 * Other information: Within span.date</tt> 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</tt>.

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

div.userpic

 * Affects: Userpics
 * Other information: Found within entries and also comments.

span.poster
This is also associated with span.entry-poster</tt>, to separate it from another span.poster</tt> in comments, which is associated with span.comment-poster</tt>. This span contains a <tt>span.ljuser</tt> 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 <tt>div.inner</tt>.

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

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.