Difference between revisions of "S2 CSS"

From Dreamwidth Notes
Jump to: navigation, search
(Brief list of guides and resources)
 
(19 intermediate revisions by 5 users not shown)
Line 1: Line 1:
'''CSS classes'''
+
= Overview =
  
= Information and Template =
+
Dreamwidth styles are designed to be mostly customizable via CSS, with many classes built into the core of the style system.  Please note that this CSS documentation centers around documenting the core system; the plain version of which is called Tabula Rasa. (However, many classes will be available in all core2 styles; other layouts will mainly have only a different page structure.)
  
This page will have a list of all CSS classes used by Core2.
+
You can apply the plain version of Tabula Rasa to your style [http://www.dreamwidth.org/customize/?layoutid=551 here], as well as choose a layout type.  Then, you can customize the CSS for you style [http://www.dreamwidth.org/customize/options?group=customcss in the custom CSS section of the wizard], where you can choose to not used the default CSS if you want to start entirely from scratch.  Alternatively, you can use the [http://www.dreamwidth.org/customize/advanced/ Advanced Customization Area] if you are familiar with that system--read the [[S2 Guide]] for more information.
  
<pre><nowiki>== class label ==
+
The overall structure of a page has everything inside a #canvas div.  The main sections of the page are #header, #content, and #footer.  Inside #content are #primary, which contains the entries or other main content of the page, while #secondary and #tertiary contain modules.
  
* '''Affects:''' What part of the page does this CSS class cover?
+
== Brief list of guides and resources ==
* '''Views:''' If it's only used on specific pages (eg year page, or reply page), or on all views
+
* '''Other information'''
+
</nowiki></pre>
+
  
= High level layout classes =
+
* We have a basic [[CSS tutorial]] for those who are new to it, or could use some pointers.
 +
* You can use [[Browser Developing Tools]] to experiment and inspect HTML and CSS
 +
* There's also a list of [[style flairs you can do with core2 CSS classes]] can give you starter ideas about the kinds of things you can do with the available classes.
  
== #canvas ==
+
= Documentation of ids and classes =
  
* '''Affects:''' The whole page, excluding the nav strip
+
* [[S2 CSS: High level layout ids and classes]] -- classes and IDs that should be found on all pages of a journal.
* '''Views:''' All
+
* [[S2 CSS: Entry ids and classes]] -- for entries on Recent, Reading, Entry, and Day pages.
 +
* [[S2 CSS: Recent and Reading page ids and classes]] -- For the reading page and the main journal page.
 +
* [[S2 CSS: Entry page ids and classes]] -- For pages viewing a single entry.
 +
* [[S2 CSS: Module ids and classes]] -- For sections of the page that contain [[Style Modules|modules]].
 +
* [[S2 CSS: Tag page ids and classes]] -- for the page listing all tags
 +
* [[S2 CSS: Archive pages ids and classes]] -- for year, month, and day pages
 +
* [[S2 CSS: Navigation Bar ids and classes]] -- Note: styling these might not feasible in all instances, as some people have accessibility issues with custom nav bar styling.
 +
* [[S2 CSS: Dynamic popup ids and classes]] -- for the contextual popup and tracking popups.
  
== #header ==
+
= Basic Structural Representation =
  
* '''Affects:''' The page header, containing the title/subtitle of the page. 
+
The basic graphical structure for the Tabula Rasa style and descendents, including Basic Boxes, Blanket, Boxes and Borders, Brittle, ColorSide, Crossroads, Fluid Measure, Funky Circles, Modish, Refried Tablet, Stepping Stones, and Tranquility III. You can see structures for other layouts on [[Style Structure Overview]].
* '''Views:''' All
+
* '''Other information:''' This would usually contain an h1 and h2 saying something like "Your Name / Recent Entries".
+
  
== #primary ==
+
[[Image:Structure_tabula_rasa_and_descendents.gif|alt=(#canvas(.inner(#header #content(.inner(#primary #secondary #tertiary)‎))#footer))]]
  
* '''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 ==
+
[[Category: S2 CSS]] [[Category: Styles]]
 
+
* '''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:'''
+
 
+
=== .entry ===
+
 
+
* '''Affects:''' All of a single entry: subject, text, date, mood/music, readlinks, icon, user/community name on readlist view
+
* '''Views:''' Recent, Readlist 
+
 
+
= 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.
+
 
+
== .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.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 =
+
 
+
 
+
 
+
[[Category: Styles]]
+

Latest revision as of 22:44, 31 January 2020

Overview

Dreamwidth styles are designed to be mostly customizable via CSS, with many classes built into the core of the style system. Please note that this CSS documentation centers around documenting the core system; the plain version of which is called Tabula Rasa. (However, many classes will be available in all core2 styles; other layouts will mainly have only a different page structure.)

You can apply the plain version of Tabula Rasa to your style here, as well as choose a layout type. Then, you can customize the CSS for you style in the custom CSS section of the wizard, where you can choose to not used the default CSS if you want to start entirely from scratch. Alternatively, you can use the Advanced Customization Area if you are familiar with that system--read the S2 Guide for more information.

The overall structure of a page has everything inside a #canvas div. The main sections of the page are #header, #content, and #footer. Inside #content are #primary, which contains the entries or other main content of the page, while #secondary and #tertiary contain modules.

Brief list of guides and resources

Documentation of ids and classes

Basic Structural Representation

The basic graphical structure for the Tabula Rasa style and descendents, including Basic Boxes, Blanket, Boxes and Borders, Brittle, ColorSide, Crossroads, Fluid Measure, Funky Circles, Modish, Refried Tablet, Stepping Stones, and Tranquility III. You can see structures for other layouts on Style Structure Overview.

(#canvas(.inner(#header #content(.inner(#primary #secondary #tertiary)‎))#footer))