Template Layout question re stylesheets
How Do I?
Good afternoon!
I’ve just “discovered” and started playing with layouts. So far, I love them!
But I have one question: Some of my pages, include custom stylesheets:
<link href="{stylesheet='pet/style-form_contact.css}" media="screen" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">I can’t quite seem to figure out how to get this into the layout. If I try and use a normal variable in the main layout tag, the quotes (single / double) appear to mosh up the output.
I’ve also had zero success with the dynamic layout variables either:
{layout:set name="color" value="red"}Thoughts on how others include custom header info in their layouts….
Here’s a generic layout for you:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="{charset}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{if layout:title != ''}{layout:title} - {/if}{site_name}</title>
<link rel="stylesheet" href="{stylesheet='inc/style'}">/* assumes your CSS template is in the 'inc' group and called 'style' */
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
Your global header HTML here
{layout:contents}
Your global footer HTML here
</body>
</html>So calling the layout into another template you’d do:
Assuming your layout template is called _layout-general in the inc/ template group
{layout="inc/_layout-general"}
{layout:set name="title" value="My page title"}
In your template layout you’d have:
<html>
<head>
{layout:custom-css}
</head>
<body>
{layout:contents}
</body>Then in a template where you want to use a custom stylesheet you’d set it like this:
{layout:set name="custom-css"}
<link rel="styesheet" href="custom.css">
<link rel="styesheet" href="custom2.css">
{/layout:set}