Logo Größe mit Less für Shopware 5 anpassen

Ihr habt euer Logo ausgetauscht aber irgendwie ist es für euch einfach zu klein?

Kein Problem!

Heute zeige ich euch, wie ihr ganz einfach und in nur 5 Schritten die Größe eures Logos anpassen könnt.

Vorab schonmal die Schritte, weiter unten mit Erklärung:

1. Eigenes Theme erstellen und Logo einbinden
2. Datei all.less anlegen
3. Datei header.less anlegen
4. Größe verändern
5. Cache leeren und das Theme kompilieren

Gar nicht so schwer oder?

Los geht's!

Ich will nur den Code: Download

Hier findet ihr den Blogpost als Video!

1. Eigenes Theme erstellen

Das ist eine grundlegende Aufgabe die wir öfter machen und schon gelernt haben. Könnt ihr hier: Was du über die Shopware 5 Themestruktur wissen musst und wie du ein Theme anlegst abchecken.

Nachdem ihr das Theme angelegt habt, müsst ihr unter "Theme konfigurieren" euer Logo hochladen.

2. Datei all.less anlegen

Die all.less ist sehr wichtig für uns, da wir alle anderen LESS Dateien in diese einbinden und Shopware dann nur die all.less verwendet.

In den Ordner

themes/Frontend/DEINTHEME/frontend/_public/src/less

kommt die Datei all.less.

In diese Datei kommt folgender Code:

@import "_modules/modules";

In dem Ordner

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules

erstellen wir nun die modules.less.
In diese Datei schreiben wir dann folgenden Code:

@import "header";

Damit bindet ihr den Code aus der header.less Datei in eure modules.less ein, die wiederum in die all.less eingebunden wird.

3. Datei header.less anlegen

Jetzt werden wir den Code für die Größe des Logos bearbeiten.

Dazu legt ihr erst einmal die Datei header.less im Ordner

themes/Frontend/DEINTHEME/frontend/_public/src/less/_modules

an.

4. Größe anpassen

Um die Größe des Logos anzupassen schreiben wir folgenden Code hinein

.header-main {
  // Logo
  .logo-main {
    // Smaller logo for mobile viewports
    .logo--shop {
      .unitize-height(35, 16);
    }
    .logo--link {
      .unitize-height(35, 16);
    }
  }
}
@media screen and (min-width: @tabletViewportWidth) {
  .header-main {
    // Logo
    .logo-main {
      // Bigger logo for tablet viewports
      .logo--shop {
        .unitize-height(80, 16);
      }
      .logo--link {
        .unitize-height(80, 16);
      }
    }
  }
}

Ihr fragt euch wieso hier alles doppelt ist?

Responsive Design.

Die Zeilen 1 - 12 sind für Smartphones. Und der Rest für Tablets und aufwärts.

Auf Smartphones wird das Logo mit der Höhe 35px (Zeile 6 und Zeile 9) angezeigt und ab Tablets mit 80px (Zeile 19 und Zeile 22).

Ihr könnt da beliebige Werte eintragen und so die Höhe eures Logos steuern.

Wollt ihr das Logo breiter machen, schreibt es mir in die Kommentare und ich ergänze den Beitrag.

Varianten

Manche Logos sind sehr breit und nicht hoch. Irgendwann ist eine gewisse Breite erreicht und das Logo wird nicht größer. Das liegt daran: Es gibt um das Logo Element einen weitern Block der auf 30% breite festgesetzt ist.

Das kannst du aber auch einfach anpassen (Beispiel):

.header-main {
    .logo-main {
      width: 40%;

      .logo--shop {
        .unitize-height(80, 16);
        .unitize-width(300);
        img {
          width: 100%;
          height: auto;
        }
      }
      .logo--link {
        .unitize-height(80, 16);
        .unitize-width(300);
      }
    }

    .shop--navigation{
      width: 60%;
    }
  }

Achtung: Du musst darauf achten, dass .shop--navigation dann entsprechend kleiner gemacht wird. Zusammen müssen die Blöcke 100% Breite ergeben.

5. Cache leeren und Theme kompilieren

Zu guter Letzt den Cache leeren und anschließend das Theme kompilieren.

Jetzt wild am Tisch tanzen und sich freuen, dass ihr die Höhe des Logos selbst angepasst habt!

Hilfe: Bei Problemen meldet euch in den Kommentaren und ich helfe euch!

Ähnliche Tutorials / Links

• Shopdoktor: https://www.shopdoktor.com/shopware-logo-einbinden/