Difference between revisions of "S2 CSS"

From Dreamwidth Notes
Jump to: navigation, search
(→‎li.entry-postlink)
(→‎Major classes)
Line 15: Line 15:
  
 
{{Note|text=Concentrate here for now}}
 
{{Note|text=Concentrate here for now}}
 +
 +
== #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 ==
 
== #primary ==
Line 21: Line 32:
 
* '''Views:''' All  
 
* '''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.
 
* '''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.
 +
 +
=== #entries ===
 +
 +
* '''Affects:''' This is a block containing all the entries
 +
* '''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:'''
 +
  
 
== #secondary ==
 
== #secondary ==
Line 67: Line 91:
 
* '''Other information''' This is found inside div.date.
 
* '''Other information''' This is found inside div.date.
  
−
=== .entry.content===
+
=== div.userpic ====
 +
 
 +
* '''Affects:''' Userpics
 +
* '''Views:''' Recent, Reading, Entry
 +
* '''Other information:''' Found within entries and also comments.
 +
 
 +
=== .entry .content===
  
 
* '''Affects:''' The body of an entry; what the person posted.
 
* '''Affects:''' The body of an entry; what the person posted.
Line 108: Line 138:
 
* '''Views:''' Recent, Reading
 
* '''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.
 
* '''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.
 +
 +
== div.comments ==
 +
 +
* '''Affects:''' Comments section
 +
* '''Views:''' Entry
 +
 +
=== div.comment ===
 +
 +
* '''Affects:''' A single comment
 +
* '''Views:''' Entry
 +
 +
==== div.header ====
 +
 +
* '''Affects:''' A comment's header, 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.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
 +
 +
  
 
== h2.module-header ==
 
== h2.module-header ==
Line 120: Line 188:
 
* '''Views:''' All
 
* '''Views:''' All
 
* '''Other information:''' ''.module-content a'' refers to  those items that are links instead of pure text.
 
* '''Other information:''' ''.module-content a'' refers to  those items that are links instead of pure text.
−
 
−
 
  
 
= Minor classes =
 
= Minor classes =

Revision as of 04:35, 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'''

Major classes

Note: Concentrate here for now

#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.

#entries

  • Affects: This is a block containing all the entries
  • 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:


#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.

#header

  • Affects: Top bar containing title and page title (optionally other things)
  • Views: All
  • Other information: Includes subclasses .h1, .h2, #title and #pagetitle

.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.

.entry .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.

div.comments

  • Affects: Comments section
  • Views: Entry

div.comment

  • Affects: A single comment
  • Views: Entry

div.header

  • Affects: A comment's header, 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.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


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

Retrieved from "http://wiki.dreamwidth.net/wiki/index.php?title=S2_CSS&oldid=4315"