Difference between revisions of "S2 CSS: Entry ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) |
|||
| Line 5: | Line 5: | ||
= Outer shell = | = Outer shell = | ||
| − | == .entry-wrapper == | + | == <tt>.entry-wrapper</tt> == |
This, along with its nested <tt>div.inner</tt>, wraps around the entire entry and all of its classes. | This, along with its nested <tt>div.inner</tt>, wraps around the entire entry and all of its classes. | ||
| Line 17: | Line 17: | ||
Note: entries on Entry pages are always <tt>.entry-wrapper-odd</tt>. | Note: entries on Entry pages are always <tt>.entry-wrapper-odd</tt>. | ||
| − | * .entry-wrapper-odd | + | * <tt>.entry-wrapper-odd</tt> |
| − | * .entry-wrapper-even | + | * <tt>.entry-wrapper-even</tt> |
{{Warn|text=These are currently <tt>.entry-wrapper-a</tt> and <tt>.entry-wrapper-b</tt>.}} | {{Warn|text=These are currently <tt>.entry-wrapper-a</tt> and <tt>.entry-wrapper-b</tt>.}} | ||
| Line 26: | Line 26: | ||
Indicates the security level of a post. | Indicates the security level of a post. | ||
| − | * '''.security-public''' | + | * '''<tt>.security-public</tt>''' |
| − | * '''.security-custom''' | + | * '''<tt>.security-custom</tt>''' |
| − | * '''.security-protected''' | + | * '''<tt>.security-protected</tt>''' |
| − | * '''.security-private''' | + | * '''<tt>.security-private</tt>''' |
==== Adult content ==== | ==== Adult content ==== | ||
| Line 35: | Line 35: | ||
{{Warn|text=These are not named this currently!}} | {{Warn|text=These are not named this currently!}} | ||
| − | * '''.restrictions-18''' | + | * '''<tt>.restrictions-18</tt>''' |
| − | * '''.restrictions-nsfw''' | + | * '''<tt>.restrictions-nsfw</tt>''' |
| − | * '''.restrictions-none''' | + | * '''<tt>.restrictions-none</tt>''' |
==== Journal type and poster ==== | ==== Journal type and poster ==== | ||
| − | {{Warn|text= .journal-$JOURNAL not currently added to posts on personal journals.}} | + | {{Warn|text= <tt>.journal-$JOURNAL</tt> not currently added to posts on personal journals.}} |
| − | * '''.journal-type-P''' | + | * '''<tt>.journal-type-P</tt>''' |
| − | * '''.journal-type-C''' | + | * '''<tt>.journal-type-C</tt>''' |
| − | * '''.poster-$USER''' -- indicates the specific poster | + | * '''<tt>.poster-$USER</tt>''' -- indicates the specific poster |
| − | * '''.journal-$JOURNAL''' -- indicates the journal posted in, ie a community | + | * '''<tt>.journal-$JOURNAL</tt>''' -- indicates the journal posted in, ie a community |
==== Other ==== | ==== Other ==== | ||
| − | * '''.has-userpic''' -- This post has a userpic associated with it | + | * '''<tt>.has-userpic</tt>''' -- This post has a userpic associated with it |
| − | === .separator .separator-before === | + | === <tt>.separator .separator-before</tt> === |
| − | {{Warn|text=This is currently .separator-pre.}} | + | {{Warn|text=This is currently <tt>.separator-pre.</tt>}} |
<tt>.separator</tt> classes are found within the <tt>.entry-wrapper</tt>. They can be associated with: | <tt>.separator</tt> classes are found within the <tt>.entry-wrapper</tt>. They can be associated with: | ||
| Line 63: | Line 63: | ||
There is no content actually <i>in</i> these divs. | There is no content actually <i>in</i> these divs. | ||
| − | === .entry === | + | === <tt>.entry</tt> === |
This class is inside <tt>.entry-wrapper</tt> and has its own <tt>div.inner</tt>. | This class is inside <tt>.entry-wrapper</tt> and has its own <tt>div.inner</tt>. | ||
| Line 69: | Line 69: | ||
* '''Affects:''' All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view | * '''Affects:''' All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view | ||
| − | === .separator .separator-after === | + | === <tt>.separator .separator-after</tt> === |
| − | {{Warn|text=This is currently .separator-pre.}} | + | {{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: | This <tt>.separator</tt> classes are found within the <tt>.entry-wrapper</tt>. They can be associated with: | ||
| Line 80: | Line 80: | ||
= Inside <tt>.entry</tt> = | = Inside <tt>.entry</tt> = | ||
| − | == div.header == | + | == <tt>div.header</tt> == |
* '''Affects:''' Heading for each entry | * '''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) | + | * '''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) |
| − | === h3.entry-title === | + | === <tt>h3.entry-title</tt> === |
* '''Affects:''' Subject line | * '''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. | + | * '''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. |
| − | === span.datetime === | + | === <tt>span.datetime</tt> === |
| − | ==== span.date ==== | + | ==== <tt>span.date</tt> ==== |
* '''Affects:''' The date stamp on an entry | * '''Affects:''' The date stamp on an entry | ||
* '''Other information:''' Within <tt>span.date</tt> are several a elements, for each of year/month/day. | * '''Other information:''' Within <tt>span.date</tt> are several a elements, for each of year/month/day. | ||
| − | ==== span.time ==== | + | ==== <tt>span.time</tt> ==== |
* '''Affects:''' The time of day (eg. "06:53pm") that a post is made | * '''Affects:''' The time of day (eg. "06:53pm") that a post is made | ||
* '''Other information:''' This is found inside <tt>div.datetime</tt>. | * '''Other information:''' This is found inside <tt>div.datetime</tt>. | ||
| − | == div.contents == | + | == <tt>div.contents</tt> == |
* '''Affects:''' The body of an entry; what the person posted, with the userpic and poster. | * '''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>. | * '''Other information:''' This div has a nested <tt>div.inner</tt>. | ||
| − | === div.userpic === | + | === <tt>div.userpic</tt> === |
* '''Affects:''' Userpics | * '''Affects:''' Userpics | ||
* '''Other information:''' Found within entries and also comments. | * '''Other information:''' Found within entries and also comments. | ||
| − | === span.poster === | + | === <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. | 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. | ||
| − | === div.entry-content === | + | === <tt>div.entry-content</tt> === |
* '''Affects:''' The contents of the entry. | * '''Affects:''' The contents of the entry. | ||
| − | === div.entry-metadata === | + | === <tt>div.entry-metadata</tt> === |
Contains a series of spans with the following classes: | Contains a series of spans with the following classes: | ||
| − | * .metadata-label | + | * <tt>.metadata-label</tt> |
| − | * .metadata-item | + | * <tt>.metadata-item</tt> |
| − | * .metadata-label-location | + | * <tt>.metadata-label-location</tt> |
| − | * .metadata-item-location | + | * <tt>.metadata-item-location</tt> |
| − | * .metadata-label-mood | + | * <tt>.metadata-label-mood</tt> |
| − | * .metadata-item-mood | + | * <tt>.metadata-item-mood</tt> |
| − | * .metadata-label-music | + | * <tt>.metadata-label-music</tt> |
| − | * .metadata-item-music | + | * <tt>.metadata-item-music</tt> |
| − | == div.footer == | + | == <tt>div.footer</tt> == |
* '''Affects:''' Tags and other metadata, management links, and interaction links. | * '''Affects:''' Tags and other metadata, management links, and interaction links. | ||
* '''Other information:''' This div has a nested <tt>div.inner</tt>. | * '''Other information:''' This div has a nested <tt>div.inner</tt>. | ||
| − | === div.tag === | + | === <tt>div.tag</tt> === |
* '''Affects:''' The div containing the tags on a post, including any "Tags:" heading | * '''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. | * '''Other information:''' The tags themselves are within a unordered list inside this div. | ||
| − | ==== span.tagtext ==== | + | ==== <tt>span.tagtext</tt> ==== |
This is the text that goes before the tag list, ie "Tags:". | This is the text that goes before the tag list, ie "Tags:". | ||
| − | ==== ul ==== | + | ==== <tt>ul</tt> ==== |
This list contains all of the tag links. | This list contains all of the tag links. | ||
| − | === ul.entry-management-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]]. | Note: This category is done a little bit differently on [[S2 CSS: Entry page ids and classes|entry pages]]. | ||
| Line 160: | Line 160: | ||
==== Specific link classes ==== | ==== Specific link classes ==== | ||
| − | * '''li.link''' -- General class for all of them | + | * '''<tt>li.link</tt>''' -- General class for all of them |
| − | * '''li.mem_add''' -- For adding to the memories | + | * '''<tt>li.mem_add</tt>''' -- For adding to the memories |
| − | * '''li.tell_friend''' -- For telling a friend | + | * '''<tt>li.tell_friend</tt>''' -- For telling a friend |
| − | * '''li.watch_commands''' -- For the tracking system NOTE: MIGHT CHANGE TO TRACK COMMENTS | + | * '''<tt>li.watch_commands</tt>''' -- For the tracking system NOTE: MIGHT CHANGE TO TRACK COMMENTS |
| − | * '''li.edit_entry''' -- For editing the entry | + | * '''<tt>li.edit_entry</tt>''' -- For editing the entry |
| − | * '''li.edit_tags''' -- For editing the entry's tags | + | * '''<tt>li.edit_tags</tt>''' -- For editing the entry's tags |
| − | === ul.entry-interaction-links === | + | === <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]]. | Note: This category is done a little bit differently on [[S2 CSS: Entry page ids and classes|entry pages]]. | ||
| Line 176: | Line 176: | ||
==== Specific link classes ==== | ==== Specific link classes ==== | ||
| − | * '''li.entry-permalink''' -- The "Link" link; does not appear(?) if there are comments. | + | * '''<tt>li.entry-permalink</tt>''' -- 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. | + | * '''<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. |
| − | * '''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. | + | * '''<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. |
Revision as of 02:31, 27 April 2009
Expand: This page is mostly finished, but not entirely. It should be synced after open beta, as I've opened a bug with suggestions I've come up with while doing this, which may or may not get implemented. --Foxfirefey 20:41, 26 April 2009 (UTC)
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
Warning: These are currently .entry-wrapper-a and .entry-wrapper-b.
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
Warning: .journal-$JOURNAL not currently added to posts on personal journals.
- .journal-type-P
- .journal-type-C
- .poster-$USER -- indicates the specific poster
- .journal-$JOURNAL -- indicates the journal posted in, ie a community
Other
- .has-userpic -- This post has a userpic 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
- 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.
