EnglishDit artikel is van toepassing op de Standaard en Medium Javascript implementatie.
Afgezien van basis styling, zien facetten en filters er standaard allemaal hetzelfde uit als je Tweakwise via Javascript in je website hebt geïmplementeerd. Het is echter ook mogelijk om bepaalde facetten een andere look en feel mee te geven via wat configuratie in de Tweakwise app en maatwerk css. Dit werkt op basis van custom classes die je kunt meegeven aan je facetten.
Stap 1: Een css-class meegeven aan een facet
Om met css aangepaste styling te kunnen toepassen op filters en facetten, moet je deze eerst voorzien van een css-class. Ga hiervoor in de Tweakwise app naar Filtering en dan naar Filtertemplates. Selecteer vervolgens de filtertemplate waarop je aangepaste styling wilt toepassen en klik op het potloodje voor de specifieke Eigenschap.
Op de pagina met instellingen voor de geselecteerde eigenschap, navigeer je naar het tabblad Geavanceerde opties en zoek je naar het invoerveld Css class. Hier kun je zelf één of meerdere kenmerken invullen, gescheiden door een spatie. Vergeet de instelling niet op te slaan.
Na een nieuwe publicatie worden de door jou aangemaakte css-classes mee gepubliceerd in de html van je Javascript-implementatie. Uiteraard alleen voor de specifieke eigenschap binnen het geselecteerde filtertemplate.
Stap 2: Styling toepassen op basis van custom css-classes
Om aanpassingen aan de look en feel van een specifiek filter of facet door te voeren, is het noodzaak om maatwerk css te schrijven voor de zojuist aangemaakte classes. Voeg de css toe aan de maatwerk Tweakwise css-bestand.
In ons voorbeeld ziet dit er bijvoorbeeld zo uit.
/* Custom facet classes*/ .red-background { background: rgba(255,0,0,0); } .font-weight-bold { font-weight: 700; }
Als je meerdere facetten of filters bijvoorbeeld wilt voorzien van een rode achtergrondkleur, dan hoef je de css uiteraard maar één keer in code toe te voegen. Zorg er uiteraard wel voor dat alle filters voorzien zijn van de juiste Css class in Tweakwise App.