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

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

Alexander Wolf 27. August 2015 75

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

75 Kommentare

  • Wenn jemand Probleme mit seinem Logo hat, ist das hier genau das Richtige. Nicht nur die Formatierung wird erklärt, sondern man bekommt verdeutlicht wie man Werte o.Ä einträgt. Ein gutes Logo ist repräsentativ für eine Firma und sollte gut überlegt gewählt sein!
  • Hi, vielen Dank das hat wunderbar funktioniert. Einziges Problem: Nachdem ich das Logo vergrößert habe, hätte ich nun gerne die Suchleiste und Warenkorb-Button und so auf der mittigen Höhe des Logos. Das bekomme ich über align irgendwie nicht hin. Was muss ich denn hier wo genau machen?

    Ich glaube es ist der Schnipsel navigation--list block-group
  • Shopware ist ja so eine Sache und definitiv nicht mein Favorit. Es gibt so viele "kleine Baustellen". Diese Anleitung hat definitiv geholfen, zumindest eine zu beheben. Danke!
  • Hallo Alexander, ich habe nach der Anleitung die .less Dateien erstellt. Es funktioniert auf Tablet und Mobile nicht so richtig. Denn die annderen Symbole (Warenkorb, Suche, etc.) sind verschoben: https://www.tiernahrungdirekt.de/
    Was muss ich und wo noch anpassen?
    Danke.
    Viele Grüße, Ildiko
  • Vielen Dank für die Anleitung. Shopware ist sonst gar nicht meine Baustelle, aber ich finde langsam Gefallen daran. Beste Grüße aus München
  • Hey Andi,

    freut mich :)

    Gruß
    Alexander
  • Hi, super Tutorial.

    Es hat alles direkt auf Anhieb geklappt.
    Wenn ich das Logo jetzt vergrößere dann sieht mir das alles ein wenig zerstreut aus.
    Daher meine Frage... wie ist der Lösungsansatz wenn ich das Logo nach rechts verbreitern und nach oben vergrößern will ohne das Suchfeld und die Shopnavigation zu verschieben?

    Vorab vielen Dank für die Hilfe.

    Mit freundlichen Grüßen
  • Hey Christian,

    dazu kannst du die Ausrichtung mit z.B. text-align: right; nach rechts verschieben.

    Gruß
    Alexander
  • Tolles Tutorial
    Ich hätte da noch eine Frage:

    Ich würde gerne den margin: 0 auto nur bei der Smartphone Ansicht haben wollen und nicht bei der Desktopansicht wäre das irgendwie möglich?
  • Hey Jaden,

    vielen Dank!

    Das ist möglich :) Du musst den Code für margin: 0 auto; in den höheren Viewports in den Media Queries dann nur überschreiben.

    Gruß
    Alexander
  • Wie bekomme ich, in einer Ableitung des normalen Themes eine weitere Grafik rechts zwischen Logo und Sucheingabeleiste? Kannst du mir helfen? Danke dir!
  • Alexander,
    vorab danke für die vielen Tutorials rund um Shopware.
    Kannst du mir vielleicht kurz erklären, wie ich die Logo-Größe in der footer.tpl ändern kann? Speziell wie ich erkenne ob es sich um ein Smartphone bzw. Desktop handelt?
  • Hey Andre,

    sehr gerne!

    Um die Logo Größe im Footer anzupassen musst du die passenden Klassen raussuchen. Wenn du das Logo als Bild eingefügt und nicht wie Shopware als Icon eingefügt hast, musst du die height (Höhe) erhöhen.

    Die Anpassungen gelten im Standard für das Smartphone. Wenn du diese für den Desktop anders haben willst, musst du mit den Media Queries arbeiten und diese Höhe dann überschreiben: @media screen and (min-width: @tabletViewportWidth)

    Gruß
    Alexander
  • Super Sache! bin auch schon fleißig am Turtorial schauen. Hier beim Logo Größe ändern habe ich allerdings folgenden Fehler und weiß nicht wieso:

    ParseError: Unexpected input in modules.less on line 1, column 0
    1| @import „header“;

  • Hey Mario,

    bei header muessen beide Anfuehrungsstriche oben sein.

    @import "header";

    Moeglicherweise ist das beim Kopieren verschoben worden.

    Gruß
    Alexander
  • Hallo, vielen Dank für das Tutorial.
    Das erste Mal, wo alles perfekt erklärt und funktioniert hat ich bin begeistert.
  • Hey Markus,

    vielen Dank!

    Gruß
    Alexander
  • 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
  • Ich habe dasselbe Problem auf dem Handy. Gibt es da einen Lösungsansatz ?

    Viele Grüße
  • Hey Florian,

    hast du ein Beispiel wo es aktuell nicht glatt läuft? Dann könnte ich mir das genauer anschauen.

    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.

    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
  • Bei Shopdoktor gibt es jetzt auch einen Logo Generator: www.shopdoktor.com/logo-creator/
  • 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?

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Social Media Icon mit Link im Footer
Shopware Theme: Eigenes Listing Layout erstellen
Logo Größe mit Less für Shopware 5 anpassen
Die größten Fehler bei der Entwicklung eines Shopware 5 Themes

Sicher Dir die besten Shopware 6
Tipps & Tricks

Trag Dich ein und Du erhältst unser Shopware 6 Whitepaper kostenlos!
Trag dich für unseren Newsletter an, im Anschluss erhältst Du das Whitepaper. 

Mit dem Abschicken Deiner Daten akzeptierst Du unsere Datenschutzerklärung.

Entdecke unsere ebooks

Unsere Standorte

Zentrale 

Technologiepark 23
33100 Paderborn


Leipzig
Bernhardstraße 34
04315 Leipzig

Kontakt

Über 8mylez

✓ 38 Mitarbeiter

✓ Shopware Gold Partner

✓ 40.000+ Plugin Downloads

✓ 160+ betreute Shops

✓ Full-Service Shopware Agentur

✓ 70 Shopware Videos auf Youtube

✓ Alle Shopware Zertifizierungen

Social


Unsere Partner
© 2024 by 8mylez GmbH //  Impressum + Datenschutz