ExpressionEngine® Answers is a question and answer site for administrators, end users, developers and designers for ExpressionEngine® CMS. It only takes a minute to sign up.
Sign up to join this community
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?
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}.
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>
