CSS in Frontmatter in Mache theme Works but no in Quark Theme

Hello, I pass to my lightslider.html.twig template the heading text and format information via frontmatter over blog.md, it works fine in a previous site with Mache theme but not in Quark theme.
Lightslider is working fine but text titles are not formatted, all css is taken as text please see screen capture. I do not know if this is related or not, I checked user/config/security.yaml and I have:
html_inline_styles: true

1.- The part of the frontmatter dealing with lightslider parameters:

media_order: 'image-1.jpg,image-2.jpg,image-3.jpg'
        image: image-1.jpg
        heading: 'Text <strong>MESSAGE 1</strong>'
        subheading: 'SUBMESSAGE1'
        button_text: PAGE1
        button_url: 'page1'
        image: image-2.jpg
        heading: 'Text, text <strong>MESSAGE2</strong>'
        subheading: '<strong>SUBMESSAGE2</strong>'
        button_text: PAGE2
        button_url: 'page2'
        image: image-3.jpg
        heading: 'More text <strong>MESSAGE3</strong>'
        subheading: '<strong>SUBMESSAGE3</strong>'
        button_text: PAGE3
        button_url: 'page3'
	slideMove: 1
    slider_type: text
    type_text_vertical_padding: 70px;
    type_text_horizontal_padding: 50px;
    mode: slide
    auto: 'true'
    loop: 'true'
    pager: 'true'
    controls: 'true'
    keyPress: 'true'
    pauseOnHover: 'true'
    adaptiveHeight: 'false'
    vertical: 'false'
    verticalHeight: 500
    thumbItem: 10
    pager: 'true'
    gallery: 'false'
    galleryMargin: 5
    thumbMargin: 5
    enableTouch: 'true'
    enableDrag: 'true'
    pause: 5000
    speed: 1000

2.- lightslider.html.twig

