Tabellendesign SW5

Hallo Forum Community, wenn man im SW5 in der Artikelbeschreibung oder in den Einkaufswelten / HTML-Element eine Tabelle erstellt, dann bekommt jede zweite Tabellenzeile einen grauen Hintergrund. Die Tabellen im gesamtem Shop sehen alle gleich aus wie die Eigenschaftstabelle. FRAGE Wie kann man eine eigene Tabelle unabhänig von dem vorhandenen SW5 Design erstellen?

Indem man der Tabelle eine neue CSS Class zuweist, oder den vorhandenen Style in den entsprechenden Less Dateien anpasst.

1 „Gefällt mir“

Danke für deine Hilfe kayyy, aber dass bringt mich nicht wirklich weiter. Gibt es irgendwo eine Einleitung wie man eine Css Class erstellt und wie man es an die Tabelle zuweist? Die Programmierer von SW5 haben es nicht gerade leicht für einfache User wie micht gemacht. Meine Begeisterung für SW5 lässt langsam nach. :frowning:

Hallo vogtton, ich selber habe auch lange an dieser Frage getüftelt und habe mir dann folgende Lösung erarbeitet: 1)Dem betreffenden Benutzer Erweiterter Editor Rechte geben. Nun hast du erweiterte Tabellen-Optionen im Editor. 2)Die ersten 3 Buttons sind wichtig. a)mit dem ersten Button legst du die Tabelle an. Dabei öffnet sich ein Fenster wo du auch eine CSS Klasse vergeben kannst wenn du beim Dropdown auf Wert gehst. b)gleich verhält es sich für die beiden nächsten Button Zeile und Zelle. Mit dem Unterschied, dass du in diesem Fenster noch definieren kannst für welche Zeile/Zelle dies gelten soll.

1 „Gefällt mir“

Hallo Mario Fehr, vielen Dank für diese ausführliche Beschreibung. Jetzt muss ich noch rausbekommen wie man eine zusätzliche CSS Class erstellt.

[quote=“vogtton”]Hallo Mario Fehr, vielen Dank für diese ausführliche Beschreibung. Jetzt muss ich noch rausbekommen wie man eine zusätzliche CSS Class erstellt.[/quote] lass dir einfach das ganze in HTML anzeigen und schreibe die Class doch nach deinen Wünschen um.

1 „Gefällt mir“

[quote=„vogtton“]Hallo Mario Fehr, vielen Dank für diese ausführliche Beschreibung. Jetzt muss ich noch rausbekommen wie man eine zusätzliche CSS Class erstellt.[/quote] Also wenn ich das richtige verstehe brauchst einen CSS Crashkurs und einen in Shopware Designe? Oder hilft die Antwort von @useg schon weiter?

[quote=“Mario Fehr”] Also wenn ich das richtige verstehe brauchst einen CSS Crashkurs und einen in Shopware Designe? Oder hilft die Antwort von @useg schon weiter?[/quote] da hast du recht, ein CSS Crashkurs wäre hilfreich. Seit 2007 bin ich mit einem OS Commerce-Shop unterwegs und kann dort vieles selber machen. Im SW5 bin ich noch unsicher und blicke durch die ganzen Ordnerstrukturen noch nicht durch. Bis jetzt habe ich Dank der Forumcommunity, sowie zahlreichen Forumeinträgen ein eigenes Theme erstellt und paar Designänderungen ( Updatesicher ) erfolgreich vorgenommen. Beim Tabellendesign bin ich jedoch steckengeblieben. Die vorhandenen les Dataien und die CSS Class möchte ich nicht ändern, sondern eine neue CSS Class in ein eigenes Theme einbringen, die ich anschließend den Tabellen zuweisen kann. Im Forum und im Shopware WIKI habe ich solche Themes nicht gefunden. Wie legt man im SW5 eine eigene zusätzliche Css class an ?

Ich hänge mich mal hier ran wenn ich darf … ich habe in der all.less eine neue Klasse für meine Tabelle angelegt: table.size-table { border-spacing: 0; border: 1px solid white; width: 100%; margin: 20px auto; background: whitesmoke; } .size-table tr td { text-align: center; } .size-table th { text-align: center; font-weight: bold; color: #433487; background-color: gainsboro; } .size-table th:first-child, td:first-child {padding: 0 15px 0 20px;} .size-table thead tr:last-child th {border-bottom: 2px solid lime;} .size-table tbody tr:hover { background-color: #24a73f; color: white; } .size-table tbody tr:last-child td {border: none;} .size-table tbody td {border-bottom: 1px solid white;} .size-table td:last-child { padding-right: 10px; } und in der Artikel Beschreibung füge ich die dann per HTML Modus ein: [code]

| …
| |

[/code] Einige Anpassungen werden übernommen, andere scheinbar durch das Standard-Stylesheet überschrieben. (zB alternierende Zeilenfarben, Header Zeile, etc) Wo muß ich mein css hinpacken, damit es auch berücksichtigt wird?

Ich empfehle dir einfach mal die Google Dev Tools zu verwenden mit dem entsprechenden Shopware Source Mapping für die .less Dateien: https://developers.shopware.com/designers-guide/less/

Ich gehe also recht in der Annahme, daß ich nicht die all.less verwenden darf? (Wobei ich das nicht ganz kapiere, da ich dachte, daß das ans Ende geklebt wird - also erst die vererbten aus Bare und Responsive, dann die inlcudes, dann all.less - also sollte es doch unten stehen) Leider hat der Haken mit der CSS Source Map bei mir keine Wirkung. Ich hatte das tolle Video gesehen mit der Anleitung, aber es funktioniert leider nicht. Hab mir extra diesen tollen “Clear Cache” Button installiert, neu compiliert, und was man all so machen kann, den Haken bei der Map gesetzt, hin und her geswitcht und noch mal versucht - nüscht. Weder mit Chrome noch Firefox. Der Firebug gibt mir nur krypische Dateinamen.