Anordnung der divs / module bei definierten Breakpoints bearbeiten?

[Yabasta]

Hallo Comunity,

 

gerne hätte ich von euch gewusst, wie ich die positionen der einzelnen module / divs  wie zb. der Searchbox abhängig vom Device  bearbeite / neu anordne.

Denn es ist ja klar, dass ein Responsive Design bei einem gewissen Breakpoint, umbricht. Jedoch gefallen mir die Positionen der einzelnen elemente beim Tablet nicht.

 

Ich hoffe ich konnte mich verständlich ausdrücken.

Grüße,
Yabasta

[Scully]

Meines Wissens kann man unter -> Module -> Positionen nur festlegen, welches die generelle Reihenfolge der Module ist.

Man kann dort auch einstellen, welche Module bei welchen Gerätearten aktiv oder inaktiv sind.

Man kann aber nicht unterschiedliche Reihenfolgen für unterschiedliche Gerätearten festlegen.

 

Wenn man das wollte, müsste man für die fraglichen Module wohl zusätzliche Andockstellen (Hooks) im Programmcode des Moduls ergänzen.

Selbst dann sind aber noch gewisse Grenzen gesetzt, da wir innerhalb eines identischen Hooks die Reihenfolge für Devices nicht festlegen können.

[Yabasta]

Es geht garnicht darum welche Reihenfolge die Module aufgerufen werden, sondern eher darum, an welcher Position / Anordnung die Module bei unterschiedlicher Bildschirmgröße plaziert werden. Dafür müsste es ja ne Möglichkeit in der css geben diese individuell anzupassen. Blos ich weis net wo..

[Scully]

Deine Frage ist so allgemein gehalten, dass Hilfe schwierig ist. Musst halt man zwei Bilder hochladen.

1. Wie es jetzt ist.

2. Wie es Du gerne hättest.

Dann kann man evtl. mal weitersehen.

CSS kann vieles. Aber wenn Du die Reihenfolge der Darstellung ändern möchtest, wird es evtl. schwieriger.

HTML wird ohne anderweitige Instruktion so platziert, wie es der Server ausliefert. Das heisst:

von oben nach unten und ggf. von links nach rechts.

 

Will man das ändern, dann muss man innerhalb des CSS z.B. mit position arbeiten, das hat oft aber auch Downsides.

Edited June 29, 2017 by Scully (see edit history)

[rictools]

gerne hätte ich von euch gewusst, wie ich die positionen der einzelnen module / divs  wie zb. der Searchbox abhängig vom Device  bearbeite / neu anordne.

Denn es ist ja klar, dass ein Responsive Design bei einem gewissen Breakpoint, umbricht. Jedoch gefallen mir die Positionen der einzelnen elemente beim Tablet nicht.

Du benötigst Kenntnisse in css, um für bestimmte Bildschirmgrößen div-Tags abweichend positionieren, aus- oder einblenden zu können, teilweise müßtest du auch Änderungen in den tpl-Dateien vornehmen (z. B. eine zweite Searchbox an einer anderen Position erstellen und dann je nach Bildschirmgröße entweder die eine oder die andere ausblenden).

[Yabasta]

Html und css Kentnisse habe ich. Im Grunde möchte ich nur wissen wo man diese Anordnung und Regeln ändern kann. Ich hab euch mal ein professioneles Beispielbild hochgeladen

Ich hoffe damit lässt sich es erklären

 

[Scully]

Sorry, ich verstehe die Symbole nicht. Null Prozent. Vielleicht mal konkreter formulieren, WAS von WO nach WOHIN soll.

 

Um trotzdem einen Anhaltspunkt zu geben:

Fast alle Module von Prestashop bringen ihre eigenen CSS-Files mit. Auch ein Grossteil der Grundfunktionen von Presta wird mit Modulen abgewickelt.

Also Suchfunktion, Produkte auf der Startseite, Login Bereich, Warenkorb etc etc.

 

Vorab:

In der Anpassungphase unter Leistung Smart Cache für CSS ausschalten.

Wenn man das nicht macht, läuft PS mit einem konsolidierten CSS. Da ist es dann schwierig, die urspüngliche Quelle im Originalfile zu finden.

 

In der Entwickleransicht im Browser einmal einen Reload machen und dann sieht man im Dev-Tool, welche CSS Files so alle angezogen werden.

Die CSS haben eigentlich immer den Modulnamen im Dateinamen mit drinne. Das wären dann Deine Kandidaten.

 

Sodann gibt es noch global.css im Theme Folder, wo die grundlegenden, nicht modulspezifischen Style-Eigenschaften abgelegt sind. Aktuell ist diese Datei rund 10'000 Zeilen lang. Ich glaube aber nach wie vor nicht, dass es mit CSS allein machbar ist. Aber schau Dir doch mal die eine oder andere Datei an, dann sieht so recht schnell, wie diese aufgebaut sind.

Edited June 29, 2017 by Scully (see edit history)

[rictools]

Ich hab euch mal ein professioneles Beispielbild hochgeladen

Wenn ich das richtig sehe, entspricht die von dir gewünschte Tabletansicht der Desktopansicht, während sie jetzt verändert wird. Es ist nicht klar, welche Elemente du da jetzt genau eingezeichnet hast, aber die Aufteilung entspricht wohl nicht dem Standard-Template.

 

Du mußt jetzt anhand der "Untersuchen"-Funktion des Browsers / Developer-Tools / Firebug feststellen, welche Änderung in welcher css-Datei ab einer bestimmten Größe des Browserfensters passiert, indem du das Fenster so lange kleiner schiebst, bis sich die Anzeige verschiebt. Im Grunde mußt du wohl nur in dem Bereich der Tablet-Größe die css-Anweisungen denen der größeren Bildschirme angleichen.

[Scully]

Oder man schaltet für Tablets die Mobile Ansicht ab und bekommt dann auch dort genau Desktop angezeigt.