gelöst Filterauswahl Farben als kleines Bild anzeigen

Hallo,

wie kann man über Filterauswahl Farben als Bild anzeigen lassen?








VG R.

 

Ich hoffe, es wurde verstanden was ich damit meine?

 

Ich frage nochmal nach, wie stellt man in der Filterauswahl Farben ein, so dass das mit kleinen Icons nebeneinander angezeigt werden können?



so wie oben, aber nicht so...

 

Ich frage nochmal, ist das möglich in der Filterauswahl für Farben statt Rot, Gelb, Grün etc. ein Farbe, sichtbar als Farbe (.jpg,...) einzutragen und das wie oben nur die Farbe angezeigt wird?

Das nicht "lila" dasteht sondern das Bild:


Eventuell Zusatzmodul?

 

meinst du so?

 

Danke, aber ich meine nicht im Produkt sondern hier, im Bild unten...,
macht für mich keinen Sinn wenn Farben als Text angegeben sind sondern als Bild gezeigt werden würden.

Rot, Grün weiß jeder wie es aussieht, aber wenn es Farben sind die nicht als Text identifiziert werden können.

Wie zum Beispiel:

 

Ah okay, nein da habe ich leider keine Antwort drauf.

 

du könntest die Checkboxen farbig anpassen:

Code:

.checkbox label[for="filter_21_71"] .single-checkbox {
    background-color: #f00;
}

Jede Farbe braucht dann so einen CSS Code.
Jede Farbe hat eine eigene Nummer: filter_21_71

Anstatt der Farbe könntest du auch ein Bild hochladen. Müsstest ausprobieren mit background-image

 

ok, danke, währe zwar schöner, wenn nur das Bild so angezeigt werden würde und ohne das Wort "gelb" etc. und die Bilder über die Breite nebeneinander... so wie hier...


laufen würden, also so wie...


das wäre Perfekt. So hätte man nicht so viele Farben nach unten zur Ansicht.

Könnten sich doch mal die Entwickler überlegen ob das nicht sinnvoller wäre. Vielleicht lasse ich Farben ganz weg.

 

Woraus definiert sich "filter_21_71"

müssen da andere Einstellung

.checkbox label[for="filter_21_71"] .single-checkbox {
background-color: #f00;
}

kann das beliebig vergeben werden?
21_71

und muss da eine bestimmet Vorlage genommen werden?



Habe mir CSS etc. mal angeschaut und muss da mal tiefer einsteigen. ich möchte da auch nicht großartig Nerven .

 

Den CSS Code habe ich anhand deiner Filtereinstellungen geschrieben.
filter_21_71 war deine rote Farbe. Die ist jetzt aber nicht mehr da.

Du findest dies, wenn du mit der rechten Maustaste auf die Farbe klickst und dann auf durchsuchen.
Sieht dann so aus:



Blau = filter_24_76

das wird automatisch vom System vergeben wenn du einen Filterwert anlegst.

was da der Unterschied kann ich nicht sagen. Nimm einfach mal einen andere und schau was sich im Frontend ändert.

 

ich habe es mit Farben und einem Bild als Hintergrund getestet:

Code:

.checkbox label[for="filter_24_74"] .single-checkbox {
    background-image: url("/images/mann-des-hohen-winkels-der-auf-badekappe-sich-setzt%20(3).jpg");
    background-size: 100%;
    height: 30px;
    width: 30px;
}

.checkbox label[for="filter_24_75"] .single-checkbox {
    background-color: #7009ef;
    height: 30px;
    width: 30px;
}

.checkbox label[for="filter_24_76"] .single-checkbox {
    background-color: #20a5d1;
    height: 30px;
    width: 30px;
}

.checkbox label[for="filter_24_73"] .single-checkbox {
    background-color: #333;
    height: 30px;
    width: 30px;
}

.checkbox .single-checkbox, .checkbox-inline .single-checkbox {
position: relative;
}

Nachtrag: Wenn ihr die Farben nebeneinander und ohne Text haben wollt, dann braucht ihr zusätzlich die CSS Codes aus Beitrag #21

 

Erstmal vielen Dank für Deine Unterstützung.

Bei mir sieht es jetzt über Edge und in Chrome so aus:


Im Text wird der erste Buchstabe nicht angezeigt.

Aber so sieht es schon gut aus.

bei 20px wird es besser...

height: 20px;
width: 20px;

aber habe ich verstanden.

---------
Windows 11

 

oh sorry, ich hatte im ersten und im letzten Code Fehler drin.
Habe es berichtigt. Versuchs nochmal.

Wenn du die Größe der Checkboxen nicht vergrößern magst, dann brauchst du in den Codes das
height: 30px;
width: 30px;
nicht.

Und den letzten Code brauchst dann auch auch nicht:

.checkbox .single-checkbox, .checkbox-inline .single-checkbox {
position: relative;
}

 

Einfach nur Perfekt

Vielen Dank, mit deiner Hilfe was anfangen.

Da ihr (also mehrere) HTML/CSS/etc. Experten seit, könnte man das auch vielleicht so machen, dass Farben so angezeigt werden könnten - natürlich als Bild wie:

Einfache Aufstellung zum Beispiel je nach vorhandener Größe ohne den Text Rot / Grün / Gelb, eben nur Bild:

(Rot) (Grün) (Gelb) -> noch 3 bis 4 und dann die nächste Seite nach unten...?

Wenn es nicht geht, dann lasse ich das so. Besser wie nix.

Und damit währe dann auch für mich mich Problem gelöst. Und an dieser Stelle, nochmals vielen Dank an Frau Kraiber.

 

Sehr gerne.

das bekomme ich leider nicht hin. Nur diesen Bereich bekomme ich per CSS nicht gefasst, da es keine eigene Klasse hat und die Filteranzahl nicht auf jeder Seite gleich ist.
Das müsste sich ein richtiger Experte anschauen. Da komme ich leider nicht weiter.

 

Code:

color: #fff;

nur so als Idee für den Text

 

oder transparent.
An das hatte ich schon gedacht. Aber ich bekomme die Checkboxen nicht nebeneiander.

 

könnte man das von hier nicht ableiten und daraus eine checkbox basteln?