Shoplogo

Shopware 5 Themes & Design
1

Hallo,

mir ist bewusst, dass diese Frage hier schon X mal gestellt wurde, ich komm aber trotz Forensuche hier nicht weiter.
Ich möchte gerne die Größe meines Shoplogos ändern, habe dazu folgenden Code in eine CSS gepackt: 

.logo-main.block-group div.logo–shop.block a.logo–link picture img {
    margin-top: -20px;
    width: 250px !important;
    height: 250px !important;
}

Diese .css hab ich dann im Thememanager eingebunden. Soweit so gut. oder auch nicht…

Die Breite des Logos wird richtig ausgegeben, aber die Höhe bleibt bei 50px .
Ich denke es liegt an dem container header–navigation Block der eben die Höhe 50px hat, wie aber kann ich die Höhe von diesem Block ändern?

Zur besseren Veranschaulichung hier ein screenshot.

1871×396 76.8 KB
Ich danke schon mal vorab für eure Hilfe!

 

2

Also erst mal musst Du genauer hinhschauen! Dort gibt es eine max-width sowie eine max-height! Die musst Du erst mal los werden. Dann gibts du der Klasse .header-main mal eine andere Höhe, meinetwegen 200px. Danach gehts an’s Logo verhgrößern und das passiert hier: Der Klasse .logo–shop.block a.logo–link picture img ne Breite verpassen, also z.B. width: 350px mitgeben. Volia:

772×240 26.6 KB

Und am besten baust Du mal das Logo als Vektorformat (SVG) ein, damit das auch nach wass ausschaut… Wink

 

3

Sorry aber das hat nix mit genauer hinsehen zu tun, das ist blanke Unwissenheit :wink:
" Dort gibt es eine max-width sowie eine max-height! Die musst Du erst mal los werden. " Ok, aber wo is das zu ändern? In der all.less meines Themes finde ich diesbezüglich nichts. Die Klasse .logo–shop.block a.logo–link picture img kann ich in besagter all.less auch nicht finden, deshalb hab ich sie mal angelegt.

Ich bin mal so frech und poste diesen teil meiner all.less.

// HEADER
.logo--shop.block a.logo--link picture img {
	width: 350px;
	height: 250px;
}
.header-main {
  max-width:@snaps--container-max-width;
	height: 200px;
  padding-left:10px;
  padding-right:10px;
  margin-left: auto;
  margin-right: auto;

  background: @snaps--header-background-color;
  .top-bar{
    .container {
      background: @snaps--header-background-color;
		
    }
  }
  .container {
    background: @snaps--header-background-color;
  }
}

.navigation-main {
  max-width:@snaps--container-max-width;
  margin-left: auto;
  margin-right: auto;

 

4

Ich finde es ja gut, das Du dich durchwurschtelst, aber schau doch mal genau hin… Wink

5

In der all.less meines Themes finde ich diesbezüglich nichts.

Das kommt ja auch aus dem Standard-LESS. Dein Theme ist ja sicher vererbt, somit auch die CSS-Einstellungen. Doku lesen, Doku lesen, Doku lesen …

6

Sorry, aber scheiss auf Deine LESS Datei… Wink

Bau Dir eine eigene CSS Datei mit in den Shop ein. Dieser LESS Qatsch ist was für Vollnerds die dachten:

So, jetzt beschäftigen wir uns auch mal mit CSS. Und weil wir richtige Programmierer sind, machen wir daraus  LESS inkl. tollen Funktionen, wie Variablen und so einen Käse. Das man dafür aber auch dann auch immer einen Kompiler braucht, ist ja egal. Und letztendlich kommt sowieso wieder CSS hinten raus. Wooooohooo, ganz toll gemacht. Thumb-down

LESS, wenn ich das schon höre, ahhhhhhhhhhhhhh! Echter NERD MUMPITZ!

Binde mal eine CSS Datei über den Thememanger oder die header.tpl ein und mach folgendes:

.header-main {
    height: 200px;/* Evtl mehr oder weniger, je nach Logo!? */
}

.logo--shop.block a.logo--link picture img {
    height: auto;
    margin-top: -28px; /* Evtl mehr oder weniger, je nach Logo!? */
    max-height: none;
    width: 270px; /* Evtl mehr oder weniger, je nach Logo!? */
}

Ungetestet, aber sollte eigentlich funzen…

Wenn du die CSS Datei richtig einbindest musst Du nichts davon mit !important überschreiben und das lästige Kompilieren kannst Dir dann auch sparen!

1 „Gefällt mir“
7

Sorry, aber scheiss auf Deine LESS Datei…

Hilfe … die Vorteile von LESS sind bekannt? 

Für alle die noch wirklich mit LESS gearbeitet haben: http://www.lesscss.de/

8

@R4M schrieb:

In der all.less meines Themes finde ich diesbezüglich nichts.

Das kommt ja auch aus dem Standard-LESS. Dein Theme ist ja sicher vererbt, somit auch die CSS-Einstellungen. Doku lesen, Doku lesen, Doku lesen …

Ich habe ein Theme als Plugin runtergeladen - Das kommt dann trotzdem noch aus dem Standard Less? Und welches ist das dann? Bare? Responsive?

9

@FischtechAT schrieb:

@R4M schrieb:

In der all.less meines Themes finde ich diesbezüglich nichts.

Das kommt ja auch aus dem Standard-LESS. Dein Theme ist ja sicher vererbt, somit auch die CSS-Einstellungen. Doku lesen, Doku lesen, Doku lesen …

Ich habe ein Theme als Plugin runtergeladen - Das kommt dann trotzdem noch aus dem Standard Less? Und welches ist das dann? Bare? Responsive?

Ich kenne das Theme nicht, aber in Regel ist so üblich, dass die von Responsive vererbt wird. Weil man dann nur die Sachen anpasst, die auch wirklich angepasst werden müssen. Als würde man das Fahrrad zweimal erfinden - macht ja meinen Sinn. Somit gibt es in jeden eigenen Theme nur die Anpassungten zum aktuellen, der Rest kommt aber aus dem Standard. Dann sieht besser mit Browser F12 (Entwicklerwerkzeuge). 

Wichtig: In Bare oder Responsive nichts anpassen! Das könnte sonst beim nächsten Update wieder weg sein. Also alle Anpassungen im eigenen Theme schreiben bzw. überschreiben.

1 „Gefällt mir“
10

Vielen Dank an Murmeltier!

 

Das Codesnippet hat wunderbar geklappt.

11

@Murmeltier schrieb:

Also erst mal musst Du genauer hinhschauen! Dort gibt es eine max-width sowie eine max-height! Die musst Du erst mal los werden. Dann gibts du der Klasse .header-main mal eine andere Höhe, meinetwegen 200px. Danach gehts an’s Logo verhgrößern und das passiert hier: Der Klasse .logo–shop.block a.logo–link picture img ne Breite verpassen, also z.B. width: 350px mitgeben. Volia:

image
image772×240 26.6 KB

Und am besten baust Du mal das Logo als Vektorformat (SVG) ein, damit das auch nach wass ausschaut… Wink

 

Also wenn du da Begabung hast Logos zu erstellen? :slight_smile: Ich tät dieses Logo auch in Schön brauchen… Natürlich wird dafür entlohnt -> call me-> +43664 4596818