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

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

Alexander Wolf 27. August 2015 56

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

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

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

56 Kommentare

  • Habe den code :

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

    .logo--shop {
    .unitize(margin-left, -24);
    .unitize-height(70);
    .unitize-width(400);
    .unitize(margin-top, -10);
    }
    }
    .logo--link {
    .unitize(margin-left, -24);
    .unitize(margin-top, -10);
    .unitize-height(70);
    .unitize-width(400);
    img {
    width: 100%;
    height: auto;
    }
    }

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

    von abel übernommen passt perfekt sieht gut aus, nur die mobile version egl was ich dranhänge klappt nicht.
  • Hallo Björn,

    wie in meinem Kommentar beschrieben ist es hier wichtig, dass der "mobile-first" Ansatz beibehalten wird, d.h. die Anpassungen muessen zunaechst in der mobilen Ansicht passen und werden dann mit den media queries erweitert. Hier findest du eine Erklaerung zu media queries: https://wiki.selfhtml.org/wiki/CSS/Media_Queries

    Ansonsten kannst du dich gerne bei uns melden: support@8mylez.com

    Gruß
    Alexander
  • Hallo

    Ich konnte die Grösse und die Position des Logos perfekt für Desktop einrichten.
    Nun hab ich das Problem das ich auf dem Smartphone total anders ist.

    Ich verwende diese header.less Datei:
    .header-main {
    .logo-main {
    width: 30%;

    .logo--shop {
    .unitize(margin-left, -24);
    .unitize-height(70);
    .unitize-width(400);
    .unitize(margin-top, -10);
    }
    }
    .logo--link {
    .unitize(margin-left, -24);
    .unitize(margin-top, -10);
    .unitize-height(70);
    .unitize-width(400);
    img {
    width: 100%;
    height: auto;
    }
    }

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

    Nun möchte ich das ganze noch Separat für die Smartphones einstellen. Ich habe schon versucht einen Mix von den beiden oben Beschriebenen Codes in der Anleitung zu machen, bin aber gescheitert.

    Kannst du mir da helfen?

    Grüsse
  • Hallo Abel,

    Shopware arbeitet mit dem "mobile-first" Ansatz, d.h. der Code ist im Standard fuer das Smartphone ausgelegt. Mit weiteren Regeln kann der Code dann ueberschrieben, damit dieser auch auf dem Desktop gut aussieht.

    Dazu kannst du die media queries nutzen @media screen and (min-width: @tabletViewportWidth)

    Wenn du moechtest schauen wir uns das Ganze genauer an. Schick uns doch bitte Zugangsdaten an support@8mylez.com

    Gruß
    Alexander
  • Hallo Alexander,

    wie komme ich zu dem Ordner: themes/Frontend/DEINTHEME/frontend/_public/src/less?

    Vielen Dank.
  • Du musst das über einen FTP Client wie Filezilla machen.
  • Hallo Inka,

    genau wie Darek es sagt. Du musst dich mit deinem Server wo die Dateien liegen mit einem FTP Client verbinden. Dann solltest du den Ordner themes und alle seine Unterordner sehen.

    Vorausgesetzt du hast ein neues Theme, wie im Tutorial beschrieben, angelegt.

    Gruß
    Alexander
  • Zuallerst. Das war der einzige Tutorial, der bei mir funktioniert hat :))
    Also vielen Dank dafür.
    Allerdings habe ich ein Problem. Am Handy ist es so, dass bei mir die Suchleiste und das Menü übereinander liegen.
    Wie kann ich das denn lösen?
  • Hallo Darek,

    das freut mich! Kannst du mir einen Link zu deinem Shop an support@8mylez.com schicken, damit wir uns das genauer anschauen können?

    Gruß
    Alexander
  • HI,

    vielen Dank für den Beitrag.

    Könnt Ihr auch aufzeigen wie man das Logo zentriert?

    DAnke
  • Hallo Dee,

    kommt auf die Liste! Danke für deinen Kommentar.

    Gruß
    Alexander
  • Hallo,
    Ich hab mal eine Frage, woran kann es liegen, wenn kein Tutorial und Code funktioniert?
    Themes anlegen, Bild hochladen und Ordner erstellen ist immer gleich.
    Leider hat keiner der gewünschten Codes dazu geführt dass das Logo größer wurde.
    Man muss dazu sagen, dass wir die Community Version haben und der "Shop" über die IP aufgerufen wird. (Falls dies z.B. der Grund dafür sein sollte)

    Vielleicht haben Sie noch einen Tipp.
    Lg Jan
  • Hallo Jan,

    die Community Edition oder der Aufruf ueber die IP haben darauf keinen Einfluss.

    Kompilierst du das Theme nach den Anpassungen auch? Moeglicherweise ueberschreibst du die falschen Dateien. Wenn du uns Zugangsdaten schickst, koennen wir da etwas genauer rueber schauen: support@8mylez.com" rel="nofollow">support@8mylez.com>

    Gruß
    Alexander
  • Hallo Alexander,

    Dane für dieses kostenlose Plugin, das zuerst nicht zum gewünschten Ergebnis führte aber letztendlich doch - wahrscheinlich zuerst ein Versionsproblem und dann alle Caches leeren). Nach zig Versuchen per neuem Theme und Less-Dateien, die alle gescheitert sind, habe ich damit jetzt das gewünschte Resultat bekommen.
    Gute Arbeit. Wo könnte man den Voten, damit bei Deinem Plugin auch ein paar Sternchen dazu kommen?
    LG
    Jotto
    (die unten angegebene URL ist eine Testumgebung/-domain)
  • Hallo Jotto,

    vielen Dank für das nette Feedback!

    Es freut mich sehr, dass es am Ende doch noch geklappt hat.

    Voten solltest du in deinem Shopware Account können, da gibt es eine Auflistung der Plugins die du gekauft hast (die kostenlosen sind auch dabei). Da kannst du auch die Plugins usw. bewerten.

    Gruß
    Alexander
  • Habs rausbekommen.
    Hatte ein zu kleines Browserfenster und da hat Shopware das kleinere Logo ausgeliefert.

    Gruß Jan
  • Hallo Jan,

    super! Freut uns wirklich sehr, dass dir das Tutorial gefällt.

    Gruß
    Alexander
  • Hi Alexander,
    deine Anleitung hat Super geklappt, allerdings funktioniert das bei mir nur in Firefox.
    Wenn ich den Shop mit dem Iexplorer oder Edge aufrufe, bekomme ich das alte DemoShop Logo angezeigt, woran liegt das?

    Gruß Jan
  • Hi Alexander,

    vielen Dank für deine Hilfe. ich habe genau wie du geshrieben, aber bei mir funktioniert es irgendwie nicht. Woran könnte es liegen?

    Beste Grüße,
    Karakoz
  • Hallo Karakoz,

    dazu müsste ich mir den Code anschauen. Kannst du mir den per E-Mail schicken an i@8mylez.com?

    Am besten nur die LESS Dateien die du selbst erstellt hast.

    Gruß
    Alexander
  • Hi Alexander,

    ich bin begeistert von deinem Blog. Du machst sehr gute Arbeit hier:-)
    Kannst du mir sagen, wie ich mein Logo nach oben verschieben kann? Das Anpassen der Größe hat super geklappt, nur leider ist mein Content nun sehr weit nach unten gerückt. Wie bekomm ich mein Logo und den Content nach oben verschoben?
  • Hallo Christian,

    vielen Dank für die netten Worte! Das freut uns wirklich sehr.

    Kannst du mir vielleicht einen Link zu deinem Shop schicken? Dann kann ich mir das genauer anschauen.

    Gruß
    Alexander
  • Hi Alexander,

    first of all: vielen Dank für den hervorragenden Blog! Ohne 8mylez wäre ich völlig aufgeschmissen!

    Wie schon bei ein paar anderen Usern ändert sich bei mir die Größe des Logos nicht, wenn ich die Werte in der header.less Datei ändere, lediglich das ganze Menü rückt weiter nach unten. Ich habe auch .unitize-width(300); eingefügt ohne Erfolg (das Logo ist breit und schmal). Irgendeine Idee, was ich noch probieren könnte?

    Tausend Dank im Voraus für die Hilfe, dass die Logo-Anpassung nicht klappt, treibt mich in den Wahnsinn ;)
  • Hallo Marie,
    schreib doch mal die gesamte Datei, um die es geht hier als Kommentar.
    Am besten auch ein Link zu Deinem Shop.

    Gruß
    Sebastian // Shopdoktor.com
  • Hallo,
    wozu soll ein Child-Theme angelegt werden?
    Lässt sich das nicht direkt im Responsive Theme ändern und kompilieren?
  • Nein das sollte man nicht machen, da das Responsive Theme so nicht updatefähig bleibt.
    Mit dem eigenen Theme werden die eigenen Änderungen stetig beibehalten ;)
  • Hallo Peter,

    theoretisch geht es. Aber wie Sebastian sagte, ist es nicht updatesicher. d.h. wenn die Shopware AG ein Update rausbringt und sich etwas an dem Theme ändert, werden deine Änderungen überschrieben.

    Daher immer nur mit einem Child-Theme arbeiten.

    Gruß
    Alexander
  • Hallo Sebastian,

    vielen Dank! Ich habe den Link in dem Blog Post ergänzt.

    Gruß
    Alexander
  • Hi,

    erst mal vielen Dank für das ganze erklären.
    Aber irgendwie klappt das bei SW5.1.2 nicht sowie gedacht.

    Das Logo bleibt oben links klein und da drunter ändert sich das platz verhältnis

    Ich häng mal ein bild zur ansicht an.

    Gruß

    Maik

    [img]http://up.picr.de/24550167rm.jpg[/img]
  • Hallo Maik,

    vielen Dank!

    Bei Logos die lang sind muss die Breite der Box auch noch angepasst werden. Probier es mal mit .unitize-width(300); für die Breite.

    Wenn du nicht weiterkommst meld dich einfach bei mir per E-Mail i@8mylez.com

    Gruß
    Alexander
  • Hi,

    danke für das Tutorial - leider funktioniert das bei mir nicht. Wir nutzen SW5 und ich habe das Custom_Theme angelegt, Logos und Farbkonfig angepasst und sowohl header als auch all less-Dateien eingebunden. Mir erschliesst sich zum einen nicht, ob die Theme die Dateien tatsächlich kompiliert und falls ja, wieso sich nichts tut - wie mans ehen kann ist das Logo unleserlich klein!

    Für Hilfe wäre ich sehr dankbar!

    Viele Grüße
    Julian
  • Hallo Julian,

    wenn ich mir deinen Shop anschaue, dann ist das Logo aber doch ziemlich groß.

    Hat es geklappt oder kann ich dir vielleicht noch helfen?

    Gruß
    Alexander
  • Ich möchte gerne auch die Breite des Logos anpassen, d.h. ich möchte ein sehr breit laufendes Logo einpassen.
    Was muss ich dafür ändern?
  • Hallo Almute,

    normalerweise passt sich die Breite automatisch der Höhe an.

    Probier mal .unitize-width(300); aus.

    Falls es nicht klappt, kannst du mir deinen Shop per Mail i@8mylez.com schicken und ich gucke drüber.

    Gruß
    Alexander
  • Gute Tutorials hier. Meine Frage: Wo kompiliert man denn bitte?
    Newsletter ist abonniert.

    Versuche seit 8 Jahren und 7 Stunden die (padding) Abstände vom .content-main--inner Bereich zu entfernen aber ich komme nicht ans Ziel.
  • Hallo Atilla,

    vielen Dank für die netten Worte.

    Themes werden beim Zuweisen kompiliert bzw. es kommt eine Abfrage zum Kompilieren.

    Manuell kann diese auch gestartet werden über: Grundeinstellungen / Cache / Themes kompilieren

    Achtung: Gilt nur für Shopware 5. Bei Shopware 4 wird das automatisch kompiliert.

    Zu dem .content-main--inner Problem:

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

    kannst du die Datei global.less anlegen und dort die Klasse mit padding: 0; reinschreiben.

    Hat bei mir prima geklappt, falls es weiterhin Probleme gibt, schreib mir eine Email i@8mylez.com und ich schaue mir das genauer an :)

    Gruß
    Alexander
  • Danke für das gute Tutorial :)
  • Hallo Tom,

    vielen Dank!

    Freut mich sehr, wenn es geholfen hat :)

    Gruß
    Alexander

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware 5.3 - Wichtige Neuerungen auf einen Blick
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Wie du jedes Icon in Shopware 5 anpassen kannst
Wie Cronjobs bei Shopware funktionieren und wie du sie richtig einstellst
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Vorsicht Shopware Update! Was du beim Updaten beachten musst
© 2017 by 8mylez. Powered by Goltfisch GmbH.