screenshots_slider_caption class gone after version update

Hi @nickk40

In 3.5.1.7 we did a major overhaul of the way Smart Slider deals with options. Part of this chanage was for security, to comply with www.ads-software.com’s security standards and to ensure that no dangerous code could run from Smart Slider. The the other part was HTML validity which is very important for many reasons, including SEO and performance.

So for security and HTML validity reason, we only allow tags in the specific layers, which are allowed to use based on HTML’s standards. The Text layer what you’re using was created for displaying content inside p tags, and the following tags are supported inside p tags:
https://html.spec.whatwg.org/#phrasing-content

So in Smart Slider we’ll only support the following tags in the Text layer from now on:
https://smartslider.helpscoutdocs.com/article/1832-text-layer#supported-tags

If you used any other tags, those will be omitted for the reasons above. The div is not allowed to be inside p tags, and that is why it will not be displayed anymore. So you should replace your div tag with one of the supported tags.

Since you’ll be using your own codes to style the content, perhaps the best would be using just <span> tags, like this:

<span class="screenshots_slider_caption">
    <span class="slider_title">
        Title
    </span>
</span>

Is there any specific reasons you needed to use custom codes to style your content? Perhaps you could achieve the same look using our options. Can you share a screenshot about what you were trying to achieve? You can upload the screenshot to a service like https://imgur.com/.

Hi Ramona,

Thanks for having a look and for your clear explanation.

Unfortunately, I can’t send a screenshot but what I did in the old version was to add a Text layer with:

<div class="screenshots_slider_caption">
    <p class="slider_title">abc</p>
    <p> etc.</p>
</div>

For the div I had some custom styling going on such as a background-color, padding, border, size, etc.

If I’m not mistaken the p elements inside the div still work fine. It’s just the div that no longer works. Unfortunately, changing this to a span doesn’t seem to make it work: it then shows the span as a separate element next to the p elements.

But if I point my custom css to the class n2-ss-item-content instead of to screenshots_slider_caption everything looks the same again. So that seems to solve it ??

Hi @nickk40

If you’re only using this div to add background, padding and border, you could acutally use a row as the container:
https://smartslider.helpscoutdocs.com/article/1811-row
and place the separate layers with the content into the row. E.g. if you have a seaprate title and description, then you should have 3 layers what you can style using Smart Slider’s options:
1. the row as the container
2. a text layer for the title
3. a text layer for the descripotion

Unfortunately, changing this to a span doesn’t seem to make it work: it then shows the span as a separate element next to the p elements.

You should change both the div and the p tag to span, as the sample code has it:

<span class="screenshots_slider_caption">
    <span class="slider_title">
        Title
    </span>
</span>

In any case, I’m glad you were able to find a way to make it work.