1

Right now I have an includes.group, that holds different templates that I load. Such as the nav, head, footer etc.

As of right now the head holds all of my style sheets for every template. But I would like a way to only load certain style sheets depending on the template.

How can I go about doing that?

3

The simplest and and most flexible way is to use Template Layouts.

In your main HTML Layout wrapper (simplified) which we will say is named "_html-layout" in the "layouts" template group:

<html>
<head>
    <link rel="stylesheet" href="/css/global.css">
    {layout:css_extra}
<head>
<body>
    {layout:contents}
</body>
</html>

In your templates, identify which layout it will use, and set the css_extra layout variable.:

{layout="layouts/_html-layout"}

{layout:set name="css_extra"}
    <link rel="stylesheet" href="/css/contact-form.css">
    <link rel="stylesheet" href="/css/form-validation.css">
{/layout:set}

{layout:css_extra} in the layout will get the extra stylesheets, and everything else that the template outputs will become {layout:contents}.

| improve this answer | |
  • Not sure what it has to do with template routes (i think nothing at all!). Use layout templates, using layout variables to pass the CSS entries is very efficient, and a better solution than using an embed. – JCOGS Design Mar 31 '17 at 17:59
  • wrote this in a hurry, since i was baking pizza's ;-) you're right it's layout templates, not routes. silly me – Jelle Dijkstra Mar 31 '17 at 19:34
0

How we do that: in your embed call, create some variables and pass the stylesheet names that you want to load, then pass those into the template.

{embed="template_group/template" stylesheet="mystylesheet.css"}

and in the template:

<head>
<link rel="stylesheet" href="/css/{embed:mystylesheet}">
</head>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.