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

[joejac]

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:
xss_enabled:
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'
slides:
    -
        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'
lightslider:
	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() {
    $("#lightSlider").lightSlider({
        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') }},

    });
  });
</script>

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


<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>
	</div>
  </li>
 {% endfor %}
</ul>
</div>
{% 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 {
    margin:0;
}

.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
Thanks

[joejac]

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

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

HTML chars get converted to entities from adding assets onward

@Netzhexe, Adding to @Karmalakas, the other site might have twig.autoescape: false in system.yaml, while your current site hasn’t. That could happen if the previous site is upgraded, while the new site is a fresh install. See the Twig section in Upgrading to 1.7 Use the following in Twig to by-pass auto-escaping for assets using the |raw filter: {{ assets.css() | raw }} {{ assets.js() | raw }} Since auto-escaping is a security measure, I would advice you to go through all your themes and che…

The solution is in adding: | raw in these two lines of lightslider.html.twig because
< and > are converted to:
special_chars:
‘>’: 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>

Regards
joejac

[anon76427325]

@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?

[joejac]

Yes, thank you for the advise @anon76427325 , 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 , but this time is working.
Customization | Grav Documentation.
Best regards

[joejac]

@joejac

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

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:

Quark blog: replace Hero image with LightSlider

Hello, I was able to place LightSlider script in place of the hero image of Blog Skeleton with Quark theme, unfortunately, for some reason I lose control on the summaries section of Blog page, I must be doing something wrong but I was not able to debug it. Then I tried to use the LightSlider plugin but it is a modular page and the Blog is not modular, and unfortunately I do not get the way to make it work with the Blog template. I wonder if is there a tutorial on how to replace the hero image…

Regards.

[joejac]

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.
Regards