atomsite.net

1. Overview
2. Themes Location
3. Cascading Theme
4. Changing Theme
5. Default Theme Layout
6. Content and Include Areas
7. Page Widths and Column Templates
8. Changing Includes
9. Writing a Basic Theme
10. Advanced Themes

Overview

AtomSite has a very flexible theme system.  A theme is just a collection of assets dropped into the various asset theme folders.  You can control which theme is used at either the workspace or collection level.  The default theme contains standard content and include areas.  You can easily control what is included in these areas.  You can create a basic theme, that just includes a CSS stylesheet or you can do advanced modifications to the markup for the master page, individual pages, and even individual controls or widgets.

Through the use of YUI Grids and the widget include system, there is a significant amount of modification possible without having to modify the default markup.  In fact, this whole site you're looking at http://atomsite.net is itself a simple theme that is just a CSS file and some images on top of what is provided out of the box.

Theme Asset Locations

Themes are stored in the varioius asset directories in the root of your application.  Each theme has its own directory that shares the name of the theme. For example, two very basic themes; "blue", "hibiscus":

For basic themes, the name of the stylesheet should match the name of the theme.

Cascading Theme

Themes can be built on top of the default theme.  The default theme contains all the files needed for displaying a website.  To simplify theme development, a designer does not need to re-invent these files for a new theme.  Therefore, if a required file is not provided by a theme, it will automatically fall-back and use a file from the default theme.  For example, a basic theme that only provides a CSS file and some image files will always fall-back to the default theme for how the markup is rendered.

Changing Themes

Themes can be controlled at two different scopes: workspace and collection.  Changing a theme at the workspace level will apply the theme to all collections within that workspace.  However, if you specify a different theme at the collection level, it will override the theme set at the workspace level.

Setting a theme at the workspace level

TODO: post image of service.config file here

Setting a theme at the collection level

TODO: post image of service.config file here

Default Theme Layout

The following diagram shows the default layout within the Site.Master file.  Please note the usage of YUI Grids layout.  This allows the side column to appear on either the left or the right. The built-in flexibility in this layout should support a large percentage of all common site layouts.

Content and Include Areas

In the above Site.Master Layout diagram, the areas marked with [icon] are content areas.  The areas marked with [icon] are include areas (for widgets).

Content Areas

More details coming soon

Include Areas

More details coming soon

Page Widths and Column Templates

The PageWidth can be controlled for each individual page at any scope.  Also, the column width can be controlled by using the PageTemplate (also at any scope).

Changing Includes

Changing Page Includes

More details coming soon

Changing Widget Area Includes

More details coming soon

Writing a Basic Theme

Starting with blank slate, CSS, images

No markup changes, just CSS and YUI doc width or template changes

Finally, you can theme individual Page views using an #id selector in your CSS as the body tag always has the id of the PageName.

More details coming soon

Writing an Advanced Theme

Custom markup, with custom full site layouts and CSS and YUI doc widths

Altering Site.Master, page markup, widget markup, etc.

Creating new Content areas

Creating new Include areas

Cons of Advanced Themes, Compatibility, Upgradability, non-standard include areas

More details coming soon