> ## 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 Afspraak Boekingen App > ℹ️ **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 uw boeking widget om uw winkel te vergelijken branding precies? Hoppy Appointments laat je je eigen CSS toevoegen bovenop de ingebouwde ontwerpinstellingen, zodat je lettertypen, kleuren, afstand, knoppen en meer kunt verfijnen. Deze gids begeleidt u door het toevoegen en toepassen van aangepaste CSS op de boeking widget. --- # **⚠️ Voordat u begint** Voordat u aangepaste CSS gebruikt, zorg ervoor dat u: * De **Hoppy Appointments** app geïnstalleerd op uw Shopify opslag * Ten minste één actieve dienst * Basiskennis met CSS-selectoren en -verklaringen 💡 Voor de meeste designwijzigingen gebruiken kleuren, lettertypen, logo's en knoopstijlen de ingebouwde **Ontwerp** instellingen eerst. Aangepaste CSS is het beste wanneer u wijzigingen nodig heeft de ingebouwde opties niet dekken. Voor een volledig overzicht van de ingebouwde ontwerpopties, zie **Afspraak Boekingen Ontwerp & Styling Opties**. --- # **🛠️ Stap 1 Open de aangepaste CSS Editor** Aangepaste CSS kan op twee plaatsen worden beheerd. ## **Global CSS (wordt standaard op alle diensten toegepast)** 1. Open de **Hoppy Appointments** app 2. Klik **Instellingen** in het menu App 3. Klik **Ontwerp** 4. Scroll naar beneden naar de **Aangepaste CSS** kaart onderaan de pagina ## **Per dienst CSS (overschrijdt wereldwijde CSS voor één dienst)** 1. Open de **Hoppy Appointments** app 2. Ga naar **Diensten** 3. Klik op de service die u wilt stijlen 4. Klik op de **Ontwerp** tab 5. Zorg ervoor dat **Standaardthema-instellingen niet volgen** moet gecontroleerd worden 6. Scroll naar beneden naar de **Aangepaste CSS** kaart --- # **🛠️ Stap 2 Kies wereldwijd of service-niveau CSS** Bij het bewerken van CSS op een service **Ontwerp** tab, zie je een schakelaar: **Standaardthema-instellingen niet volgen** * **Uit** → de dienst maakt gebruik van de wereldwijde CSS van **Instellingen → Ontwerp** * **Aan** → de dienst maakt gebruik van zijn eigen CSS van het service-niveau **Ontwerp** tab Hierdoor kunt u een consistente stijl over alle diensten, of geven specifieke diensten een unieke look. --- # **🛠️ Stap 3 Schrijf uw CSS** De CSS-editor begint met een standaard sjabloon met de meest voorkomende widget-selectoren. U kunt de sjabloon vervangen of uitbreiden met uw eigen regels. ## **Belangrijkste verpakkingsklassen** Selectie Wat het doel is `.futureblink-appointment` Het gehele boekingswidget `.futureblink-appointment .dialog` Het hoofdboekvenster (desktop) `.futureblink-appointment.mobile .dialog` Het hoofdboekvenster (mobiel) `.futureblink-appointment .userInfoSection` Het servicedetailspaneel ## **Gemeenschappelijke selecties kunt u stijl** Selectie Wat het doel is `.futureblink-appointment .confirm-btn` Bevestig / Boekknop `.futureblink-appointment .continue-btn` Doorgaan knop `.futureblink-appointment .back-btn` Achterknop `.futureblink-appointment .time-slot.selected` Geselecteerde tijdslot `.futureblink-appointment .highlighted_date.react-calendar__tile--active` Geselecteerde agendadatum `.futureblink-appointment .schedule-form` Reserveringsformulier voor klanten `.futureblink-appointment .meeting-booked` Succes / bevestiging pagina ## **Voorbeeld** .futureblink-appointment .confirm-btn { achtergrondkleur: #2563eb; kleur: #ffffff; grensradius: 8px; } .futureblink-apointment.mobile .confirm-btn { achtergrondkleur: #1d4ed8; } ℹ️ Jij wel. **niet** toe te voegen `!important` Uw verklaringen. Hoppy Appointments automatisch toevoegen `!important` wanneer de CSS wordt geïnjecteerd in de widget, die helpt uw regels overschrijven de standaard stijlen. --- # **🛠️ Stap 4** Klik na het invoeren van uw CSS op de **Toepassen** knop onder de editor. * **Toepassen** → maakt de aangepaste CSS en injecteert het in de boeking widget * **Reset** → schakelt de aangepaste CSS uit en keert de editor terug naar het standaard sjabloon ⚠️ Aangepaste CSS wordt pas van kracht nadat u klikt **Toepassen**. Het plakken van CSS in het veld alleen verandert het widget uiterlijk niet. --- # **💾 Stap 5 Opslaan en Voorbeeld** 1. Klik **Opslaan** in de bovenste balk 2. Wacht op het bevestigingsbericht 3. Bekijk het boekingswidget op uw storefront of in het admin previewpaneel Als u per dienst CSS bewerkt, zorg ervoor dat de **Standaardthema-instellingen niet volgen** toggle is ingeschakeld, anders wordt de wereldwijde CSS nog steeds gebruikt. --- # **💡 Tips & beste praktijken** * **Klein starten** Verander één element tegelijk zodat je kunt zien wat elke regel beïnvloedt * **Specifieke selecties gebruiken** Doel `.futureblink-appointment .your-class` in plaats van brede selecties die andere delen van uw winkel kunnen beïnvloeden * **Test op mobiel** Gebruik de `.futureblink-appointment.mobile` voorvoegsel om de mobiele indeling apart aan te passen * **Hou een back-up** Kopieer uw werk CSS in een notitiebestand voordat u klikt **Reset** * **Gebruik eerst de ingebouwde ontwerpinstellingen** Kleuren, lettertypen en logo's zijn daar gemakkelijker te beheren en vereisen geen CSS kennis --- # **🐞 Problemen oplossen** ## **Mijn CSS wordt niet getoond op de storefront** 1. Zorg ervoor dat u klikt **Toepassen** in de aangepaste CSS-editor 2. Zorg ervoor dat u klikt **Opslaan** bovenaan de pagina 3. Voor per dienst CSS, zorg ervoor **Standaardthema-instellingen niet volgen** is ingeschakeld 4. Controleer of uw selecties overeenkomen met de werkelijke widget klassenamen 5. Uw browsercache wissen of testen in een incognito venster ## **Het widget keerde terug naar de standaard look** Klikken **Reset** schakelt het CSS uit en herstelt het standaard template. Als u uw aangepaste regels terug wilt, plak ze dan opnieuw en klik **Toepassen**. ## **Sommige regels werken niet** De auto `!important` injectie werkt het beste met eenvoudig `property: value;` verklaringen. Zeer complexe CSS, zoals `@media` vragen; `@keyframes`, of nested selectors kunnen niet betrouwbaar worden getransformeerd. Houd uw regels recht voor de meest consistente resultaten. --- # **📚 Gerelateerde artikelen** * **Afspraak Boekingen Ontwerp & Styling Opties** * **Hoe vergaderlocaties voor afsprakenboeken instellen** * **Hoe kan ik afspraken boeken diensten instellen**