This page is a guide to using the SiteNow CMS Cascading Style Sheet (sn_styles.css) to get the most from your design efforts. It is provided as a service and is ©2006, 2007 by Autograff, Inc.
There are several things to remember:
SiteNow builds XHTML/accessible pages. As far as possible, our code is XHTML-compliant. It fails the compliancy test in the form of the page URLs. While we regret this, Google has no trouble indexing these URLs, and people using assistive technologies don't have trouble with them either. It's a case where while we support standards, and comply with them wholeheartedly, sometimes the standard and actual utility don't necessarily match.
There is only one style sheet you will need to edit: sn_styles.css. This contains all the styles for page structure, graphics, text formatting and link appearance and behavior for the web pages.
This is not meant to be a course in CSS. For that you can refer to www.w3.org or www.w3schools.com, a first-rate reference. For advanced issues in CSS, try www.alistapart.com and www.csszengarden.com. There are many good books and resources on CSS.
Note: the editor interface is standard, and its styles should left as is unless you are absolutely positive you know what you are doing. You can break the editor interface for your clients if you edit styles incorrectly.
The first section of the style sheet provides the basic standards (body) and the major page components.
The font size is given in relative terms, so visitors to the website may resize text in their browsers. Giving font size in pixels restricts viewers, especially those with visual impariments who may need to increase text size in order to read the page.
Further text sizes are given in "em" units, which are roughly equivalent to percentage, expressed in a different way. Since the default font size is a relative size, and the text sizes are all defined as percentages of that relative size, all text sizes are relative to the user's conditions, and may be resized by the user.
Any selection of the most common serif or sans-serif fonts may be chosen here. This is a design decision.
For the default style, the left column is a background image that fills down (repeat-y). Use this selector to set a background image if your design requires it.
Put the background image anywhere. If you have an images folder, you might change the background url to: url("images/yourbackgroundimage.gif").
Margin: 0; This sets the margin of the page to zero in all browsers, allowing accurate positioning of elements on the page.
These define the major areas of the page: pagetop for the header, menuarea for the page menu, and pagebody for the content of the page.
These may be renamed and restyled completely; they are not referenced in the SiteNow code, as other styles such as links and text are. Call them anything and define them any way you like.
We used absolute positioning and fixed widths for the default styles. This approach makes the page solid, structurally, and is predictable in all browsers and screen resolutions. It's a matter of preference and the needs of your design.
The menuarea contains the SiteNow menu code snippet. SiteNow menus are built using ul/li lists. The styles in the menuarea should stay clear of influencing the menu styles, or your menus may inherit styles from this container in ways you don't intend. It can be confusing to troubleshoot unintended inheritances.
The pagebody contains the SiteNow content code snippet. Some browsers add the padding to the width of the container, so if your design requires careful control of margins, you might want to leave padding out of this element, and create another container inside it with a width of 100% or auto, and add the padding to that container.
We usually use shorthand where possible. For instance setting four different margins for an element can be done this way: margin: 0 10px 12px 0;
This sets the top margin to zero, the right margin to 10px, the bottom margin to 12 px and the left margin to 0. Note that if your dimension is 0, you don't need a unit such as px or pt.
Part of standards-based HTML is structuring information properly. SiteNow builds pages using h1, h2 and h3 headings and subheadings. The first page item in a SiteNow page is the Parent page item. It contains the link text that shows in the menu, and its heading is coded in the output web page as h1.
All other page item headings are h2, and subheadings are h3. Sometimes this induces a small violation of standards when a heading is not used. This gives an h3 without an h2 above it. While a technically a standards violation, we have never found it to be confusing to visitors, and the structure of the page information is still clear.
We clear the float for headings and subheadings for image containers. If a container is floated left or right, the heading still remains above it. Remove the float if you would like your headings to lie beside images in paragraphs.
Menus are built using lists. It will be helpful to become familiar with list styles before editing these. However, changing colors can be done without affecting other aspects of the list.
The ul is the container of the menu list, so it needs to be placed and sized properly.
Usually we style menu lists not to have bullets. We define this ul in such a way that it doesn't conflict with the bullet lists that can be added to page content using the editor.
We use styles that will be most compatible with the most browsers, beginning with the most common. SiteNow styles have been tested in IE for Windows, Firefox and Mozilla for Windows and Macintosh, Safari and Opera. If you find styles that conflict with those browsers, we'd like to know: we're sorry we missed them. If you have suggestions for defining styles for greater compatibility, please let us know. We want to improve the code wherever possible.
This deals with the basic of menu items: size, positioning, spacing, alignment, etc. here you can add background images (be sure to allow for links that wrap to two lines), borders, and background colors for menu items.
Selected Links let the visitor know where they are in your website. Style the selected menu to be different from the "standard" menu item.
Links are classed dynamically as selected when they are clicked by the visitor. Otherwise they are "default" link styles.
Set the basic style for menu links using the "menuarea li a" selector. This says "style any links in any list item in the menuarea container this way."
We like to separate link behavior (link, visited link and mouse-over) from basic link styles for convenience in tweaking site appearance.
Keep the order of styles as given (link, then visited, then hover) so visited links will behave correctly. It you put the visited style after hover, it inherits the hover style...quite confusing for a web visitor!
Links in the first page item are "page" links. Links in all other page items are "pagecontent" links. This allows more flexibility in styling.
Links in page content are of three kinds: html links, email links, and inline links. The first two may be created using SiteNow's tools. Inline links are links inside paragraph text. These are easily created with a little simple HTML, which is given to the end user in the Editor Help menu.
Styles for inline links are included here, so your clients can use the code <a class="inlinelink"> to create links that will look and behave properly inside text paragraphs.
"Page" elements are in the topmost Parent page item. "Page content" elements are in all other page items.
SiteNow styles are labeled such that appearance may be controlled in detail by styling every possible element, or styled in groups, so "upper level" styles define the elements "below" them.
An example is text1 and text2. They are styled as classes (.text1 and .text2) without the element specified. In this case, any element styled with the class "text1" will take on the styles given. However, if you wanted to separate paragraph and div styles, you could add styles for p.text1 and div.text1.
Pagebody p (paragraph) definition: Giving it a margin of zero allows the editor (the end user of the website editor page) to do the intuitive thing: add an extra line return between paragraphs.
SiteNow is designed to wrap text around images if desired. Where an image is used, and text is placed below it on the page, the image container should clear left and right in order to force the text down.
Styles later in the list will allow images to float left and right, with text wrapping around them (if there's enough text to wrap), by overriding the "clear: both."
Two kinds of lists may be created automatically in pages: ordered (numbered) lists and unordered (bullet) lists.
Styles for sn_bulletlist and sn_numlist control the appearance of these items. Further formatting is possile by specifying bullet images, colors, or sizes.
Image and caption formats
Images and captions are contained together in an image container which can be floated left or right or center-aligned. The caption remains under the image no matter where it is.
Alerts such as "statusmessage" may be styled to good effect; most of these can be left alone, as they only come into play in conditions where there is an error notice given for some reason.
Sn_address styles the block of information that floats below the left menu in the default design. It's a good place for the "legal" material (copyright, privacy link, designed by, etc.).
Label will style a Form:Gen form label if you create a Form:Gen form and paste the code into page content using the SiteNow editor. You may want to use all the Form:Gen styles if you create a Form:Gen form. Just paste the styles at the bottom of this style sheet and remove any duplicates or conflicting styles.
Label.req will style the required fields. Form:Gen classes labels for required fields with this class.
Form:Gen is a free online tool, available on the Autograff website, for building web forms. It generates both the html for the form and the code for the script. You copy the form code into your own page, or paste the code into an HTML Page Item in SiteNow, and upload the script to your cgi-bin or wherever your host places cgi scripts.