S2 CSS: Entry ids and classes

From Dreamwidth Notes
Revision as of 04:22, 28 May 2011 by Foxfirefey (Talk | contribs)

Jump to: navigation, search

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 <tt>.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 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.
Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS:_Entry_ids_and_classes&oldid=9826"