JetSmartFilters – Counter farblich anpassen

JetsmartFilters - Counter anpassen

JetSmartFilters gestalten

Das Plugin JetSmartFilters vom Hersteller Crocoblock* bietet einen Counter an, der die Anzahl der enthaltenen Filterergebnisse anzeigt. Die Herausforderung ist, dass Crocoblock auf der Website wunderschön gestaltete Filter zeigt, die mit den vorhandenen Einstellmöglichkeiten gar nicht so gestaltet werden können. Aber schauen wir uns das im Detail an:

Der Counter/Zähler sieht im Standard so aus:

JetSmartFilter - Anzahl ungestalten

Es ist also eine Zahl vorhanden und eine Klammer, die die Zahl umgibt. Die Einstellungsmöglichkeiten sind eher marginal:

Elementor - JetSmartFilters Counter Stil-Optionen

Um den Counter etwas hübscher zu gestalten, muss in den CSS-Einstellungen folgender Code hinterlegt werden:

				
					span.counter-prefix {
    display: none;
}

span.counter-suffix {
    display: none;
}

.jet-filters-counter {
    margin-left: 10px;
    background: #dbdbdb;
    padding: 3px 11px 3px 11px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
}
				
			

Durch die ersten beiden Abschnitte können die Klammern entfernt werden. Der dritte Abschnitt sorgt dafür, dass die Zahlen einen runden Hintergrund erhalten – die Farbe (background) kann natürlich angepasst werden.

Die eigentlich Schriftfarbe kann ganz normal über die Elementor Widget-Funktionen angepasst werden.

Das Ergebnis mit diesem CSS-Code sieht dann wie folgt aus:

Abonnieren
Benachrichtige mich bei
0 Kommentare
Inline Feedbacks
View all comments

Die mit Sternchen (*) gekennzeichneten Verweise sind sogenannte Provision-Links. Wenn du auf so einen Verweislink klickst und über diesen Link einkaufst, bekomme ich von deinem Einkauf eine Provision. Für dich verändert sich der Preis nicht. 

0
Hast du Fragen? Dann schreibe einen Kommentar ;-)x
Newsletter abonnieren

Erhalte regelmäßig Informationen zu neuen Tipps und Tutorials.