gelöst Filterauswahl Farben als kleines Bild anzeigen

Thema wurde von rainer_amend, 30. April 2024 erstellt.

  1. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    Hallo,

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

    upload_2024-4-30_9-1-46.png



    upload_2024-4-30_9-2-24.png


    VG R.
     
  2. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    Ich hoffe, es wurde verstanden was ich damit meine?
     
  3. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    #3 rainer_amend, 3. Juni 2024
    Zuletzt bearbeitet: 3. Juni 2024
    Ich frage nochmal nach, wie stellt man in der Filterauswahl Farben ein, so dass das mit kleinen Icons nebeneinander angezeigt werden können?

    [​IMG]

    so wie oben, aber nicht so...
    upload_2024-6-3_16-30-59.png
     
  4. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    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:
    upload_2024-6-6_12-13-26.png

    Eventuell Zusatzmodul?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    570
    meinst du so?
     

    Anhänge:

  6. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    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:
    upload_2024-6-6_14-9-4.png

    upload_2024-6-6_14-5-18.png
     
  7. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    15. Januar 2020
    Beiträge:
    444
    Danke erhalten:
    159
    Danke vergeben:
    570
    Ah okay, nein da habe ich leider keine Antwort drauf.
     
  8. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    #8 Anonymous, 6. Juni 2024
    Zuletzt bearbeitet: 6. Juni 2024
    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
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
  10. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    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...
    upload_2024-6-6_18-35-52.png

    laufen würden, also so wie...
    upload_2024-6-6_18-37-0.png

    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.
     
  11. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    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?

    upload_2024-6-7_16-44-58.png

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

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    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:

    upload_2024-6-7_18-0-57.png

    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.
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    #13 Anonymous, 7. Juni 2024
    Zuletzt bearbeitet: 22. August 2024
    ich habe es mit Farben und einem Bild als Hintergrund getestet:

    upload_2024-6-7_20-15-32.png

    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
     
  14. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    #14 rainer_amend, 7. Juni 2024
    Zuletzt bearbeitet: 7. Juni 2024
    Erstmal vielen Dank für Deine Unterstützung.

    Bei mir sieht es jetzt über Edge und in Chrome so aus:
    upload_2024-6-7_21-42-34.png

    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
     
  15. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    #15 Anonymous, 7. Juni 2024
    Zuletzt bearbeitet: 7. Juni 2024
    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;
    }
     
  16. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    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.
     
  17. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    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.
     
  18. ecomplus.dev

    ecomplus.dev Erfahrener Benutzer

    Registriert seit:
    6. Mai 2013
    Beiträge:
    92
    Danke erhalten:
    63
    Danke vergeben:
    26
    Code:
    color: #fff;
    nur so als Idee für den Text
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.869
    Danke erhalten:
    774
    Danke vergeben:
    294
    oder transparent.
    An das hatte ich schon gedacht. Aber ich bekomme die Checkboxen nicht nebeneiander.
     
  20. rainer_amend

    rainer_amend Erfahrener Benutzer

    Registriert seit:
    20. März 2024
    Beiträge:
    214
    Danke erhalten:
    13
    Danke vergeben:
    55
    könnte man das von hier nicht ableiten und daraus eine checkbox basteln?

    upload_2024-6-8_15-56-50.png