Log in
Forgot your password?
Readme
# Copyright (c) 2004-2006 Bethel University. All rights reserved.
# See also gpl.txt
Meta::
Valid for: Silva 1.5.x, Silva Stylesheets 1.0+
Author: Andy Altepeter
Email: aaltepet at bethel dot edu
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.
Managers and Chief Editors can also supply custom styles. Each custom style selector
automatically has the css prefix prepended.
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 <head> override section of your layout template, just include the
following:
<link rel="stylesheet" type="text/css" tal:condition="python:hasattr(here, 'local-styles.css')"
tal:attributes="href python:getattr(here,'local-styles.css').absolute_url()" />
"Under the Hood"
SilvaStylesheets uses Formulator Forms to divide up the CSS selectors into
Style Sets and expose them in the SMI. The Formulator Forms are generated by
running 'create-xml-forms.py'. If you find that SilvaStylesheets is missing
selectors you would like to have exposed in the SMI, you can edit 'create-xml-forms.py'.
You can add a new Style Set, or add selectors to an existing styleset.
Running this form will re-create the Formulator Forms.
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
After adding a new style set and running 'create-xml-forms.py', a Formulator Form
will automatically appear in this directory. It will also automatically appear
in the edit tab of Silva Stylesheets (you may need a Zope restart).
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 <extra> 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.
# See also gpl.txt
Meta::
Valid for: Silva 1.5.x, Silva Stylesheets 1.0+
Author: Andy Altepeter
Email: aaltepet at bethel dot edu
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.
Managers and Chief Editors can also supply custom styles. Each custom style selector
automatically has the css prefix prepended.
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 <head> override section of your layout template, just include the
following:
<link rel="stylesheet" type="text/css" tal:condition="python:hasattr(here, 'local-styles.css')"
tal:attributes="href python:getattr(here,'local-styles.css').absolute_url()" />
"Under the Hood"
SilvaStylesheets uses Formulator Forms to divide up the CSS selectors into
Style Sets and expose them in the SMI. The Formulator Forms are generated by
running 'create-xml-forms.py'. If you find that SilvaStylesheets is missing
selectors you would like to have exposed in the SMI, you can edit 'create-xml-forms.py'.
You can add a new Style Set, or add selectors to an existing styleset.
Running this form will re-create the Formulator Forms.
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
After adding a new style set and running 'create-xml-forms.py', a Formulator Form
will automatically appear in this directory. It will also automatically appear
in the edit tab of Silva Stylesheets (you may need a Zope restart).
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 <extra> 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.