Difference between revisions of "S2 CSS: Entry ids and classes"
From Dreamwidth Notes
Foxfirefey (Talk | contribs) (first pass) |
(→div.userpic) |
||
| (17 intermediate revisions by 6 users not shown) | |||
| Line 1: | Line 1: | ||
| − | 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. | + | 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 = | = 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 13: | Line 13: | ||
==== Even/Odd ==== | ==== Even/Odd ==== | ||
| − | Note: entries on Entry pages are always <tt>.entry-wrapper-odd</tt>. | + | 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 ==== | ==== Security ==== | ||
| Line 24: | Line 22: | ||
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 ==== | ||
| − | * '''.restrictions-18''' | + | * '''<tt>.restrictions-18</tt>''' |
| − | * '''.restrictions- | + | * '''<tt>.restrictions-NSFW</tt>''' |
| − | * '''.restrictions-none''' | + | * '''<tt>.restrictions-none</tt>''' |
==== Journal type and poster ==== | ==== Journal type and poster ==== | ||
| − | * '''.journal-type-P''' | + | * '''<tt>.journal-type-P</tt>''' -- post from a personal journal |
| − | * '''.journal-type-C''' | + | * '''<tt>.journal-type-C</tt>''' -- posts from a community |
| − | * '''.poster-$USER''' -- indicates the specific poster | + | * '''<tt>.journal-type-Y</tt>''' -- post from a feed account |
| − | * '''.journal-$JOURNAL''' -- indicates the journal posted in, ie a community | + | * '''<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 | + | === <tt>.separator.separator-before</tt> === |
| − | + | A div separator that is before the main <tt>.entry</tt> class, with nothing in it. | |
| − | + | ||
| − | + | === <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 59: | Line 56: | ||
* '''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> === |
| − | + | A div separator that is after the main <tt>.entry</tt> class, with nothing in it. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
= 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 | + | * '''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''. | + | * '''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 | + | * '''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 or target the image itself with .userpic img. |
| − | === 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 150: | Line 142: | ||
==== 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 | + | * '''<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 | ||
| − | === 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 164: | Line 158: | ||
==== 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. |
| + | |||
| + | [[Category: S2 CSS]] | ||
Latest revision as of 12:46, 28 May 2011
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 or target the image itself with .userpic img.
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.
