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

Warning: These are not named this currently!

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

Warning: This is currently .separator-pre.

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

There is no content actually in these divs.

.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

Warning: This is currently .separator-pre.

This .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 class

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 and also comments.

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.