Revision as of 04:46, 23 April 2009

CSS classes

Information and Template

This page will have a list of all CSS classes used by Core2.

== class label ==

* '''Affects:''' What part of the page does this CSS class cover?
* '''Views:''' If it's only used on specific pages (eg year page, or reply page), or on all views
* '''Other information'''

High level layout classes

#canvas

• Affects: The whole page, excluding the nav strip
• Views: All

#header

• Affects: The page header, containing the title/subtitle of the page.
• Views: All
• Other information: This would usually contain an h1 and h2 saying something like "Your Name / Recent Entries".

#primary

• Affects: Main content area (user entries on Recent, other users' entries on Read, calendar on Calendar)
• Views: All
• Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focussed on size and positioning rather than the formatting of their contents.

#secondary

• Affects: A sidebar or other non-primary section of the page, usually used to for modules such as navigation, links, calendar, tags etc
• Views: All
• Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focussed on size and positioning rather than the formatting of their contents.

#tertiary

• Affects: Additional sidebar or similar. In a three-column layout, this would be the second sidebar, but it could also appear at the bottom of the page, or anywhere else where you might want to put modules.
• Views: All
• Other information: #primary, #secondary, and #tertiary are layout identifiers. CSS for these areas will generally be focussed on size and positioning rather than the formatting of their contents.

Classes found primarily on the Recent and Reading pages

#entries

• Affects: This is a block containing all the entries, within #primary
• Views: Recent, Reading
• Other information: I thought at first that this would appear on any pages with multiple entries on them, which would seem to include the daily archive for days with multiple posts, but this is not in fact the case. Recent and Reading only!

.navigation

• Affects: Links to Previous N/Next N
• Views: Recent, Reading
• Other information:

Layout for an individual entry

The following are found inside of div.entry within the #primary section of the page. These occur on the Reading, Recent, and Entry pages.

.entry

• Affects: All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view
• Views: Recent, Readlist

.header

• Affects: Heading for each entry
• Views: Recent, Readlist, Entry
• Other information: Contains the entry subject matter (h3.entry-title) as well as the date/time stamp and classes for showing trust filters (eg. the lock icon) and adult content filters (eg. the NSFW warning)

h3.entry-title

• Affects: Subject line
• Views: Recent, Readlist, Entry
• Other information: Subjects are shown as links, so the text of the subject line is technically found inside h3.entry.title a.

span.date

• Affects: The date stamp on an entry
• Views: Recent, reading, 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
• Views: Reading, recent, entry
• Other information This is found inside div.date.

div.userpic

• Affects: Userpics
• Views: Recent, Reading, Entry
• Other information: Found within entries and also comments.

div.content

• Affects: The body of an entry; what the person posted.
• Views: Reading, Recent, Entry
• Other information All metadata such as tags, access groups, etc, falls outside this div

.tag

• Affects: The div containing the tags on a post, including any "Tags:" heading
• Views: recent, readlist, entry
• Other information The tags themselves are within a unordered list inside this div.

ul.entry-management-links

• Affects: The links/buttons which allow you to manage an entry, eg. edit/tag/memories/email/track
• Views: Recent, reading, entry
• 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.

ul.entry-interaction-links

• Affects: The list of links for each entry that read Link/N comments/leave a comment
• Views: Recent, reading, entry
• 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.

li.entry-permalink

• Affects: The "Link" link
• Views: Recent, Reading
• Other information Does not appear(?) if there are comments.

li.entry-readlink

• Affects: The "N comments" link (where N is a number)
• Views: Recent, Reading
• Other information 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

• Affects: The "Post a comment" link
• Views: Recent, Reading
• Other information 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.

Classes found only on the Entry page

In addition to the entry stuff described above, these additional classes are found only on the entry page. They mostly apply to the display of comments.

div.comments

• Affects: The whole comments section of the page
• Views: Entry

div.comment

• Affects: A single comment
• Views: Entry

div.header

• Affects: A comment's header block, which is made up of the subject and the date/time stamp
• Views: Entry

div.comment-title

• Affects: The subject/title of a specific comment
• Views: Entry

div.userpic

Described above, under the classes used in entries.

div.comment-content

• Affects: The content of the comment, as written by the comment author
• Views: Entry
• Other information: Excludes all metadata; this is just what the author wrote, nothing about their name etc

ul.comment-management-links

• Affects: The links/buttons for managing comments: delete/screen/freeze/track/etc
• Views: Entry

ul.comment-interaction-links

• Affects: The text links to reply/parent/thread on a given topic
• Views: Entry

Sidebar classes

These are classes generally found in the #secondary or #tertiary sidebars (which might not actually be on the side, but on the bottom of the page or somewhere else, but we haven't yet come up with a better name than "sidebar".)

h2.module-header

• Affects: Titles of module sections such as Tags, Page Summary, Syndicate etc
• Views: All
• Other information: h2.module-header a refers to those items that are links instead of pure text.

.module-content

• Affects: Content of modules such as tags list, links list, free text, about section, page summary
• Views: All
• Other information: .module-content a refers to those items that are links instead of pure text.

Minor classes