Difference between revisions of "S2 CSS"

From Dreamwidth Notes
Jump to: navigation, search
m (Overview)
(One intermediate revision by the same user not shown)
Line 3: Line 3:
 
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.)
 
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 [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.
+
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.
  
 
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.
 
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.
Line 24: Line 24:
 
* [[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: 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.
 
* [[S2 CSS: Dynamic popup ids and classes]] -- for the contextual popup and tracking popups.
 +
 +
= 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]].
 +
 +
[[Image:Structure_tabula_rasa_and_descendents.gif|alt=(#canvas(.inner(#header #content(.inner(#primary #secondary #tertiary)‎))#footer))]]
 +
  
 
[[Category: S2 CSS]] [[Category: Styles]]
 
[[Category: S2 CSS]] [[Category: Styles]]

Revision as of 22:19, 25 July 2010

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