Header mit Hintergrundbild versehen

Header mit Hintergrundbild versehen

Als Beispiel für unser Tutorial nehmen wir das Remake-Template. Es soll lediglich die reguläre Vorgehensweise gezeigt werden, wie so etwas funktioniert, ist bei jedem Theme identisch.
Für die Bearbeitung des Themes verwenden wir den JTL Theme Editor.

Eine neue Variable im Theme anlegen

Im ersten Schritt definieren wir eine neue Variable im Child-Template. Die Variable nennen wir "$header-bg-image" und speichern sie im Theme "MyClear" in der Datei "_variables.scss". Als Wert für die Variable hinterlegen wir den Pfad auf unsere Grafik.
  1. $header-bg-image: $header-bg-color url("../base/images/header.png") repeat;
Nun speichern wir die Datei ab (im unteren Bereich des JTL Theme-Editors auf den blauen Button klicken).

Styling des Headers anpassen

In diesem Schritt passen wir das Styling unseren Kopfbereiches (Header) an. Statt der Hintergrundfarbe sollte unser Hintergrundbild erscheinen.
Klicke im JTL Theme Editor auf die Datei "clean.scss" und füge diesen Code ein:
  1. header {
  2.     background: $header-bg-image;
  3. }
Je nachdem, wie das Template aufgebaut ist und welche Einstellungen für den Kopfbereich (Header) gesetzt wurde, kann evtl. notwendig sein auch die obere Ebene mit einer Transparenz zu versehen.
  1. header .navbar-wrapper {   
  2.     background-color: transparent;
  3. }
Wir können unseren Code verschachteln, da wir SASS verwenden:
  1. header {
  2.     background: $header-bg-image;
  3.     .navbar-wrapper {   
  4.         background-color: transparent;
  5.     }
  6. }

Hintergrundbild nur bei Desktop anzeigen

Evtl. ist es sinnvoll unser Hintergrundbild nur auf Desktop anzuzeigen, also alle Geräte ab 992 px Auflösung. Hierzu fügen wir oberhalb unseren Codes die passende Anweisung ein:
  1. @include media-breakpoint-up(lg) {
  2.     header {
  3.         background: $header-bg-image;
  4.             .navbar-wrapper {   
  5.                 background-color: transparent;
  6.             }
  7.     }
  8. }

Das Hintergrundbild ins Verzeichnis hochladen

Das Hintergrundbild sollte möglichst gut komprimiert sein und nicht so groß ausfallen.
Kopiere dein Bild in das Child-Template.
  1. /templates/Child-Template/themes/base/images/

Nun ist unsere kleine Anpassung komplett.

    • Related Articles

    • Hinweis in der Topbar einfügen oder bearbeiten

      In der Topbar ist es möglich zwischen dem Google Translator und den Links einen individuellen Hinweis anzuzeigen. Hinweis einfügen / bearbeiten Der Hinweis im JTL-Shop 5 ist standardmäßig nicht belegt und kann über die Sprachverwaltung eingefügt ...

    • Mit Theme Editor die Template-Farben anpassen

      Mit dem Theme Editor kannst du die Template-Farben individuell einstellen z.B. passend zum Corporate Design oder Logofarben.

    • Spamschutz mit Google reCaptcha im JTL-Shop aktivieren

      In diesem Artikel zeigen wir wie man im JTL-Shop den Spamschutz mithilfe des Google reCaptcha einrichtet und für Shop-Formulare aktiviert. Lade dir im JTL-ExtensionStore das Plugin Google reCaptcha herunter und installiere es im Shop. Google ...

    • Header einstellen in Remake

      Folgende Konfigurationen sind nicht möglich Logo zentrieren: ja Suchfeldposition: rechtsbündig Grund: Damit das Logo mittig positioniert werden kann, bedarf dies drei Spalten. In dieser Konfiguration gibt es allerdings nur zwei Spalten: Logo und ...

    • Slider im JTL-Shop 5 anlegen

      In dieser Anleitung zeigen wir, wie du innerhalb wenigen Minuten Slider in deinem JTL-Shop 5 anlegst und welche Möglichkeiten es gibt. Im JTL-Shop gibt es zwei Wege einen Slider anzulegen, über den OnPage Composer und über das Shopbackend. Wir gehen ...