{# partials/lightslider.html.twig #}
{# {% extends 'blog.html.twig' %} #}
{% set settings = {} %}

{% if header.lightslider %}
    {% set settings =  header.lightslider %}
{% endif %}

{% if page.header.lightslider %}
    {% set settings = settings|merge(page.header.lightslider) %}
{%  endif %}

{% block lightslider %}
<script type="text/javascript">
  $(document).ready(function() {
        item: {{ settings.item|default(1) }},
        slideMove: {{ settings.slideMove|default(3) }},
        slideMargin: {{ settings.slideMargin|default(5) }},
        mode: '{{ settings.mode|default('slide') }}',
        cssEasing: '{{ settings.cssEasing|default('ease') }}',
        easing: '{{ settings.easing|default('') }}',
        speed: {{ settings.speed|default(1000) }},
        auto: {{ settings.auto|default('false') }},
        loop: {{ settings.loop|default('false') }},
        pause: {{ settings.pause|default(2000) }},
        pauseOnHover: {{ settings.pauseOnHover|default(false) }},
        controls: {{ settings.controls|default('true') }},
        keyPress: {{ settings.keyPress|default('true') }},
        adaptiveHeight: {{ settings.adaptiveHeight|default('true') }},
        vertical: {{ settings.vertical|default('false') }},
        verticalHeight: {{ settings.verticalHeight|default(500) }},
        pager: {{ settings.pager|default('true') }},
        gallery: {{ settings.gallery|default('false') }},
        galleryMargin: {{ settings.gallery_margin|default(5) }},
        thumbMargin: {{ settings.gallery_thumb_margin|default(5) }},
        enableTouch: {{ settings.enableTouch|default('true') }},
        enableDrag: {{ settings.enableDrag|default('true') }},


<style  type="text/css">
.bannerppl {
ul {
    list-style: none outside none;
    padding-left: 0;
li {
    display: block;
    margin-right: 0px;
img {
    display: block;
    height: auto;
    max-width: 100%;

<div class="bannerppl">
<ul id="lightSlider">
{% for slide in page.header.slides %}
  <li><{% if page.media[slide.image] %}img src="{{ page.media[slide.image].url }}" {% endif %}/>
	<div class="caption" align="center">
       <h1>{{ slide.heading |raw }}</h1>
       <h2>{{ slide.subheading |raw }}</h2>
       <a class="button" href="{{ slide.button_url |raw }}">{{ slide.button_text |raw }}</a>
 {% endfor %}
{% endblock %}

3.- In blog.html.twig I deleted the hero block and I placed in its place the lightslider template include block , the rest of the template is like the Quark original blog.html.twig

{% block lightslider %}
    {% include 'partials/lightslider.html.twig' %}
{% endblock %}

4.- In base.html.twig I did not delete the hero block and placed the lightslider block just before the hero bock, and added the lightslider assets (css and js) the rest of the template is like the Quark original base.html.twig :

{% block lightslider %} {% endblock %}

5.- LightSlider style In css/custom.css

/* LightSlider Style */

.lightSlider > li {
    position: relative;
.caption {
    height: 5vh;
    position: absolute;
    top: 9vw;
    left: 0;
    padding: 20px;
    color: white !important;
    width: 100%;
    text-align: center;
	margin:0 auto;
    font-weight: normal;
	text-transform: uppercase;
    text-shadow: 2px 2px 2px black;
.caption p {

.caption h1 {
    color: white;
	font-size: 6.5vh;

.caption h2 {
    color: white;
	font-size: 6vh;

.caption a {
    text-align: center;

.caption strong {color: #6FAE46; text-shadow: 1px 1px 1px black;}

.caption .button {
color: #6fae46;
padding: 2vh;
background: rgba(255, 255, 255, 0);
border: 2px solid #ED145B;
border-radius: 5vw;
box-shadow: 1px 1px 1px #000;
font-size: 2.5vw;
font-weight: 900;
text-shadow: 1px 1px 1px black;
margin: 4vh auto;
text-align: center;
width: 15vw;
height: auto;

/* change slightSlider Next-Prev buttons */
.lSAction > a {
    opacity: 1;
 filter: brightness(0) saturate(100%) invert(63%) sepia(57%) saturate(444%) hue-rotate(53deg) brightness(88%) contrast(84%);

.lightSlider img {width: 100%;}

@media screen and (max-width: 740px) {
.header-dark.header-transparent #header:not(.scrolled) #header{
 background-color: transparent !important;/* For browsers that do not support gradients */
  background-image: none;
.caption {
    height: 2vw;
    top: 1vw;
    left: 0;
    padding: 10px;
.caption h1 {
    color: white;
    font-size: 3.5vw;
.caption h2 {
    color: white;
    font-size: 3vw;
.caption .button {
padding: 0.5vh;
border-radius: 4vw;
margin: 2vw auto;

.lightSlider img {width: 100%; height:30%}
/* Color Scheme mobil: Cards (Summaries title, and tags, labels and its background*/
.card h5 a:visited {
    color: darkgreen;

.card h5 a: {
    color: #6fae46;

.tags a:visited {
    color: darkgreen;

.tags a: {
    color: #6fae46;

.label.label-secondary {
    color: #6fae46;
    background: #e1edfd;
/* Color Scheme mobil: general links and buttons*/
a { 
    text-decoration: none;
    color: #6fae46;
    outline: 0;

a:visited {
    color: darkgreen;

.btn, .button {
    color:  #6fae46;
    border: .05rem solid  #6fae46;;

/* LightSlider Style */

6.- Please note that I do this on frontmatter because I want to have total control on images, captions and its format via the Admin panel, it is working on Mache theme in a previous website but not on Quark on a new website.
I appreciate your help to resolve this

After much looking, I found in the downloaded code of the generated page, missing the tags characters: < and > and replaced with & lt ; and & gt ; respectively. The browser inspector converted them back to < and > and that made me lose hours :see_no_evil:

I missed | raw as per indicated in this post thanks to @pamtbaau

The solution is in adding: | raw in these two lines of lightslider.html.twig because
< and > are converted to:
‘>’: gt
‘<’: lt
and changing in user/config/system.yaml does not work.
This is the solution

<h1>{{ slide.heading |raw }}</h1>
<h2>{{ slide.subheading |raw }}</h2>


@joejac, You mentioned you have updated templates ‘lightslider.html.twig’, ’ blog.html.twig’, and ‘base.html.twig’.

Just to prevent your efforts get wasted when a new version of the theme/plugin is being released: Did you copy the original templates into your inherited or custom theme?

1 Like

Yes, thank you for the advise @pamtbaau :+1:, the first thing I did is to create a custom theme “quarkmytheme” that inherit the base theme, where I work on quarkmytheme/css/custom.css and copied only the templates I need to modify, in this case:

1.- user/themes/quarkmytheme/templates/partials/lightslider.html.twig
2.- user/themes/quarkmytheme/templates/blog.html.twig
3.- user/themes/quarkmytheme/templates/css/custom.css
4.- user/themes/quarkmytheme/templates/partials/base.html.twig

I follow the documentation, little by little and I do my best to understand, it takes time of course, and some times I get lost and make mistakes :see_no_evil:, but this time is working.
Customization | Grav Documentation.
Best regards

Please be aware that in order to avoid problems with other parts of the page, like for example the blog summaries, this line should be eliminated from lightslider.html.twig:

{% extends 'blog.html.twig' %}

as explained in this post:


I did some minor adjustments to improve the adaptation of the LightSlider script to Quark theme. So I changed the post to have these latest changes.