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?

2 Answers 2


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:

    <link rel="stylesheet" href="/css/global.css">

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


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

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

  • 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. Commented Mar 31, 2017 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 Commented Mar 31, 2017 at 19:34

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:

<link rel="stylesheet" href="/css/{embed:mystylesheet}">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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