Hallo zusammen, gibt es irgendwo Informationen wie groß maximal das Shoplogo sein darf. Wenn ich meine Logo hochlade kommt es mir etwas verloren vor, kommt nicht mehr so zu Geltung. Kann man die Größe wo ändern?
Hallo, ja du kannst die Größe über ein eigenes CSS definieren. So habe ich’s geändert. .header-main .logo-main .logo--shop{ height: 5.125rem; } Und hiermit kannst du z. B. nur die Smartphones ansprechen: @media only screen and (max-width: 480px) { .header-main .logo-main .logo--shop{ height: 5.125rem; } }
Ich hab das gleiche Problem. Mag sein, dass man die Größe über eigenes CSS definieren kann. Jedoch scheint hier ein Fehler bei der Logo-Einstellung im Backend zu sein. Denn das Logo des Demo-Shops wird auch normal angezeigt. Ich denke also, dass es ein bug ist.
Bei mir das selbe. Habe schon mehrere Größen versucht, aber das Logo wird immer nur ganz klein dargestellt.
Habt Ihr denn auch den Theme-Cache und Template-Cache geleert? Einstellungen - Performance - Cache und den Browser-Cache geleert ?
Na sicher! Das ist schon aus SW 4 fest im Ablauf verankert. 
Das ist kein Bug, dass ist Responsive Es kommt darauf an, wie hoch und wie breit euer Logo ist. Ist das Logo als hoch und schmal, wird es bspw. auf die max Höhe runter skaliert. Ihr müsst hier natürlich auch dann entsprechend den Container für die max. Höhe anpassen. Aufgrund der Responsive Fähigkeit kann man nicht einfach nur das Logo auswechseln und annehmen, dass es perfekt passt. Wenn Ihr einen Link zu eurem Shop habt kann ich mir das gern einmal ansehen. Ich habe hier einmal beschrieben, wie man die Größe anpasst.
[quote=“kayyy”]Das ist kein Bug, dass ist Responsive Es kommt darauf an, wie hoch und wie breit euer Logo ist. Ist das Logo als hoch und schmal, wird es bspw. auf die max Höhe runter skaliert. Ihr müsst hier natürlich auch dann entsprechend den Container für die max. Höhe anpassen. Aufgrund der Responsive Fähigkeit kann man nicht einfach nur das Logo auswechseln und annehmen, dass es perfekt passt. Wenn Ihr einen Link zu eurem Shop habt kann ich mir das gern einmal ansehen.[/quote] Ja stimmt schon irgendwie. Allerdings geht das beim Conexco z.B. ja auch bzw. ist es dort auch anders. Gibt bei beiden Templates für die verschiedenen Endgeräte entsprechende Upload-Felder. Beim Conexco z.B. hab ich dann in der Desktopansicht auch nen großes Logo und auf´m Smartphone nen kleines. Beim Shopware Template ist irgendwie alles klein, egal was ich da hochlade. Habe es allerdings noch nicht mit der selben Größe wie das Demologo probiert. Werde ich mal machen, wenn etwas Zeit ist.
[quote=“trixx”][quote=“kayyy”]Das ist kein Bug, dass ist Responsive Es kommt darauf an, wie hoch und wie breit euer Logo ist. Ist das Logo als hoch und schmal, wird es bspw. auf die max Höhe runter skaliert. Ihr müsst hier natürlich auch dann entsprechend den Container für die max. Höhe anpassen. Aufgrund der Responsive Fähigkeit kann man nicht einfach nur das Logo auswechseln und annehmen, dass es perfekt passt. Wenn Ihr einen Link zu eurem Shop habt kann ich mir das gern einmal ansehen.[/quote] Ja stimmt schon irgendwie. Allerdings geht das beim Conexco z.B. ja auch bzw. ist es dort auch anders. Gibt bei beiden Templates für die verschiedenen Endgeräte entsprechende Upload-Felder. Beim Conexco z.B. hab ich dann in der Desktopansicht auch nen großes Logo und auf´m Smartphone nen kleines. Beim Shopware Template ist irgendwie alles klein, egal was ich da hochlade. Habe es allerdings noch nicht mit der selben Größe wie das Demologo probiert. Werde ich mal machen, wenn etwas Zeit ist.[/quote] Das Conexo Template kannst du nicht direkt vergleichen, da es ein wenig anders aufgebaut ist. Das Conexo ist ja nichts anderes als ein Template auf Bootstrap Basis. Bootstrap verwendet jedoch feste px Größen in den entsprechenden Viewports. Das neue Responsive Template allerdings nutzt hier nur % und rem Anweisungen. Man kann also dem Template “nicht mal eben” die feste px Breite 200 geben. Daher muss man hier ein wenig an der CSS anpassen, sodass hier auch das Bild entsprechend der % Anweisungen korrekt dargestellt wird. Wenn du einen Link zur Seite hast, kann ich dir evtl. helfen.
Also soweit ich das gesehen habe werden drei grüßen an Logos gebraucht. Ich möchte eigentlich nur das Desktop Logo etwas größer gestalten. Geht das überhaubt per CSS? Demoshop
[quote=„hifibau“]Also soweit ich das gesehen habe werden drei grüßen an Logos gebraucht. Ich möchte eigentlich nur das Desktop Logo etwas größer gestalten. Geht das überhaubt per CSS? Demoshop[/quote] Wenn du jetzt die Höhe des Containers ( .logo–shop ) anpasst und die Höhe des Logos ( .logo–link ), sieht es bspw. so aus: Immer ausgehend von der Maximal Größe des Logos ( width / height : 100% ) Ich habe hier einmal beschrieben, wie man die Größe anpasst.
2 „Gefällt mir“
Der erste Wert ist praktisch die Anzahl in px. Die unitize LESS Class rechnet es dann automatisch in die entsprechenden rem Werte um. Habe den Artikel auch noch einmal aktualisiert, damit das verständlicher ist.
@trixx, du darfst nur den ersten Wert als px angeben, der zweite Wert ist die Umrechnungszahl 16 in rem (Bedeutet: 200 / 16 = 12.5). Das Ergebnis wird aber automatisch ausgerechnet, du musst also nur die Höhe 200 eingeben. Sieht dann so aus: (200, 16).
[quote=„Shopware-Nutzer“]@trixx, du darfst nur den ersten Wert als px angeben, der zweite Wert ist die Umrechnungszahl 16 in rem (Bedeutet: 200 / 16 = 12.5). Das Ergebnis wird aber automatisch ausgerechnet, du musst also nur die Höhe 200 eingeben. Sieht dann so aus: (200, 16).[/quote] Moin Shopware Nutzer, danke, das war es! 
Wusste nicht dass es automatisch ausgerechnet wird, hatte das immer selbst gemacht und das Umrechnungsergebnis eingetragen. Nun funktionierts aber! :thumbup:
Edit: Mit dem Code von kayyy funktioniert das ganze nur teilweise. Denn dort wird die größe auf dem Smartphone nicht seperat angesprochen, heißt auf dem Smartphone ist dann die selbe Größe wie auf dem Desktop, was natürlich nicht passt. Ich habe daher den Code etwas verändert, nun kann man auch für das Smartphone ne eigene Größe festlegen: // Logo Desktop .header-main { .logo-main { .logo--link { .unitize-height(114, 16); // Anpassen der Höhe, Angabe in px } .logo--shop { .unitize-height(114, 16); // Anpassen der Höhe, Angabe in px } } } // Logo Smartphone @media only screen and (max-width: 480px) { .header-main { .logo-main { .logo--link { .unitize-height(40, 16); // Anpassen der Höhe, Angabe in px } .logo--shop { .unitize-height(40, 16); // Anpassen der Höhe, Angabe in px } } } }
[quote=„kayyy“][quote=„hifibau“]Also soweit ich das gesehen habe werden drei grüßen an Logos gebraucht. Ich möchte eigentlich nur das Desktop Logo etwas größer gestalten. Geht das überhaubt per CSS? Demoshop[/quote] Wenn du jetzt die Höhe des Containers ( .logo–shop ) anpasst und die Höhe des Logos ( .logo–link ), sieht es bspw. so aus: Immer ausgehend von der Maximal Größe des Logos ( width / height : 100% ) Ich habe hier einmal beschrieben, wie man die Größe anpasst.[/quote] Ja dann sage ich an dieser Stelle mal vielen Dank. Habe es nun hinbekommen, dank deiner Anleitung :thumbup:
Hi, nun muss ich mich wohl auch etwas mehr in LESS einarbeiten… aber vorab vlt von euch schon: was muss ich nun machen um der css Variable per LESS den margin oder padding Wert zu verändern? “.header-main .logo-main” würde ich gern das padding bearbeiten. Ich habe mich mal an die Indianeranleitung gehalten und die less Datei sieht nun erstmmal so aus: /\* LESS Document \*/ .header-main { // Logo .logo-main { margin-top: -20px; } .logo--link { .unitize-height(73, 16); // Anpassen der Höhe, Angabe in px } // Smaller logo for mobile viewports .logo--shop { .unitize-height(45, 16); // Anpassen der Höhe, Angabe in px } } }
Nur kurz zur Ergänzung: die 16 kann man sich auch sparen. .unitize-height(45) reicht. Die 16 wird automatisch gesetzt und solange man nicht ganz bewusst einen anderen Wert nutzen möchte sollte man das auch so nutzen.
[quote=“impuls”] “.header-main .logo-main” würde ich gern das padding bearbeiten. [/quote] Um das Padding zu bearbeiten packe in den .logo-main Block noch folgendes hinzu: .unitize-padding(10, 10); Der erste Wert ist top/bottom der zweite left/right.
1 „Gefällt mir“