Thread tagged as: Question, Problem

CSS Custom Properties in Perch Template


I have tried to use a <style></style> element in the default.html perch template as follows:

<perch:pages id="descriptor" label="Title Descriptor" suppress="true"/>
<perch:template path="pages/attributes/seo.html"/>
<meta name="viewport" content="width=device-width">
<meta name="msapplication-config" content="/_xml/browserconfig.xml">
<link rel="manifest" href="/_json/manifest.json">
<style><perch:template path="_templates/content/_var.css"/></style>
<link rel="stylesheet" href="/_templates/content/_site.css"/>
<perch:template path="pages/attributes/icons.html"/>
<perch:template path="pages/attributes/facebook.html"/>

with the result being an empty <style></style> element.

I have correctly altered my config.php file to allow Perch templates in the www root, however the only way I can use styles is via the <link/> element which is render blocking.

I am aware that we can now use any file type in the /content directory and that is most helpful but could this functionality also be extended the /pages directory as well?

Thanks for an otherwise excellent product which keeps getting better and better.

Garth Holmes

Garth Holmes 0 points

  • 3 years ago
Hussein Al Hammad

Hussein Al Hammad 105 points
Registered Developer

Hello Garth,

By default the path in template includes is relative to the default template folder perch/templates. If you were using the default templates folder and your file was perch/templates/_templates/content/_var.css, your template include would work fine even in the perch:pages namespace.

Enable debug and see if Perch is finding your sub-template. Since you say it doesn't output anything you'll probably find an error "Requested sub-template not found:".

By the way, you already have a template include in the same template that has a path relative to perch/templates:

<perch:template path="pages/attributes/seo.html"/>

If the path pages/attributes/seo.html works, then Perch is looking for your _templates folder in perch/templates and not your root.

Thank you Hussein,

You were spot on.