Stylesheets

Here we describe how stylesheets are used together with the CMS Made Simple default templates. To read about how to change certain properties in the stylesheets, read on.

As written in I am a designer, stylesheets is where you do all the styling and formatting of your site, using the markup language called CSS. It is therefore good to first learn the basics of CSS to know what you really are doing. However, we will give you some ideas on how to change a few basic things such as color and the logo.

Your template needs to contain the {cms_stylesheet} tag. After creating your Stylesheets, they have to be "attached" to the template (look Attach Stylesheet icon in Layout > Templates) where the styles in the stylesheets are to be used.

You could attach only one stylesheet to a template if you like. But the method we have chosen for the default templates is to divide the CSS into several stylesheets, grouped by similar characteristics. This makes it easy to find and change a certain type of styles.

Stylesheets with images or files linked to

When using {cms_stylesheet}, Stylesheets are being cached in /tmp/cache, this means image links inside your CSS need to be either a complete URL (http://www.domain.com/images/example.png) or using an additional slash (like "/images/example.png" if the image is in "images/example.png"). Using {stylesheet} Stylesheets are not being cached, so with this tag you do not need a complete URL or an additional slash for image links. Actual versions of CMSMS like 1.10.3 "Hyacinthe" seem to not support {stylesheet} anymore. If in your case "/file" does not work, try "../../" or either a full URL or instead adding

[[root_url]]/

before the path. "images/example.png" will need to be written as

[[root_url]]/images/example.png

Also

To make it easier and prevent repetitve typing of URL path to a image you can also do following on top of your Stylesheet:

[[capture assign='my_path']][[uploads_url]]/path/to/image/folder/[[/capture]]

This will result in a path like: http://www.mydomain.com/uploads/path/to/image/folder/

Now all you have to do when using a background-image property is use your variable as path:

#my_id {
    background-image: url([[$my_path]]some-image.gif);
}

Stylesheets used with the CMS Made Simple templates

To each of the default CMSMS templates there are five stylesheets attached that are the same for all templates. Additionally, there is one stylesheet specific to each template and one or two stylesheets depending on what menu that a template is using.

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 Horizontal / Default CSSMenu Vertical -- 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.

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Getting Started/Designer/Stylesheets

From CMSMS