Problem

Reiht man mehrere Elemente des modularen Templates «Text» aneinander, zeigt sich, dass die Abstände zwischen den Elementen etwas gross ausfallen (siehe Screenshot)
gravrezmodtextdist

Lösung
###### Hinweis Möchte man ein Theme anpassen, ohne dass diese Anpassungen beim nächsten Update verloren gehen, muss man ein [«Child-Theme»](https://learn.getgrav.org/17/themes/customization?target=_blank#theme-inheritance) 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

Schritt-für-Schritt-Anleitung
1. Verzeichnisse vorbereiten

Templates

  • Im Ordner grav/user/themes/quark_child einen Ordner namens templates erstellen
  • Im Ordner grav/user/themes/quark_child/templates einen Ordner namens modular erstellen

Blueprints

  • Im Ordner grav/user/themes/quark_child einen Ordner namens blueprints erstellen
  • Im Ordner grav/user/themes/quark_child/blueprints einen Ordner namens modular erstellen

2. Dateien vorbereiten

Templates

  • Die Datei grav/user/themes/quark/templates/modular/text.html.twig in den Ordner grav/user/themes/quark_child/templates/modular kopieren
  • Von der Datei grav/user/themes/quark_child/templates/modular/text.html.twig eine Kopie namens grav/user/themes/quark_child/templates/modular/text-eingklemmt.html.twig erstellen

Blueprints

  • Die Datei grav/user/themes/quark/blueprints/modular/text.yaml in den Ordner grav/user/themes/quark_child/blueprints/modular kopieren
  • Von der Datei grav/user/themes/quark_child/blueprints//modular/text.yaml eine Kopie namens grav/user/themes/quark_child/blueprints/modular/text-eingeklemmt.yaml erstellen

Bei der Benennung der zusammengehörigen twig- und yaml-Dateien streng darauf achten, dass der Teil vor der Dateiendung identisch ist (text-eingeklemmt).

3. Dateien anpassen

Templates

  • a) grav/user/themes/quark_child/templates/modular/text.html.twig
    {% 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

    • Zeile 3 um die Style-Definition style="padding-bottom: 0.5rem; " ergänzen, also neu:
      <section class="section modular-text {{ page.header.class}} bg-gray" style="padding-bottom: 0.5rem;">
    • Will man gleichzeitig die Hintergrundfarbe von Grau auf Weiss ändern, entfernt man den Tag bg-gray, also neu:
    • <section class="section modular-text {{ page.header.class}} " style="padding-bottom: 0.5rem;">

      Das vollständige, angepasste Template mit weissem Hintergrund
      {% 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>
  • b) grav/user/themes/quark_child/templates/modular/text-eingeklemmt.html.twig (identischer Code wie text.html.twig -> siehe oben)

    Anpassungen
    • Zeile 3 um die Style-Definition 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;">
    • Will man gleichzeitig die Hintergrundfarbe von Grau auf Weiss ändern, entfernt man den Tag bg-gray, also neu:
    • <section class="section modular-text {{ page.header.class}} " style="padding-top: 0.5rem; padding-bottom: 0.5rem;">

      Das vollständige, angepasste Template mit weissem Hintergrund
      {% 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>
4. Templates anwenden
  • Für das erste Text- oder Text-Bild-Element das modulare Seiten-Template «Text» auswählen
  • Für alle folgenden Text- oder Text-Bild-Elemente das modulare Seiten-Template «Text-eingeklemmt» auswählen

Screenshot der Seite mit angepassten Abständen
gravrezmodtextdist3

vorheriger Beitrag nächster Beitrag


Kommentar hinzufügen