CSS Anpassung für spezifische Kategorien

Hey,

ich versuche derzeit Anpassungen über less zu machen. Dabei würde ich gerne einzelne CSS Anpassungen nur für eine spezifische Kategorien treffen. Diese kann ich ja über die jeweilige KategorieID identifizieren.

Ich habe es bisher allerdings noch nicht geschafft, dies richtig umzusetzen. Ist das möglich und wenn ja wie?

Vielen Dank und beste Grüße,
Nik

Hallo,
welches Element willst Du denn genau stylen? Es gibt ein DIV mit der Klasse „listing“, da ist auch ein Attribut „data-categoryid“ drin, in dem die aktuelle Kategorie-ID steht. Alles was dadrin ist, lässt sich relativ einfach über den folgenden Selektor stylen (hier für eine Kategorie mit der ID 1):

[data-categoryid ="1"] {}

Wenn du schon vorher eingreifen willst und quasi schon den Kategorie-Container anders stylen willst, müsste man die tpl-Datei so anpassen, dass die Kategorie-ID da schon mit übergeben wird. Wenn es das ist, was Du machen willst, kann ich auch gerne einen Codeschnipsel dazu schreiben.

Hey Okeano,
vielen Dank für Deine Antwort!

Ich habe in der Global.less folgenen Code eingeführt um meine Produktbilder auf eine einheitliche Größe zu bringen:
.product–image-container img {
display: block !important;
max-width: 100% !important;
max-height: 100% !important;
width: 730px;
height: auto !important;
}

In den meisten Kategorien führt es zum gewünschten Ergebnis: https://woodq.de/tische/kernbuche/113/sine-auxilio

Allerdings habe ich auch Kategorien in meinem Shop die ich davon ausnehmen möchte: Stilvolle Bodenleuchte Ardere von Gofurnit - Woodq | Massivholzmöbel nach Maß - Online Tischler

Daher war meine Überlegung den CSS-Schnipsel nur für die Kategorien einzufügen, für die sie auch gedacht ist.

Meinst Du das ist machbar? :slight_smile:

Dank Dir & viele Grüße,
Nik

Probier es doch einfach mal aus.

.product--details[data-category-id='1'] {
  .product--image-container img { border: 2px solid #000; }
}

Die „1“ natürlich mit deiner ID ersetzen. Und bei „product–image-container“ darauf achten, dass zwischen „product“ und „image“ 2 Bindestriche sind.

Hey,

habe eben viele unterschiedliche Variationen davon ausprobiert. Leider scheint es als würde less die Kategorie nicht erkenne. Sobald ich versuche eine Kategorie mit de passenden id anzuvisieren funktioniert der ganze code-schnipsel nicht mehr :confused:

Das ist aber auch keine Kategorie-Seite, sondern eine Artikel Detailseite. Wenn Du das an der Stelle machen möchtest, dann würde ich eher ein Freitextfeld für die Artikel erstellen und basierend darauf eine Klasse dem .product--image-container img Element hinzuzufügen. Die kannst Du dann wie gewünscht stylen.

Du kannst nicht ohne weiteres die Artikel-Detailseite basierend darauf stylen, welcher Kategorie ein Artikel zugeordnet ist (jedenfalls fällt mir dazu ad hoc kein sauberer Weg ein)