Reiht man mehrere Elemente des modularen Templates «Text» aneinander, zeigt sich, dass die Abstände zwischen den Elementen etwas gross ausfallen (siehe Screenshot)
Möchte man ein Theme anpassen, ohne dass diese Anpassungen beim nächsten Update verloren gehen, muss man ein «Child-Theme» erstellen.
Die Abstände lassen sich verringern, indem man das modulare Template «Text» leicht anpasst und ein zusätzliches Template erzeugt. Es gibt mehrere Möglichkeiten, die nötigen Anpassungen vorzunehmen:
a) am CSS ( custom.css) und am modularen Template «Text» bzw. an einer Kopie davon
b) ausschliesslich am modularen Template «Text» bzw. an einer Kopie davon -> siehe das folgende Rezept
Templates
Blueprints
Templates
Blueprints
Bei der Benennung der zusammengehörigen twig- und yaml-Dateien streng darauf achten, dass der Teil vor der Dateiendung identisch ist (text-eingeklemmt).
Templates
{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}
<section class="section modular-text {{ page.header.class}} bg-gray">
<section class="container {{ grid_size }}">
<div class="columns {{ page.header.image_align|default('align-right') }}">
{% if image %}
<div class="column col-6 col-md-12">
{{ content|raw }}
</div>
<div class="column col-6 col-md-12">
{{ image.html|raw }}
</div>
{% else %}
<div class="column col-12">
{{ content|raw }}
</div>
{% endif %}
</div>
</section>
</section>
Anpassungen
style="padding-bottom: 0.5rem; "
ergänzen, also neu:<section class="section modular-text {{ page.header.class}} bg-gray" style="padding-bottom: 0.5rem;">
bg-gray
, also neu:<section class="section modular-text {{ page.header.class}} " style="padding-bottom: 0.5rem;">
{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}
<section class="section modular-text {{ page.header.class}} " style="padding-bottom: 0.5rem; ">
<section class="container {{ grid_size }}">
<div class="columns {{ page.header.image_align|default('align-right') }}">
{% if image %}
<div class="column col-6 col-md-12">
{{ content|raw }}
</div>
<div class="column col-6 col-md-12">
{{ image.html|raw }}
</div>
{% else %}
<div class="column col-12">
{{ content|raw }}
</div>
{% endif %}
</div>
</section>
</section>
style="padding-top: 0.5rem; padding-bottom: 0.5rem; "
ergänzen, also neu:<section class="section modular-text {{ page.header.class}} bg-gray" style="padding-top: 0.5rem; padding-bottom: 0.5rem;">
bg-gray
, also neu:<section class="section modular-text {{ page.header.class}} " style="padding-top: 0.5rem; padding-bottom: 0.5rem;">
{% set grid_size = theme_var('grid-size') %}
{% set image = page.media.images|first %}
<section class="section modular-text {{ page.header.class}} " style="padding-top: 0.5rem; padding-bottom: 0.5rem; ">
<section class="container {{ grid_size }}">
<div class="columns {{ page.header.image_align|default('align-right') }}">
{% if image %}
<div class="column col-6 col-md-12">
{{ content|raw }}
</div>
<div class="column col-6 col-md-12">
{{ image.html|raw }}
</div>
{% else %}
<div class="column col-12">
{{ content|raw }}
</div>
{% endif %}
</div>
</section>
</section>
Kommentar hinzufügen