Huisstijl instellen - Unified Custom Branding

Waar vind je de huisstijl-instellingen?

1. Ga naar Instellingen in het hoofdmenu
2. Zorg dat je op het Algemeen tabblad staat
3. Scroll naar beneden naar de sectie Huisstijl
4. Hier zie je de Logo & Kleuren kaart waar je alles kunt instellen

![Screenshot: Instellingen pagina met Algemeen tab geselecteerd en Huisstijl sectie zichtbaar]

Logo en Favicon instellen

Logo uploaden

1. Klik in het Logo veld op Bestand kiezen
2. Selecteer een afbeelding (.png, .jpg, .jpeg)
3. Let op: Maximale grootte is 250KB. Te groot? Verklein je afbeelding met https://squoosh.app/
4. Je ziet een voorvoorbeeld van je logo (75x75 pixels, rond)
5. Wil je het logo verwijderen? Klik op Verwijder afbeelding

Favicon uploaden

1. Klik in het Favicon veld op Bestand kiezen
2. Selecteer een kleine afbeelding (.png, .jpg, .jpeg) - dit wordt het icoon in browsertabs
3. Let op: Ook hier geldt de 250KB limiet
4. Je ziet een voorvoorbeeld van je favicon
5. Verwijderen kan met de Verwijder afbeelding knop

Stijlmodus kiezen

Je hebt twee opties voor het instellen van kleuren:

Eenvoudig

Perfect voor de meeste gebruikers die gewoon hun merkkleur willen instellen.

Geavanceerd

Voor gevorderden die volledige controle willen over de styling met CSS.

Screenshot: [Stijlmodus toggle tussen Eenvoudig en Geavanceerd]

Eenvoudige modus gebruiken

1. Zorg dat Eenvoudig geselecteerd is in de Stijlmodus
2. Klik op het Primaire kleur veld
3. Kies je hoofdkleur met de kleurkiezer of typ een hexcode (bijv. #FF6B6B)
4. Klik op het Achtergrondkleur veld
5. Kies je achtergrondkleur
6. Klik op Opslaan

![Screenshot: Eenvoudige modus met primaire kleur en achtergrondkleur velden en kleurkiezers]

Tip: De primaire kleur wordt gebruikt voor knoppen, links en accenten.

Geavanceerde modus gebruiken

De geavanceerde modus geeft je volledige controle via CSS, maar kan ook dingen kapot maken als je niet weet wat je doet. Er wordt geen ondersteuning geboden voor problemen die ontstaan door aangepaste CSS.

Stap voor stap:

1. Selecteer Geavanceerd in de Stijlmodus
2. Je ziet nu een groot tekstveld met CSS-code
3. Gebruik de beschikbare CSS variabelen:

• --tenant-primary-color - Voor de primaire kleur
• --tenant-background-color - Voor de achtergrondkleur

Voorbeeld CSS:

:root {
  --tenant-primary-color: #FF6B6B;
  --tenant-background-color: #F8F9FA;
}

/* Je kunt hier ook andere CSS toevoegen */
.ks-btn-primary {
  border-radius: 20px;
}

4. Klik op Opslaan

![Screenshot: Geavanceerde modus met CSS textarea en beschikbare variabelen uitleg]

Tips

• Test je huisstijl op verschillende pagina's (cursus, checkout, etc.)
• Tip: Gebruik AI (ChatGPT, Claude) om CSS-code te laten schrijven voor kleine aanpassingen

Wijzigingen opslaan

1. Nadat je je logo, favicon en/of kleuren hebt ingesteld
2. Klik rechtsonder op Opslaan
3. Je ziet een groene melding dat alles is opgeslagen
4. Je wijzigingen zijn nu actief op je hele platform

Problemen oplossen

Kleuren zijn niet goed gemigreerd?

• Sla je instellingen opnieuw op, ook al lijken ze correct

Logo te groot?

• Gebruik https://squoosh.app/ om je afbeelding te verkleinen

CSS werkt niet in geavanceerde modus?

• Controleer je CSS syntax
• Gebruik de browser ontwikkelaarstools (F12) om fouten te zien
• Vraag AI om hulp bij CSS-problemen

Je huisstijl is nu centraal en overzichtelijk ingesteld! Je huisstijl wordt consistent toegepast op je hele leeromgeving 🚀

Bijgewerkt op: 29/09/2025