diff --git a/docs/manual/faq/_index.de.md b/docs/manual/faq/_index.de.md index 084815515..e405867e6 100644 --- a/docs/manual/faq/_index.de.md +++ b/docs/manual/faq/_index.de.md @@ -71,6 +71,25 @@ Die Information hierzu findest du unter [Template-Daten anzeigen](/de/layout/tem Die Information hierzu findest du unter [TinyMCE-Editor Konfiguration](/de/anleitungen/tinymce-konfiguration/). {{% /faq %}} +{{% faq "Wie kann ich eine CSS-Klasse zu allen Überschriften hinzufügen?" %}} +Um eine CSS-Klasse zu der Überschrift aller modernen Fragments (Inhaltselemente oder Frontend-Module) im Frontend +hinzuzufügen, können die HTML Attribute des `headline` Objektes in der `_headline` +[Twig Komponente](https://docs.contao.org/dev/framework/templates/creating-templates/#contao-components) angepasst werden: + +```twig +{# templates/component/_headline.html.twig #} +{% use "@Contao/component/_headline.html.twig" %} + +{% block headline_attributes -%} + {%- set headline = headline|merge({attributes: attrs().addClass('foobar').mergeWith(headline.attributes|default)}) -%} + {{ parent() }} +{%- endblock %} +``` + +Beachte, dass dies bei Inhaltselementen oder Frontend-Modulen, die noch PHP Templates verwenden - oder die `_headline` +Twig Komponente nicht verwenden, keine Auswirkung hat. +{{% /faq %}} + ## Installation diff --git a/docs/manual/faq/_index.en.md b/docs/manual/faq/_index.en.md index 8c11bfdcd..f210bde12 100644 --- a/docs/manual/faq/_index.en.md +++ b/docs/manual/faq/_index.en.md @@ -70,6 +70,25 @@ The information about this can be found under [Show Template Data](/en/layout/te The information about this can be found under [TinyMCE Editor Configuration](/en/guides/tinymce-configuration/). {{% /faq %}} +{{% faq "How can I add a CSS class to all headlines?" %}} +You can add a CSS class to all headlines of all modern fragments (content elements or front end modules) in the front +end by setting the HTML attributes of the `headline` object in the `_headline` +[Twig component](https://docs.contao.org/dev/framework/templates/creating-templates/#contao-components)): + +```twig +{# templates/component/_headline.html.twig #} +{% use "@Contao/component/_headline.html.twig" %} + +{% block headline_attributes -%} + {%- set headline = headline|merge({attributes: attrs().addClass('foobar').mergeWith(headline.attributes|default)}) -%} + {{ parent() }} +{%- endblock %} +``` + +Note that this will not affect content elements and modules using legacy templates - or templates that are not using the +`_headline` component. +{{% /faq %}} + ## Installation