> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎨 Aangepaste CSS instellen voor vertrouwensbadges & pictogrammen > ℹ️ **Note:** Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam. Wilt u volledige controle over hoe uw Trust Badges eruit zien op uw storefront? 🎨 Terwijl het tabblad Ontwerp biedt uitgebreide aanpassingsopties, **Aangepaste CSS** geeft u de flexibiliteit om geavanceerde styling aanpassingen te maken die verder gaan dan de standaard instellingen. Of u nu verfijnt, strenge merkrichtlijnen aanpast, aangepaste visuele effecten toevoegt of themaspecifieke stylingconflicten oplost, Custom CSS biedt volledige creatieve controle over uw Trust Badge-ontwerp. --- # **⚠️ Voordat u begint** Voordat u Aangepaste CSS gebruikt: * Zorg ervoor dat je al een Trust Badge hebt gemaakt. * Heb een basiskennis van CSS of toegang tot een ontwikkelaar. * Begrijp dat Custom CSS standaard Design-instellingen kan overschrijven. 💡 Als je nog geen Trust Badge hebt gemaakt, maak er dan een voordat je verder gaat met deze gids. --- # **🛠️ Stap 1 Open het ontwerptabblad** Open de **Hoppy Trust Badges** app en navigeer naar de Trust Badge die u wilt aanpassen. Dan: ➡️ Klik op de **Ontwerp** tab. Scroll naar beneden totdat u de **Aangepaste CSS** Section. Deze sectie bevat alle tools die nodig zijn om aangepaste styling toe te voegen en te beheren. --- # **🎨 Stap 2 Open de aangepaste CSS sectie** Binnen de **Aangepaste CSS** sectie vindt u: * Een CSS-editor * A **Beeldgids** knop * Een **Toepassen** knop * Een starter CSS-sjabloon De starter template bevat de beschikbare selecties die kunnen worden aangepast voor uw Trust Badge. Dit maakt het gemakkelijker om te beginnen met styling zonder handmatig te inspecteren storefront elementen. --- # **✍️ Stap 3 Toevoegen van uw aangepaste CSS** De editor bevat verschillende vooraf geconfigureerde selectoren die specifieke Trust Badge elementen richten. ### **Beschikbare selectoren** #### **Container** Selectie Omschrijving `.futureblink-trust-badge` Volledig vertrouwen badge container --- #### **Titel** Selectie Omschrijving `.futureblink-trust-badge .fb-title` Hoofdtitel `.futureblink-trust-badge.mobile .fb-title` Mobiele titelstyling 💡 Voor drijvende badges gebruikt de titelkiezer `.title` in plaats van `.fb-title`. --- #### **Aanvullende** Selectie Omschrijving `.futureblink-trust-badge .subheading` Omschrijving `.futureblink-trust-badge.mobile .subheading` Mobiele omschrijving styling --- #### **Pictogrammen** Selectie Omschrijving `.futureblink-trust-badge .icon` Penseelpictogrammen `.futureblink-trust-badge.mobile .icon` Mobiele pictogramstyling --- #### **Oproepknop** Selectie Omschrijving `.futureblink-trust-badge .cta-button` CTA-knop `.futureblink-trust-badge.mobile .cta-button` Mobiele CTA-knopstyling --- ### **Voorbeeld CSS** Om opvulling toe te voegen aan de badge container en de titel aan te passen: `.futureblink-trust-badge {` `padding: 20px;` `}` `.futureblink-trust-badge .fb-title {` `color: #2c3e50;` `font-size: 18px;` `}` 💡 U kunt aanvullende CSS-selectoren, media-queries, animaties en stylingregels toevoegen indien nodig. --- # **📱 Stap 4 toevoegen Mobile-Specific Styling** Om mobiele apparaten specifiek te richten, gebruik de `.mobile` variatie van de keuzemogelijkheden. Voorbeeld: `.futureblink-trust-badge.mobile .fb-title {` `font-size: 14px;` `}` De app wraps automatisch `.mobile` selectoren in een mobiele mediaquery wanneer ze op uw storefront worden weergegeven. Als u de voorkeur geeft aan het schrijven van uw eigen media-queries, worden ze precies zoals ingevoerd bewaard. --- # **✅ Stap 5 Toepassen van uw CSS** Zodra uw CSS is toegevoegd: ➡️ Klik **Toepassen**. De live preview updates automatisch, zodat u uw styling wijzigingen onmiddellijk te bekijken. Als u uw aangepaste styling later wilt verwijderen: ➡️ Klik **Reset**. Dit verwijdert uw Custom CSS en herstelt de standaard Design-instellingen. --- # **👀 Stap 6 Bekijk het voorbeeld** Na het toepassen van uw CSS: ➡️ Bekijk het voorbeeld van het bureaublad. ➡️ Bekijk de Mobile preview. Controleer of: * Tekst verschijnt correct. * Pictogrammen blijven goed op elkaar afgestemd. * De ruimte lijkt consistent. * Knoppen tonen zoals verwacht. Indien aanpassingen nodig zijn: ➡️ Update de CSS. ➡️ Klik **Toepassen** Alweer. Het voorbeeld wordt na elke wijziging automatisch vernieuwd. --- # **💾 Stap 7: Opslaan en publiceren** Zodra je tevreden bent met het ontwerp: ➡️ Klik **Opslaan**. ➡️ Klik **Publiceren**. ⚠️ Alleen opslaan werkt de storefront niet bij. De Trust Badge moet ook worden gepubliceerd voordat klanten de wijzigingen kunnen zien. --- # **⚠️ Belangrijke opmerkingen** ### **Aangepaste CSS overschrijft standaardinstellingen** Aangepaste CSS heeft voorrang op de meeste Design tab instellingen. Als een kleur, afstand, of typografie instelling lijkt te worden genegeerd, zal het waarschijnlijk worden overschreven door uw CSS. --- ### **Automatische !belangrijke behandeling** De app voegt automatisch toe `!important` prioriteit aan CSS verklaringen bij het renderen van stijlen op de storefront. U hoeft niet toe te voegen `!important` handmatig. --- ### **Scoped Styling** Aangepaste CSS wordt automatisch gecontroleerd op de specifieke Trust Badge die wordt bewerkt. Dit voorkomt styling conflicten met: * Andere vertrouwensbadges * Themaelementen * Andere componenten voor opslag --- ### **Lege selecties zijn toegestaan** U hoeft niet elke selector in het sjabloon te gebruiken. Voeg alleen stijlen toe aan de elementen die u wilt aanpassen. --- ### **CSS-validatie** De editor valideert geen CSS syntax. Als een stijl niet correct wordt toegepast: ➡️ Controleer de namen van de selectie. ➡️ Controleer beugels en puntkomma's. ➡️ Bekijk de CSS voor syntax fouten. --- # **❓ Problemen oplossen** Als uw stijlen niet correct verschijnen: ➡️ Bevestig dat **Toepassen** is geklikt. ➡️ Controleer de vertrouwensbadge is **Opgeslagen** en **Gepubliceerd**. ➡️ Controleer of de namen exact overeenkomen met het opgegeven sjabloon. ➡️ Test in een Incognito of Privé browservenster. ➡️ Vernieuw de storefront om gecachede stijlen te wissen. --- # **🎉 Eindresultaat** ✅ Uw Trust Badge kan worden aangepast buiten de standaard Design instellingen. ✅ Branding, afstand, typografie en pictogramstyling kunnen nauwkeuriger worden geregeld. ✅ Desktop en mobiele lay-outs kunnen onafhankelijk worden gestyled. ✅ Aangepaste stijlen blijven geïsoleerd van de geselecteerde Trust Badge. Custom CSS biedt een flexibele manier om een meer gepolijste en merkconsistente Trust Badge ervaring te creëren met behoud van de eenvoud van de ingebouwde ontwerptools van de app. ✨