Wallogit.com
2017 © Pedro Peláez
Inline CSS for email templates in twig.
A Twig tag for inlining styles in a template., (*1)
This plugin requires Craft CMS 4.0.2 or later., (*2)
To install this plugin, follow these instructions., (*3)
cd /path/to/project
composer require enovatedesign/craft-style-inliner
Use the {% inlinecss %}{% endinlinecss %} tag pair in your templates., (*4)
Input:, (*5)
{% inlinecss %}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
h1 { color: red }
</style>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
{% endinlinecss %}
Output:, (*6)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
h1 { color:red }
</style>
</head>
<body>
<h1 style="color: red;">Hello, world!</h1>
</body>
</html>
You can inline entire local CSS files in to the <head> of a document
with the {% criticalcss %} twig tag., (*7)
{% extends "_layout.twig" %}
{% criticalcss 'home' %}
The .css extension is added automatically. By default the plugin
prefixes the @webroot/ alias, but this can be configured in a config file.
You can also switch critical CSS on and off entirely for each environment:, (*8)
/config/style-inliner.php, (*9)
<?php
return [
'criticalCss' => true,
'criticalPrefix' => '@webroot/resources/',
];
Inline CSS for email templates in twig.
Inline CSS for email templates in twig.
Inline CSS for email templates in twig.
Inline CSS for email templates in twig.
Inline CSS for email templates in twig.
Inline CSS for email templates in twig.