APPOINTMENTS & INFORMATION
For each page in CMS Made Simple you choose what template to use. A template is the html code with placeholders for content, navigation and extensions. To each template you can also attach one or more stylesheets to style the different elements of your page, as well as customize the layout.
These example pages basically use the same html template (the only difference is what navigation system that is used and if it's using one or two content blocks). Without touching the html templates you can then get widely different layouts by using only CSS (Cascading Stylesheets).
We have grouped related styles in separate stylesheets to make them easier to edit. Each of the default templates therefore has seven or eight stylesheets attached. But only one of those is template-specific.
These are the stylesheets that are used for the default CMSMS templates:
- Stylesheets that are attached to all default templates
- Layout -- Here you set general layout settings, that are the same for all the default CMSMS templates. But for each project you work on this stylesheet needs to be customized.
- Typography -- This is where you do all the styling for fonts, links, headings, images, lists etc.
- Colours-- All the colors are gathered in this stylesheet. The only properties here are color, background and border-color. Don't add any other properties here or it may affect the layout of your entire site! However, for now the colors of menus are in the menu stylesheets.
- Forms -- To more easily make forms to look the same across different browsers, the styling for forms is in its own stylesheet. You will not need to touch this very often.
- Tools -- This is a stylesheet that needs to be attached to all templates for cross-browser behaviour. But you don't really need to touch it at all.
- Navigation stylesheets
- Nav-Horizontal / Nav-Vertical -- Depending on the layout of your template you need to attach one or both of these stylesheets. You only need to change a few things in these stylesheets, to style the menu to look the way you want.
- Default CSSMenu Horiz / Default CSSMenu Vert -- If you rather use a drop-down CSS Menu, then either of these two stylesheets is used.
- Template-specific stylesheets
- Layout-XXX -- There is one stylesheet that is specific for each template. This is where you do the layout (and perhaps styling) that only applies to that particular template. For example, by changing only this stylesheet you can have the menu to appear to the top or the side, left or right.