Logo in die Mitte bringen und Größe verändern

[Andi111]

Hallo zusammen,

kann mir jemand sagen wie ich im Standard Theme das Logo in die Mitte bringe?

Am besten wäre es wenn ich das Logo Mobil an eine andere Position wie am Desktop bringen kann.

Wie kann ich die Größe vom Logo nur in der Mobilen Ansicht ändern?

Ich habe PrestaShop Version 1.7.7.3 und nutze PHP 7.3.

Grüße

[Andi111]

Also die Größe zu verändern habe ich geschafft und auch dass das Logo mittig platziert wird funktioniert, aber nur am Desktop.

Kann mir jemand sagen wie ich es auch mobil zentrieren kann?

[Andi111]

Also ich denke ich habe es geschafft. Zwar ganz anders als überall beschrieben, aber es funktioniert.

Ich möchte hier meinen Lösungsweg beschreiben und es wäre super wenn mir jemand sagen kann ob ich das so lassen kann oder ob ich dadurch andere Sachen verstellt habe.

Ich habe viel in Google gesucht, aber diese Lösungen haben sich alle nur in der Desktop Ansicht geändert.

Dann habe ich mir die "header.tpl" Datei näher angeschaut. Da in einem anderen Beitrag beschrieben wurde dass man unter anderem class="col-md-2 hidden-sm-down" löschen soll, dahinter stand id="_desktop_logo". Dann habe ich nach "Logo" gesucht und "_mobile_logo" gefunden, genauer gesagt die Zeile " <div class="top-logo" id="_mobile_logo"></div>".

Als erstes habe ich class="top-logo" gelöscht und geschaut was passiert.

In der Saite "custom.css" habe ich diese Sachen rein geschrieben:

#_mobile_logo {text-align: center};
#_mobile_logo {display: inline-block};
#_mobile_logo {max-width: 10%; height: auto};

(Im Nachhinein hat sich heraus gestellt dass diese Sachen die ich dort rein geschrieben habe keinerlei Wirkung hatten.)

Das Logo wurde zwar mittig angezeigt, war aber auch sehr groß.

Dann dachte ich mir, was ist "class".

Kurz danach gegoogelt und heraus gefunden dass "class" die Werte für etwas festlegt.

Dann habe ich mir gedacht, achso, class="top-logo" legt die Werte für id="_mobile_logo" fest.

Dann habe ich in der Datei "theme.css" nach "top-logo" gesucht und bin fündig geworden. Hier habe ich dann etwas mit den Werten rum gespielt und den Code um "padding-left:150px" erweitert und siehe da, es funktioniert.

Jetzt denke ich mir aber, wenn die class "top-logo" mehrfach verwendet wurde, dann habe ich ja mit der Umstellung mehr als nur das Logo verändert oder?

Oder wurde diese class in PrestaShop nur für das mobile Logo verwendet, aber bei anderen "class" kann es auch sein dass sie mehrfach verwendet wurden?

Grüße

Edited April 22, 2021 by Andi111 (see edit history)

[rictools]

Bei den ersten Codes stimmt offenbar die Syntax nicht, das Semikolon müßte vor die schließende geschweifte Klammer.

Class ist einfach ein Format, kennt man so auch aus Textverarbeitungen, class ="top-logo" gilt dann wohl für alle Top-Logos egal ob Desktop oder mobile, wird dann aber wohl kaum für andere Elemente verwendet worden sein. Class kann vielfach vorkommen während eine ID normalerweise nur einmal vorkommen sollte.

Am besten ist es, die Grundlagen von CSS etc. zu lernen.

[Andi111]

Hallo rictools,

danke für deine Antwort.

Ja, nachdem ich das Semikolon verschoben habe hat es funktioniert, aber nur wenn ich den Befehl "display" nicht nutze. Sobald ich den Befehl "Display" nutze sind die Änderungen wieder weg.

Kannst du mir eventuell sagen wie ich mit CSS das Logo größer mache? Denn mit den Befehlen "width" und "height" wird nur der weiße Bereich um das Logo größer, aber nicht das Logo selbst.

Edit:

Das ist der Code den ich rein geschrieben habe:

#_mobile_logo {width: 100%; height: 100%;}

Wenn ich aber z.B. 120% eingebe wird das Bild trotzdem nicht größer. Wenn ich z.B. 50% eingebe wird es aber kleiner.

Edited April 23, 2021 by Andi111 (see edit history)

[rictools]

Am besten probiert man das mit der "Untersuchen"-Funktion des Browsers aus, ich habe jetzt auch nicht im Kopf, wie sich "display: inline-block;" jetzt genau auswirkt.

Wenn du den div-Bereich vergrößerst wird das in diesem Bereich enthaltene Bild nicht größer als 100 %, dazu mußt du (auch) das Bild selbst vergrößern (mit #_mobile_logo img {...}) oder besser ein größeres Bild hinterlegen (denn durch das Vergrößern leidet auch die Qualität).

Edited April 24, 2021 by rictools (see edit history)