Templatebasis - CSS

Hi, da man ja das vorhandene Template nur erweitern soll, oder die Bereiche ändern soll die anders aussehen finde ich das man es einem echt schwer macht. Ich wollte jetzt gerade mal 3 Elemente einer Tabelle anders aussehen lassen und musste schon hart mit !important arbeiten, das kann es eigentlich nicht sein. Ich fänds cool wenn es ein Update geben könnte oder ein anderes optionales _default Template das vielleicht optimal strukturiert ist, was CSS angeht. Denn vieles ist echt nicht Framework tauglich. Gruß der Snooops

Hi, kannst du das etwas konkretisieren? Also habe das Problem noch nicht genau verstanden - wie bist du vorgegangen und was genau ging nicht bzw. nur sehr kompliziert?

Als großes Problem würde ich es nicht bezeichnen, eher unnötig umständlich. Im Default Template werden so dermaßen übertrieben CSS Eigenschaften Vererbt das ich in einem erweitertem Template teilweise kaum noch eine Chance habe meinen Style durchzuboxen, da hilft oft nur ein !important. So etwas kommt davon wenn man zu sehr verallgemeinert bei CSS, es ist zwar schön das so etwas möglich ist, allerdings muss man den nutzen betrachten, vor allem bei einem solchen Projekt. Immerhin sollen die Leute die Shopware nutzen ja munter eigene Templates entwerfen können und das macht so einfach keinen Spaß. Als konkretes Beispiel der Link zur Detailansicht eines Artikels im Artikelbild, da steht halt mal voll fett als Element-style diverse Eigenschaften die ich nur noch mit !important verändern kann. Ja man könnte dies jetzt auch im Template an sich ändern, aber es geht grade um das CSS :wink: Wobei ich auch nicht verstehe wieso ein Artikelbild als Hintergrundbild eingerichtet ist. Ein normales img Tag mit dem Artikel namen als „alt“ Attribut wäre besser, auch für Google, um der Suchmaschine ein Bild zum Artikel als Ergebnis liefern zu können (das ist aber ein anderes Thema). Ein weiteres Beispiel sind Tabellen, da ist mal Standardmäßig für alle Tabellen ein border für tr und tbody, ebenfalls völlig überflüssig und nur wieder mit einem !important zu ändern. Gruß der Snooops

[quote=“Snooops”]Als großes Problem würde ich es nicht bezeichnen, eher unnötig umständlich. Im Default Template werden so dermaßen übertrieben CSS Eigenschaften Vererbt das ich in einem erweitertem Template teilweise kaum noch eine Chance habe meinen Style durchzuboxen, da hilft oft nur ein !important. So etwas kommt davon wenn man zu sehr verallgemeinert bei CSS, es ist zwar schön das so etwas möglich ist, allerdings muss man den nutzen betrachten, vor allem bei einem solchen Projekt. Immerhin sollen die Leute die Shopware nutzen ja munter eigene Templates entwerfen können und das macht so einfach keinen Spaß. Als konkretes Beispiel der Link zur Detailansicht eines Artikels im Artikelbild, da steht halt mal voll fett als Element-style diverse Eigenschaften die ich nur noch mit !important verändern kann. Ja man könnte dies jetzt auch im Template an sich ändern, aber es geht grade um das CSS :wink: Wobei ich auch nicht verstehe wieso ein Artikelbild als Hintergrundbild eingerichtet ist. Ein normales img Tag mit dem Artikel namen als “alt” Attribut wäre besser, auch für Google, um der Suchmaschine ein Bild zum Artikel als Ergebnis liefern zu können (das ist aber ein anderes Thema). Ein weiteres Beispiel sind Tabellen, da ist mal Standardmäßig für alle Tabellen ein border für tr und tbody, ebenfalls völlig überflüssig und nur wieder mit einem !important zu ändern. Gruß der Snooops[/quote] Ja, das ist mir auch aufgefallen, dass (meist per jQuery) in die Elemente direkt Styles gesetzt werden (color, border, underline, width, margin, usw…) Die haben da so hardcoded [color=#FF0000]nichts [/color]zu suchen, da die nur für dieses Design und dieses Layout zutreffen. Man sollte unbedingt dieses “harten” Element-Styles durch CSS-Klassen-Zuordnungen ersetzen, weil man sonst die o.g. Probleme hat.

Ich finde es schon schlimm genug das ich ja eigentlich ein fertiges Design ändern muss. Normalerweise habe ich einfach nur ein naktes HTML Grid vor mir und klatsch die CSS drüber, aber mit diesem Weg habe ich ja mehraufwand, weil ich erstmal die alte CSS zunichte machen muss mit !important und danach meine CSS eintragen kann ebenfalls mit !important

[quote=“Snooops”]Ich finde es schon schlimm genug das ich ja eigentlich ein fertiges Design ändern muss. Normalerweise habe ich einfach nur ein naktes HTML Grid vor mir und klatsch die CSS drüber, aber mit diesem Weg habe ich ja mehraufwand, weil ich erstmal die alte CSS zunichte machen muss mit !important und danach meine CSS eintragen kann ebenfalls mit !important[/quote] So einen umfangreichen Shop nur auf Basis eines Grids zu stylen hört sich für mich ziemlich schrecklich an… Denn dann musst Du Dir ja mühsam die ganzen Klassen und IDs der CSS-Selektoren selbst zusammen suchen. Da ist es m.E. schon sehr hilfreich und gut, dass Shopware da eine Muster CSS mitliefert. Leider wird das durch diese harten Element-Styles teilweise konterkariert (kommt ja nicht so oft vor), aber das lässt sich ja leicht ändern, indem man das auf CSS-Klassen verlagert. Und bei der Gelegenheit bitte auch unbedingt diese ganze “autocomplete=off”-Dinger entfernen, die auch per Javascript in die Elemente reingezaubert werden… Das ist so was von lästig, da immer wieder dasselbe Zeug eintippen zu müssen. Ich für meinen Teil habe erst mal dieses ganze Grid-CSS entsorgt, da das m.E. viel zu limitierend für das Layout ist… So hat halt jeder seine Vorlieben und Bedürfnisse.