• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple, the Netherlands

Stylesheets

We need your assistance to make the documentation accurate, user friendly and understandable. Therefore we welcome any tips or suggestions regarding documentation. Thank you in advance for your contribution.

However, we will not respond to technical support questions submitted using this form. If you are having difficulty with CMSMS and cannot find the solution on this website, please submit your question appropriately on our support forum at: http://forum.cmsmadesimple.org. Please remember to follow the forum rules when posting.


This is a captcha-picture. It is used to prevent mass-access by robots. (see: www.captcha.net) Please confirm that you are not a script by entering the letters from the image

Cascading Style Sheets (CSS) are used to add layout and formatting to your templates.

Open anchor to this point in the page Basic CSS Usage

For the majority of basic web sites, it is just a simple matter of creating your stylesheet, then linking it to your template(s). This is accomplished by performing the following steps:

  • Go to Layout/Stylesheets and click the Add a Stylesheet button near the bottom
  • Give the stylesheet a unique Name, and enter your css data in the Content box.
  • Click Submit
  • In the Stylesheet list, click on the icon to Attach Stylesheet to Template
  • Choose the Template in the dropdown, then click Attach to this Template

To remove an association, choose the Attach Stylesheet to Template option in the Stylesheet list, and click Delete next to the association.

Tips

  • Because Stylesheets are cached, absolute URLs are necessary. For example, use:
    1.   background: url([[root_url]]/uploads/images/background.png) repeat-y;
    (see Smarty section below for more details)
  • There is a limit of 64k per stylesheet. If you need more, use multiple stylesheets.
  • Use the cms_stylesheet tag in your Template. You only need this tag once, Stylesheets are combined into one call.

Open anchor to this point in the page Advanced CSS Usage

CMSMS offers a lot of advanced features for Stylesheets, and with the ability to include Smarty tags, the possibilities are endless.

Open anchor to this point in the page Multiple Stylesheets

Stylesheets are stored in the database, combined, and cached. This allows you to maintain separate stylesheets for layout, formatting, accessibility, etc., but only have one call to speed load times.

The order of Stylesheets is maintained, and can easily be reordered by clicking the up and down arrows in the Current Associations list.

Open anchor to this point in the page Using Media Queries

Since CMSMS 1.11, when editing a Stylesheet in the backend, a "Media Query" tab has been introduced.
Within the "Media Query" textarea field any valid Media Query value as recommended by W3C can be entered.
After a value has been entered in "Media Query" textarea, "Media Type" checkbox options will be disabled.

  1. screen and (min-width: 300px) and (max-width: 1024px)
Media Queries Textarea

Output of HTML Stylesheet tag would then produce following:

  1. <link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" media="screen and (min-width: 300px) and (max-width: 1024px)" />

You are not only limited to using this newly introduced "Media Query" field but you can as well use @media rule inside your Stylesheet.
For detailed instructions look at W3C Media Queries Syntax.

Since CMSMS 1.11 a new theme called "Simplex" has been introduced where you can find above mentioned examples of Media Queries usage.

Open anchor to this point in the page Tag paremeters

The cms_stylesheet tag allows for various parameters for special cases.

Open anchor to this point in the page Smarty Processing

When generating css files this system passes the stylesheets retrieved from the database through Smarty. The Smarty delimiters have been changed from the CMSMS standard { and } to [[ and ]] respectively to ease transition in stylesheets. This allows creating Smarty variables i.e.:

  1. [[assign var='red' value='#900']]

at the top of the stylesheet, and then using these variables later in the stylesheet, i.e:

  1. h3 .error {
  2.   color: [[$red]];
  3. }

Because the cached files are generated in the tmp/cache directory of the CMSMS installation, the CSS relative working directory is not the root of the website. Therefore any images, or other tags that require a url should use the [[root_url]] tag to force it to be an absolute url. i.e:

  1. h3 .error {
  2.   background: url([[root_url]]/uploads/images/error_background.gif);
  3. }

Below you will find some examples for using Smarty in your stylesheets.

Open anchor to this point in the page Global Settings and Color Scheme

Attach all stylesheets to the same HTML template, but the "Global Settings and Color Scheme" stylesheet should be first in line.

Open anchor to this point in the page Stylesheet: Global Settings and Color Scheme
  1. [[* +++++ SETTINGS +++++ *]]
  2. [[capture assign='path']][[root_url]]/uploads/template[[/capture]]
  3.  
  4. [[* +++++ COLOR SCHEME +++++ *]]
  5. [[assign var='color_text' value='#333333']]
  6. [[assign var='color_a' value='#ff0000']]
  7. [[assign var='color_a_hover' value='black']]
  8. [[assign var='color_h2' value='#ff0000']]
  9. [[assign var='color_h3' value='#f00']]
  10. [[assign var='color_h4' value='#f00']]
  11. [[assign var='color_h5' value='#333333']]
  12. [[assign var='color_h6' value='#333333']]
  13. [[assign var='color_footer' value='#ffffff']]
Open anchor to this point in the page Stylesheet: Layout
  1. a, a:link, a:active, a:visited {
  2.   color: [[$color_a]];
  3. }
  4. a:hover {
  5.   color: [[$color_a_hover]];
  6. }
  7. body {
  8.   color: [[$color_text]];
  9.   background: #fff url([[$path]]/bg_body.jpg) repeat-x;
  10. }
  11. #main h2 {
  12.   color: [[$color_h2]];
  13. }
  14. #main h3 {
  15.   color: [[$color_h3]];
  16.   border-bottom: [[$color_h3]] solid 1px;
  17. }
  18. #footer p {
  19.   color: [[$color_footer]];
  20. }
  21. #footer p a {
  22.   color: [[$color_footer]];
  23. }
Open anchor to this point in the page Stylesheet: Some module
  1. .some_module .some_class {
  2.   color: [[$color_text]];
  3. }
Open anchor to this point in the page Stylesheet: foreach example

Another example, to save yourself the hassle of writing vendor prefixes all the time.

  1. [[assign var='vendor_prefixes' value='-moz-,-webkit-,-o-,-ms-']]
  2. [[assign var='vendors' value=','|explode:$vendor_prefixes]]
  3.  
  4. .some-class {
  5. [[foreach from=$vendors item='one']]
  6.     [[$one]]box-shadow: 1px 1px 3px #000;
  7. [[/foreach]]
  8.     box-shadow: 1px 1px 3px #000;
  9. }