Tag 6: Contao Erweiterungen installieren und gestalten

Du möchtest OPTIMIST mit deinen Lieblingserweiterungen nutzen oder um eine bestimmte Funktion erweitern? Kein Problem. In diesem Artikel erzähle ich dir, was du dabei beachten solltest und wie du sie in OPTIMIST am Besten gestaltest.

1. Installation von Erweiterungen

Die Installation von zusätzlichen Erweiterungen ist in OPTIMIST ohne Probleme möglich. Sofern die Erweiterung für Contao 5.3 freigegeben ist (also in einer blanken Contao 5.3 Installation funktionieren würde), kann sie auch mit dem OPTIMIST Theme genutzt werden (Ausnahmen sind aktuell nicht bekannt).

Wenn du zum Beispiel unsere Portfolio-Erweiterung installieren möchtest, um Projekte oder Referenzen ähnlich den News über einen eigenen Menüpunkt im Backend zu verwalten, dann kannst du dies ganz einfach machen, indem du nach Portfolio im Contao Manager suchst und die Erweiterung installierst.

2. Fehlerhafte Darstellung nach der Installation

Es gibt allerdings ein paar Erweiterungen, die das Markup und CSS von Bootstrap verwenden. Diese können nach der Installation zu fehlerhaften Darstellungen führen – sowohl bei den normalen Inhalten, als auch bei den Inhalten, die durch die Erweiterung erzeugt werden.

Ein Problem, was wir immer wieder beobachten ist die Verwendung der gleichen Grid-Klassen .col-[viewport]-[column].

Wenn die installierte Erweiterung auf Bootstrap setzt, dann kann es sinnvoll sein, die CSS-Anweisungen der Erweiterung zu deaktivieren beziehungsweise zu entfernen. Das geht je nach Erweiterung über eine Checkbox in den (System-)Einstellungen, im Seitenlayout oder über ein Template.

Auch eine Nachricht an den Entwickler oder die Entwicklerin kann manchmal helfen, die richtige Stelle zu finden.

3. Erweiterungen gestalten

Sofern die installierte Erweiterung eine Ausgabe im Frontend erzeugt, wirst du diese an das generelle Layout der Website anpassen wollen. Manche Erweiterungen bringen bereits CSS-Anweisungen mit, diese zu überschreiben kann aber deutlich aufwändiger sein, als einfach mit einer ungestalteten Version zu starten.

Um die Erweiterung zu gestalten, empfehle ich dir, auf die bisherige Struktur des Themes aufzubauen. Möchtest du zum Beispiel eine Consent-Erweiterung installieren und gestalten, legst du eine scss/components/_consent.scss an und importierst diese in die default.scss.

In diese Datei trägst du nun alle CSS-Anweisungen ein, die das Overlay, die separate Unterseite (sofern vorhanden) und den Link zum erneuten Öffnen betreffen. Möchtest du diese Anweisungen für andere Projekte wieder verwenden, kann es außerdem sinnvoll sein, die Custom Properties (CSS Variablen) des Themes wieder aufzugreifen, zum Beispiel, indem du einen eigenen Block in der _variables.scss ergänzt.

Eine SCSS-Datei für hofff/contao-consent könnte zum Beispiel so aussehen:

Beispiel-SCSS für Contao Consent 
// files/theme/scss/components/_consent.scss

//
// COMPONENTS/CONSENT
// --------------------------------------------------

.hofff-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1006;
  max-height: 100%;
  overflow-y: auto;
  background: color-mix(in srgb, var(--color-page-background), transparent 10%);
  backdrop-filter: blur(10px);

  > .inside {
    @include wrapper-max;

    padding: var(--base-spacing-unit-lg) var(--base-spacing-unit) var(--base-spacing-unit) ;
  }

  .col {
    @include make-col(12); // Fix für Bootstrap Grid

    font-size: var(--base-font-size-xs);
  }
}

.hofff-consent-root-headline {
  @extend %_h4;
}

.hofff-consent-root-text {
  margin-bottom: var(--base-spacing-unit);
}

.hofff-consent-buttons,
.hofff-consent-privacy-settings-button {
  display: inline-flex;
  gap: var(--base-spacing-unit-sm);
}

.hofff-consent-button-revoke,
.hofff-consent-button-accept {
  @extend %button;
  @extend %button--primary;
}

.hofff-consent-button-revoke,
.hofff-consent-privacy-settings-button,
.hofff-consent-button-close {
  @extend %button;

  color: var(--color-gray-light);
  outline: none;
}

.hofff-consent-banner-additional-content {
  margin-top: var(--base-spacing-unit);

  .nav--footer {
    .level_1 {
      justify-content: center;
    }
  }
}

// settings
.hofff-consent-privacy-settings {
  .hoff-card {
    margin-bottom: var(--base-spacing-unit-lg);
    border: var(--base-border);

    .card-header {
      background: var(--color-gray-lighter);
      padding: var(--base-spacing-unit-lg);
    }

    .hofff-consent-switch {
      display: block;
    }

    .hofff-consent-feedback {
      position: absolute;
      display: block;
      background-color: var(--color-brand-secondary);
      border-radius: 4px;
      padding: 0 var(--base-spacing-unit-sm);
      max-width: 30rem;
      font-size: var(--base-font-size-xs);
    }

    legend,
    ::marker {
      @extend %_h3;
    }

    .hofff-consent-tag-collection {
      margin-left: 0;
      list-style-type: none;
    }

    .list-group-item {
      padding-bottom: var(--base-spacing-unit-lg);
      margin: var(--base-spacing-unit);
      border-bottom: var(--base-border);

      &::marker {
        vertical-align: middle;
      }

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }
    }
  }

  .widget-explanation {
    margin-bottom: var(--base-spacing-unit);
  }

  .widget-switch {
    span.valid-feedback {
      transition: opacity 0.3s;
    }

    span.custom-switch ~ span.valid-feedback {
      opacity: 0%;
    }

    span.custom-switch.was-validated ~ span.valid-feedback {
      opacity: 100%;
    }
  }

  .hofff-consent-privacy-notes {
    margin-bottom: var(--base-spacing-unit-lg);
  }
}

Und damit sind wir fast am Ende des Kurses „Bessere Websites mit OPTIMIST“ angekommen. Aber vorher melde ich mich nochmal mit einem Video, in dem ich auf das Thema Contao Updates und Theme Updates eingehen werde.

Bis dahin, mach's gut und
Erstma'!