Zum Hauptinhalt springen

Ungültige Optionen nicht ausgrauen

Frage​

Wir haben Gültigkeitsregeln eingestellt, die bestimmte Kombinationen aus Merkmalswerten als ungültig markieren. Wenn ein Merkmal auf einen bestimmten Wert gesetzt wird, werden die davon betroffenen Optionen in anderen Merkmalen ausgegraut dargestellt. Kann man das abschalten?

Hintergrund​

K3 markiert Merkmalswerte, die aufgrund von Gültigkeitsregeln in der aktuellen Konfiguration nicht wählbar sind, automatisch visuell als ungültig – standardmäßig durch eine verringerte Deckkraft (Ausgrauen). Das signalisiert dem Nutzer, dass diese Kombination nicht möglich ist.

Die zugrundeliegende Logik bleibt dabei immer aktiv: Wählt ein Nutzer dennoch einen solchen Wert, passt K3 die Konfiguration entsprechend an und zeigt eine Meldung. Das lässt sich nicht abschalten – nur die visuelle Darstellung ist anpassbar.

Lösung​

Die Darstellung lässt sich per CSS-Anpassung im K3-Editor ändern, ohne die Regellogik zu beeinflussen.

Schritt-für-Schritt-Anleitung​

  1. Öffnen Sie den K3-Editor und klicken Sie auf „Konfigurator anpassen".
  2. Wählen Sie „Ändern Sie das Design".
  3. Klicken Sie auf „Design > Anpassen".
  4. Geben Sie im CSS-Eingabefeld folgendes ein:
.configurator .k3-invalid-option {
  opacity: 1;
}
  1. Speichern Sie die Änderung und prüfen Sie das Ergebnis in der Vorschau.

Erklärung der CSS-Regel​

TeilBedeutung
.configuratorBegrenzt die Regel auf den Konfigurator, damit keine anderen Bereiche der Seite beeinflusst werden
.k3-invalid-optionZielt auf alle Elemente, die K3 als ungültige Option markiert
opacity: 1Setzt die Deckkraft auf 100 % – kein Ausgrauen mehr
Reichweite der Regel

Diese CSS-Regel wirkt auf alle ungültigen Optionen im gesamten Konfigurator, nicht nur auf einzelne Merkmale. Um die Regel auf ein bestimmtes Merkmal einzuschränken, wäre ein spezifischerer CSS-Selektor notwendig.

Radioboxen noch leicht grau?

Die Radiobox-Elemente selbst können trotzdem noch etwas grau erscheinen, da sie einen eigenen Stil haben. Das ist ein dezenter Hinweis für den Nutzer und kann ebenfalls per CSS entfernt werden, falls gewünscht.

Verwandte Themen​