Silva Stylesheets

This product provides a Silva Stylesheet asset to the SMI. Stylesheets are editable through the SMI. The styles are split up into Style Sets, which are logical groupings of styles. Each Style Set contains common CSS selectors as found in Silva's frontend.css, as well as a few others selectors.

This product opens up the styling of Silva sites to Authors+, within the SMI. For large companies like universities that have one basic look, and which allow individual departments to customize the look of the content of their site, this a perfect product.

No longer do you need do site managers need to update stylesheets for the departments.

Installing Silva Stylesheets into the public layout

To actually take advantage of this product, you need to configure your layout template to include a silva stylesheet if it exists. One one Silva Stylesheet is allowed per container, and it's id is local-styles.css. So, In the override section of your layout template, just include the following:

"Under the Hood"

SilvaStylesheets uses Formulator Forms to divide up the CSS selectors into Style Sets and expose them in the SMI. If you find that SilvaStylesheets is missing selectors you would like to have exposed in the SMI, you can either add those selectors for an existing Style Set, or create a new fs-based formulator form.

For those who aren't that familiar with how Silva's layouts work, the formulator forms, along with the rest of the SMI code for this product, are located in SilvaStylesheets/view/edit/Asset/Stylesheet

To add a new Style Set, all you need to do is place a formulator form in this directory. It will automatically appear in the edit tab of Silva Stylesheets. You do need to make one change to the edit.pt page template located in this directory. The first tag in this file retrieves the formulator form for this styleset. For security reasons, it only allows specific filenames to be selected. On the line that defines styles_form, i.e.:

styles_form python:style_set in (tables,paragraphs,...) and getattr(view,style_set) or nothing"

Add the name of your form (excluding the .form extension!) to the list. So, if you're adding a Style Set called lists, the above list would look like (tables,paragraphs,lists)

Style Set Formulator Field names/ids

This product aims to be 100% xthml-1.0 strict. To reach this goal, the formulator field ids had to be modified so they are valid XML ids. XML ids MUST start follow this pattern: [A-Za-z][A-Za-z0-9:_.-]*. The css selectors in this product violate this in three ways:

1. start with a .
2. some have spaces
3. some have colons :

The names of the formulator fields are the css selectors mangled to become valid xml fragment identifiers. So:

1. ^. becomes zz.
2. ' becomes ..'
3. : becomes __

When adding new formulator fields, be sure to follow this pattern.

Also, the edit screens generate html labels. This is done by using the <extra> tag inside formulator fields, which will insert the contents of that tag inside the rendered field. An example: <extra>id="table.silvatable..tr.even"</extra>. The edit screen assumes the id of the formulator fields is the name of the field. So the value if the id attribute in needs to be the name of the formulator field.

About CSS Prefixes

SilvaStylesheets also supports the use of css prefixes. Our environment at Bethel currently uses a default stylesheet with very specific selectors that target just the content area of our web pages. The content area is a div with id bu-content-area. So, to allow Silva Stylesheets to override the default styles, a css prefix needs to be prepended to each style when rendered.

This css prefix defaults to #bu-content-area. If you want to change this (and you probably do), edit Stylesheet.py, and replace the string #bu-content-area with any other string you want.

You can also change this prefix on a per-stylesheet basis in the SMI.