View source for S2 CSS: Entry ids and classes

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.

= Outer shell =

== <tt>.entry-wrapper</tt> ==

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

=== Associated classes ===

The below are all classes that are associated with the <tt>.entry-wrapper</tt>.

==== Even/Odd ====

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

==== Security ====

Indicates the security level of a post.

* '''<tt>.security-public</tt>'''
* '''<tt>.security-custom</tt>'''
* '''<tt>.security-protected</tt>'''
* '''<tt>.security-private</tt>'''

==== Adult content ====

{{Warn|text=These are not named this currently!}}

* '''<tt>.restrictions-18</tt>'''
* '''<tt>.restrictions-nsfw</tt>'''
* '''<tt>.restrictions-none</tt>'''

==== Journal type and poster ====

* '''<tt>.journal-type-P</tt>''' -- post from a personal journal
* '''<tt>.journal-type-C</tt>''' -- posts from a community
* '''<tt>.journal-type-Y</tt>''' -- post from a feed account
* '''<tt>.poster-$USER</tt>''' -- indicates the specific poster
* '''<tt>.journal-$JOURNAL</tt>''' -- indicates the journal posted in, ie a community

==== Other ====

* '''<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, .separator-after</tt> ===

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

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

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

=== <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
* <tt>.separator-after</tt> -- A separator that is after the main <tt>.entry</tt> class

= Inside <tt>.entry</tt> =

== <tt>div.header</tt> ==

* '''Affects:''' Heading for each entry
* '''Other information:''' Contains the entry subject matter (<tt>h3.entry-title</tt>) 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)

=== <tt>h3.entry-title</tt> ===

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

=== <tt>span.datetime</tt> ===

==== <tt>span.date</tt> ====

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

==== <tt>span.time</tt> ====

* '''Affects:''' The time of day (eg. "06:53pm") that a post is made
* '''Other information:''' This is found inside <tt>div.datetime</tt>.

== <tt>div.contents</tt> ==

* '''Affects:''' The body of an entry; what the person posted, with the userpic and poster.
* '''Other information:''' This div has a nested <tt>div.inner</tt>.

=== <tt>div.userpic</tt> ===

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

=== <tt>span.poster</tt> ===

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

=== <tt>div.entry-content</tt> ===

* '''Affects:''' The contents of the entry.

=== <tt>div.entry-metadata</tt> ===

Contains a series of spans with the following classes:

* <tt>.metadata-label</tt> 
* <tt>.metadata-item</tt>
* <tt>.metadata-label-location</tt>
* <tt>.metadata-item-location</tt>
* <tt>.metadata-label-mood</tt>
* <tt>.metadata-item-mood</tt>
* <tt>.metadata-label-music</tt>
* <tt>.metadata-item-music</tt>

== <tt>div.footer</tt> ==

* '''Affects:''' Tags and other metadata, management links, and interaction links.
* '''Other information:''' This div has a nested <tt>div.inner</tt>.

=== <tt>div.tag</tt> ===

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

==== <tt>span.tagtext</tt> ====

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

====  <tt>ul</tt> ====

This list contains all of the tag links.

=== <tt>ul.entry-management-links</tt> ===

Note: This category is done a little bit differently on [[S2 CSS: Entry page ids and classes|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 ====

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

=== <tt>ul.entry-interaction-links</tt> ===

Note: This category is done a little bit differently on [[S2 CSS: Entry page ids and classes|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 ====

* '''<tt>li.entry-permalink</tt>''' -- The "Link" link; does not appear(?) if there are 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.

[[Category: S2 CSS]]