Linking to Stylesheets
Stylesheet Global Variable
The stylesheet global variable is meant for generating URLs for use when linking to stylesheets. The basic syntax is this:
{stylesheet='template_group/css_template'}
which will return this, (assuming a base URL of https://example.com/)
https://example.com/?css=template_group/css_template
Make sure you substitute “template_group” and “css_template” with the name of your actual template group and CSS template.
The stylesheet variables is used exclusively in the CSS declaration in your pages. It must contain the template group/template name where your stylesheet is located:
<link rel="stylesheet" type="text/css" media="all" href="{stylesheet='template_group/css_template'}" />
which will return
<link rel="stylesheet" type="text/css" media="all" href="https://example.com?css=template_group/css_template" />
In many respects, this variable works much like the {path=''}
global variable. However, there are some special considerations when the stylesheet URL (?css=) is used:
- Pages that are linked and served via the stylesheet URL will not be parsed as normal Templates. ExpressionEngine Tags and PHP inside the Template will not be parsed.
- The template will be sent exactly as it is stored. This means that your CSS files will be much more light-weight to serve, because they do not require the use of ExpressionEngine’s template parser.
- The template must be set to Type CSS, and “text/css” MIME headers will be sent to the browser. Some browsers will not treat the CSS file as such without these headers.
- If the template is not set to be CSS, the server will report a 404 error rather than serve the file as mime type of HTML.
Triggering a Stylesheet Via the URL
It is also possible to point to a stylesheet template by directly adding the “css” trigger word in the URL path. For instance, if your stylesheet is the “channel_css” template of the “channel” template group, you could point to it using the URL:
https://example.com/css/channel/channel_css
- Again, if the template is not set to be CSS, the server will report a 404 error rather than serve the file as mime type HTML.
- This could also cause a conflict if you have a real folder named “/css”.
Using Tags and PHP in a Stylesheet
Additionally, you can run your stylesheets through the full template parser so that tags and PHP can be used. To do so, just use a normal path variable to access your stylesheet. If you link to a template this way, make sure that it is set to “CSS” as the Template Type in order to get the CSS mime headers.
NO PARSING: {stylesheet='template_group/css_template'}
https://example.com/?css=template_group/css_template
FULL PARSING: {path='template_group/css_template'}
https://example.com/template_group/css_template