CMS Made Simple v1.11 media queries

[tosd]

Hello,

I am unsure how to use the media query facility attached to the stylesheet in v1.11.x

The sort of thing I want to do is add:

media="only screen and (max-device-width: 540px)"

. . . so that the stylesheet only applies to mobiles with a viewport less than 540px. No matter how I try and insert it though, it applies to all screensizes.

If anyone can give an actual example of how to use this facility I would appreciate it.

The truth is I can't come to grips with the way media queries are handled by CMSMS at all. If I add @media statements directly into a stylesheet they just seem to be ignored.

Any help greatly appreciated.

[velden]

You might just have a look at the cms_stylesheet tag.

It gives you the possibility to include stylesheet(s) 'manually' and supply your custom media type.

Maybe there are better ways to accomplish what you like to do.

What does this do?

A replacement for the {stylesheet} tag, this tag provides caching of css files by generating static files in the tmp/cache directory, and smarty processing of the individual stylesheets.

This plugin retrieves stylesheet information from the system. By default, it grabs all of the stylesheets attached to the current template in the order specified by the designer, and generates stylesheet tags.

Generated stylesheets are uniquely named according to the last modification date in the database, and are only generated if the stylesheet has changed.

This tag is the replacement for the {stylesheet} tag.
How do I use it?

Just insert the tag into your template/page's head section like: {cms_stylesheet}
What parameters does it take?

(optional)name - Instead of getting all stylesheets for the given page, it will only get one specifically named one, whether it's attached to the current template or not.
(optional)templateid - If templateid is defined, this will return stylesheets associated with that template instead of the current one.
(optional)media - When used in conjunction with the name parameter this parameter will allow you to override the media type for that stylesheet. When used in conjunction with the templateid parameter, the media parameter will only output stylesheet tags for those stylesheets that arer marked as compatible with the specified media type.

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.: [[assign var='red' value='#900']] at the top of the stylesheet, and then using these variables later in the stylesheet, i.e:


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


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:


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


Note: Due to the caching nature of the plugin, smarty variables should be placed at the top of EACH stylesheet that is attached to a template.

[uniqu3]

If you look at Simplex theme that comes with default installation, you should get the idea how to use "Media Query" input.
Also in the same theme you can find "Simplex: Mobile" Stylesheet with media queries inside of Stylesheet, and these are not ignored but well you should make sure you are not overruling any statements by wrong sort order either of media queries or styelsheets.

[tosd]

Thank you both for your suggestions.

I wasn't aware of the parameters that can be attached to the cms_stylesheet tag and because I did an upgrade, not a fresh install, I wasn't aware of the Simplex theme either.

I will check both out.

[uniqu3]

Docs Website has been updated with the Information:
http://docs.cmsmadesimple.org/tags/core ... ia_queries