Das geht alles nicht ohne "basteln". Wenn dann müsste das komplett programmiert werden. Wenn du keinen Cloudshop hast, kann dir da eine Agentur bestimmt etwas programmieren. Ich habe gerade nochmal ein bisschen rumprobiert. Mit diesen CSS Codes sieht es glaube ganz gut aus. Aber wie gesagt, das ist wirklich nur ein "basteln". Wichtig wäre, dass du die Texte entfernst. Also nicht blau, lila usw schreiben. Sondern lieber nur einen Punkt. Den machen wir dann per CSS transparent, also unsichtbar. Diesen Teil bitte vergessen. Ich habe den Code angepasst. Diese Codes brauchst, damit das Wort "Farben" über den Checkboxen stehen bleibt, und nicht in der selben Zeile steht: Code: @media (max-width: 768px){ .box-filter fieldset .option-heading{ margin-right: 650px !important; }} .box-filter fieldset .option-heading{ margin-right: 140px; } Dieser Code spricht das fieldset an, in dem filter_24_ vorhanden sind. Ich habe nachgeschaut, deine Farben haben alle filter_24_ .. bekommen (hier nichts verändern) Code: fieldset:has(label[for^="filter_24_"]) { display: flex; flex-wrap: wrap; } Dieser Code spricht alle checkboxen an die ein filter_24_ beinhalten. Code: .checkbox:has(label[for^="filter_24_"]) { font-size: 0px; margin-right: 8px; } Diese Codes kannst du genau so in dein eigenes CSS speichern. Nichts daran verändern.
Moin, das sieht doch sehr gut aus, vielen Dank dafür. Da braucht man keine externe Agentur. Mit diesem Code könnte man ja auch Bilder für Größen platzieren. Wie zum Beispiel: [36] als Bild folge. Kann man in den Codes eine Farbinfomation eingeben damit man weiß welche Farbe das ist: .checkbox label[for="filter_24_76"] .single-checkbox { # Grün background-color: #20a5d1; height: 30px; width: 30px; }
wie meinst du genau? Das machst du so: Code: .checkbox label[for="filter_24_76"] .single-checkbox { background-color: #20a5d1; /* grün */ height: 30px; width: 30px; Ich habe beim ersten Code im Beitrag #21 das !important vergessen. Das musst noch nachtragen, sonst passt es mobil nicht.
Ich meine... infolge... statt... das ginge dann schon in Richtung SW. Der Vorteil wäre natürlich, dass man nicht soweit nach unten scrollen müsste für einen Klick und würde auch optisch vielmehr hermachen. Warum gibt es hierfür keine Lösung von Gambio direkt.
Jetzt gibt es dennoch ein Problem, wenn die Farben festgelegt sind und man neue Produkte einfügt und diese Produkte neue oder schon vorhandene Farben im Produkte unter... eingeben möchte, findet man die vorhandene Farbe und auch die neue Farbe nicht. Was klickt man dann an wenn nur der [punkt] . sichtbar ist?
ich habe eine andere Idee: suche bei den CSS Codes diesen Code: Code: .checkbox:has(label[for^="filter_24_"]) { color: transparent; } und ersetze ihn mit diesem: Code: .checkbox:has(label[for^="filter_24_"]) { font-size: 0px; margin-right: 8px; } Dann kannst du die Farben ganz normal schreiben und musst keinen Punkt schreiben. (Diesen Teil habe ich im Beitrag #21 schon geändert)
Su sieht es gut aus, und die Punkte, die oben im Filter stehen kann man mit der Farbschrift gut lesen. Statt 1 | 2 steht dann oben Blau < Gelb etc. Und wenn nichts angeklickt ist, steht da auch nichts. So wie es sein soll. Vielen Dank nochmal, ich werde demnächst mal alle eintippen.
Beitrag 21 Diesen Code... .checkbox:has(label[for^="filter_24_"]) { color: transparent; } muss wie rein oder im anderen Code von mehreren?
Da ja alle Bezugspunkte für Größen auf einer Größentabelle liegen kann man doch alle Größen in Bildern auch rechts nebeneinander wie Farben platzieren - könnte ich dafür auch wie die Farben als Größen definieren? Der CSS Code würde doch nahezu auch so eingetragen werden oder nicht? Was meint ihr, würde das gehen bzw. was wäre zu beachten? <input type="checkbox" id="filter_22_34" name="filter_fv_id[22][]" value="34" data-single_checkbox="" checked="checked" style="position: absolute; left: -100000px;">