Difference between revisions of "S2 CSS"

From Dreamwidth Notes
Jump to: navigation, search
(li.entry-postlink)
(Brief list of guides and resources)
 
(23 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>
+
  
= Major 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.
  
{{Note|text=Concentrate here for now}}
+
= Documentation of ids and classes =
  
== #primary ==
+
* [[S2 CSS: High level layout ids and classes]] -- classes and IDs that should be found on all pages of a journal.
 +
* [[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.
  
* '''Affects:''' Main content area (user entries on Recent, other users' entries on Read, calendar on Calendar)
+
= Basic Structural Representation =
* '''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 ==
+
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]].
  
* '''Affects:''' A sidebar or other non-primary section of the page, usually used to for modules such as navigation, links, calendar, tags etc 
+
[[Image:Structure_tabula_rasa_and_descendents.gif|alt=(#canvas(.inner(#header #content(.inner(#primary #secondary #tertiary)‎))#footer))]]
* '''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.
+
[[Category: S2 CSS]] [[Category: Styles]]
* '''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.
+
 
+
=== .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.
+
 
+
== 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))