Produktdetailseite anpassen

[bteppan]

Hallo liebe Forummitglieder!
Nachdem ich mich erst seit kurzem mit dem Isotope-Shop beschäftige und soweit alles eingerichtet/konfiguriert habe, möchte ich da und dort noch ein paar Layoutänderungen vornehmen.
Da ich nun schon einige Zeit suche und unzählige Beiträge durchwühlt habe, aber noch keine Lösung für mein Anliegen gefunden habe, bitte ich um Eure Unterstützung.
Da der Shop nur lokal auf meinem Rechner installiert ist (xampp) muss ich mein Vorhaben schriftlich formulieren.
zB: In der 'Produkt-Detailansicht' die

• Detailbeschreibung
• Preis
• Anzahl und
• "In den Warenkorb" Button

rechts vom Produktbild darstellen.

Ich vermute, dass hier nur eine CSS-Eingabe erforderlich ist? Aber welche?
Kann mir jemand einen Hinweis geben?

Vorweg schon Danke und schöne Grüße
Bernhard

[svenskalec]

Welches Template benutzt du bei der Details Seite?


Gesendet von iPhone mit Tapatalk

[soweit_ok]

Ja, CSS. Alle angezeigten Elemente haben Klassen - kannst Du gut sehen, wenn Du die Detailseite mit einem Entwicklertool wie z. B. "Firebug" aufrufst.

[bteppan]

Im Modul 'Produktleser/Produktdetails' habe ich derzeit keine Templates eingebunden, aber auch wenn ich bei 'Produktleser-Template' das 'iso_reader_deault' versuche, ändert sich nichts im Frontend.
Bezgl der CSS-Klassen habe ich den 'Firefox-Elementuntersucher (Q)' (=Firebug) in Verwendung und hab damit auch schon andere Lösungen finden können.
Allerdings bei meinem jetzigen 'Problemchen' stehe ich irgendwo auf der Leitung ...

[bteppan]

Oje ... hat niemand einen Tipp für mich? Hab ich es schlecht beschrieben?
Ich habe zwischenzeitlich (mit Hilfe von Firebug) einiges probiert leider ohne Erfolg.
Ich versuche es einfach nochmal zu formulieren:

1. Produkübersicht=Produkliste:
   Diese soll die Produkte nebeneinander (Spaltenweise) anzeigen.
   mit der CSS-Anweisung:
   .product {float: left; width: auto; min-width: 295px;}
   konnte ich das realisieren .. aber .. damit wird dann die Produktdetailseite unbrauchbar.
2. Produktbeschreibung=Produktdetails:
   Diese soll die Produktbeschreibung (Zweispaltig) anzeigen.
   In Spalte 1 das Produkt-/Galleriebild und in Spalte 2 die restlichen Informationen (Beschreibung, Preis, Anzahl, Button [In den Warenkorb]).

Ich bin leider kein gelernter HTMLer, CSSler, PHPler ... sondern habe mir vieles mit Peter Müllers 'Das große little boxes Buch' und 'Websites erstellen mit Contao 3' beigebracht.
Vieles auch mit Studium dieses Forums und in etlichen Stunden ausprobieren und testen.
Nur bei meinem obigen Problem finde ich einfach nicht die richtige Klasse/ID um das Layout entsprechend zu gestalten.

Bitte helft mir!!!

[svenskalec]

Setze mal vor das .product noch eine .product_list Bzw schau mal nach welche Css klasse das übergeordnete div hat. List und Detailansichten haben jeweils noch ein div davor wo du es begrenzen kannst.

Für die detailseite must du evtl das Template anpassen.

Gesendet von iPhone mit Tapatalk

[bteppan]

He Super !!! Das war's
Vielen Dank - jetzt sieht Punkt 1 genauso aus wie ich es haben wollte. Perfekt.
He Ihr seid einfach spitze hier in diesem Forum!!!

Den 2. Punkt werde ich heute in Angriff nehmen - mal schaun ob ich da weiter komme.

Danke und schöne Grüße
Bernhard

[soweit_ok]

Setze mal vor das .product noch eine .product_list Bzw schau mal nach welche Css klasse das übergeordnete div hat. ...

Hi Bernhard,

dazu noch als allg. Tipp: Da Du Firebug verwendest - wenn Du nach Selektion des betreffenden Elements in der li. Spalte dann in der re. Spalte im Kontextmenü "Neue Regel" wählst, berücksichtigt Firebug bei der Bildung des Selektors normalerweise auch das Eltern-Element sowie ggf. weitere Klassen des zu formatierenden Elements. Letztere dadurch erkennbar, das zwischen diesen Klassen kein Leerzeichen steht. Auch mögliche Verknüpfungsoperatoren anstelle expliziter Klassen werden meist richtig erkannt, zumindest die einfachen, wie z. B. ".meineKlasse > a".

Dieses Muster hilft auch schonmal auf einfache Weise zur Abgrenzung von übergeordneten Regeln für diesen Element-Typ. Oft zuviel des Guten, aber nachdem die neue Formatierung damit erfolgreich getestet wurde, kann man ja vor der Übernahme ins CSS unnötige Klassen/IDs aus dem Selektor entfernen.

Bei komplexeren CSS-Anpassungen mache ich es ganz gern so, alle betroffenen Elemente mit Hilfe von Firebug umzuformatieren, bis ich zufrieden bin. Dann rufe ich diese Frontendseite in der Ursprungsfassung in einem anderen Browsertab auf. Anhand der geänderten Fassung im ersten Tab kann man nun sukzessive alles ins CSS übernehmen und im neuen Tab mit Reload testen, ob man noch etwas übersah und/oder herausfinden, warum sonst etwas nicht so dargestellt wird, wie mittels Firebug. Nur bei manchen Pseudoklassen wie :hover :active :focus bietet Firebug keine Unterstützung. Dafür gibts aber andere ähnliche Tools, auch für den Firefox. Eine gute Hilfe bei Mediaqueries ist daneben ein Plugin, dass optional die aktuelle Fenster- u. Viewportgröße in der Browsertitelleiste bei Resize anzeigt. Sorry, dass ich nicht hinzufüge, welche Plugins das sind - bin grad zum Nachgucken zu faul. ;-) Die findest Du aber auch so, wenn Du nach Entwicklertools suchst.