Adding inline CSS to the header

Archive
1

Hi,
is it possible to add inline CSS to the header from within a modular template?

2

Have you tried it? I think it should work, but you might need to disable the page cache for that page.

3

Yes I tried it, but most likely I did something wrong because it didn’t work.
I used

{% do assets.addInlineCss('h1{color: red;}') %}

in the modular template but there was no output in the header, even with disabled cache.

Would you please show me how to do it?

4

Can you paste the whole modular template?

5

This is the wohle content of the modular template. The the content of the addInlineCss command is just for testing purpose.

{% do assets.addInlineCss('.text-box{color:red !important;}')%}

<article class="text-box {{ header.boxStyle|join(' ') }}"
         style="
            {% include 'partials/bg-image.html.twig' with {'images':page.media.images} %}
         "        
        >
    {{ header.buttonLinks }}
    <div class="inner {{ header.boxInnerStyle }}">
        {{ content }}
        {% if header.linkBox %}
            {% include 'partials/linkbox.html.twig' with {'linkBox':header.linkBox} %}
        {% endif %}
    </div>
    {% if header.triggerCaption is not empty %}
        <div class="trigger trigger-button" data-dir="next"><span>{{ header.triggerCaption }}</span></div>
    {% endif %}
    {% if header.showStopper %}
        {% include 'partials/stopper.html.twig' %}
    {% endif %} 
    {% if header.perkText %}
        <div class="perk aright">
            {{ header.perkText }}
        </div>
    {% endif %}
</article>
---