S2 CSS: Entry ids and classes

From Dreamwidth Notes
Revision as of 12:19, 28 May 2011 by Ninetydegrees (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 .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.

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