> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.kennis.shop/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).

# Eigen CSS gebruiken (Geavanceerd)

> ✨ Dit artikel is gemaakt met behulp van AI. Klopt er iets niet? Laat het ons weten via de chat.

Je kunt de kleuren en de stijl van je openbare pagina's aanpassen: je betaalpagina's, cursuspagina's, winkel en studentenportaal. Dat doe je op één plek, voor je hele shop tegelijk. In dit artikel lees je hoe dat werkt en hoe je voorkomt dat je eigen CSS per ongeluk wordt vervangen.

**Belangrijk om te weten:** je shop heeft één stijl. Je kiest tussen **Eenvoudig** (twee kleuren) en **Geavanceerd** (je eigen CSS). Je kunt ze niet allebei tegelijk gebruiken. Heb je eigen CSS opgeslagen en kies je daarna **Eenvoudig**? Dan vraagt Kennis.shop eerst of je je eigen CSS wil vervangen door de twee gekozen kleuren. Zonder jouw akkoord blijft je CSS gewoon staan.

## Waar stel je de stijl in?

1. Klik in het menu links op **Instellingen**.

![Het menu links met Instellingen gemarkeerd](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/01-menu-instellingen.webp =250x900)

2. Klik in de lijst links op **Bedrijfsgegevens**. Meestal staat deze pagina al open.

![De lijst met instellingen, met Bedrijfsgegevens gemarkeerd](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/02-tab-bedrijfsgegevens.webp =238x515)

3. Scroll naar beneden naar het blok **Huisstijl**. Daarin vind je je logo, je favicon en **Aangepaste stijl**.

## Kleuren kiezen met Eenvoudig

1. Kies bij **Stijlmodus** voor **Eenvoudig**.
2. Kies je **Primaire kleur**. Dit is de hoofdkleur van je pagina's.
3. Kies je **Achtergrondkleur**.
4. Klik op **Opslaan**.

![Stijlmodus Eenvoudig met het veld Primaire kleur](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/03-eenvoudig.webp =750x397)

Laat je beide kleuren leeg en klik je op **Opslaan**? Dan zie je de standaardkleuren van Kennis.shop.

_Wil je alleen andere kleuren? Dan is **Eenvoudig** genoeg, en ook de beste keuze._

## Je eigen CSS gebruiken met Geavanceerd

Ken je CSS, of laat je dit doen door een webbouwer? Dan kun je de stijl zelf bepalen.

1. Kies bij **Stijlmodus** voor **Geavanceerd**.
2. Plak of typ je CSS in het tekstvak.
3. Zet je CSS **tussen `<style>` en `</style>`**. Kennis.shop zet jouw tekst precies zo op je pagina's. Zonder deze twee regels werkt je CSS niet, en kan de tekst zelfs zichtbaar op je pagina komen.
4. Klik op **Opslaan**.

![Stijlmodus Geavanceerd met het tekstvak voor je eigen CSS](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/04-geavanceerd.webp =750x572)

![De knop Opslaan onder het tekstvak](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/05-opslaan.webp =750x572)

Je CSS geldt voor al je openbare pagina's, ook voor je betaalpagina's. Bekijk daarna een paar pagina's om te zien of alles goed staat.

Je eigen CSS wint altijd van de standaardkleuren van Kennis.shop, ook op je betaalpagina. Wil je de hoofdkleur of de achtergrond van je pagina's aanpassen? Zet dan deze variabelen in je CSS (je ziet ze ook onder het tekstvak, bij **Beschikbare CSS variabelen**):

- `--tenant-primary-color`: de primaire kleur.
- `--tenant-background-color`: de achtergrondkleur.

## Waarom zijn mijn aanpassingen ineens weg?

Er zijn twee mogelijke oorzaken:

- Iemand heeft **Eenvoudig** gekozen, het vinkje **Ja, vervang mijn eigen CSS door deze twee kleuren** aangezet en op **Opslaan** geklikt. Dan wordt je eigen CSS vervangen door de twee kleuren.
- Je CSS is gericht op een bepaald onderdeel van een pagina, en dat onderdeel is na een update van Kennis.shop anders opgebouwd. Je CSS staat dan nog steeds in het tekstvak, maar past niet meer op dat onderdeel.

Alleen je logo of favicon wijzigen en op **Opslaan** klikken vervangt je eigen CSS niet.

Kies je **Eenvoudig** terwijl je eigen CSS is opgeslagen, dan zie je dit oranje bericht. Zolang het vinkje uit staat, wordt er niets vervangen.

![De oranje waarschuwing bij Eenvoudig, met het vinkje Ja, vervang mijn eigen CSS door deze twee kleuren](https://kennis.shop/help/eigen-css-gebruiken-geavanceerd/06-waarschuwing-eenvoudig.webp =750x495)

**Zo voorkom je het:**

1. Bewaar je eigen CSS altijd ook in een eigen document, buiten Kennis.shop.
2. Zie je de oranje waarschuwing en wil je je eigen CSS houden? Laat het vinkje dan uit en kies weer **Geavanceerd**.
3. Past een collega ook de instellingen aan? Spreek dan af wie het blok **Huisstijl** mag wijzigen.

Is je CSS toch weg? Kies **Geavanceerd**, plak je bewaarde CSS opnieuw in het tekstvak en klik op **Opslaan**.

## Veelgestelde vragen

**We hebben de CSS voor de betaalpagina aangepast, maar na een update van Kennis.shop is die weer overschreven. Hoe kan dat?**
Bij een update veranderen wij je opgeslagen CSS niet. Je CSS wordt alleen vervangen als iemand bij **Eenvoudig** het vinkje **Ja, vervang mijn eigen CSS door deze twee kleuren** aanzet en op **Opslaan** klikt. Wel kan een update de opbouw van een pagina veranderen. CSS die op een bepaald onderdeel van de pagina is gericht, past dan soms niet meer. Dan staat je CSS nog wel in het tekstvak, maar zie je het effect niet meer. Kijk samen met je webbouwer wat er aangepast moet worden. Is je CSS echt verdwenen? Plak dan je bewaarde CSS terug.

**Waar stel ik de kleuren van mijn leeromgeving en betaalpagina in?**
Bij **Instellingen** > **Bedrijfsgegevens** > **Huisstijl** > **Aangepaste stijl**. Deze stijl geldt voor al je openbare pagina's tegelijk: je betaalpagina's, cursuspagina's, winkel en studentenportaal.

**Mijn kleuren waren ineens weg. Wat nu?**
Kijk eerst of **Stijlmodus** op **Eenvoudig** of op **Geavanceerd** staat, en of de velden gevuld zijn. Iemand kan bij **Eenvoudig** je eigen CSS hebben vervangen. Gebruik je **Eenvoudig**? Kies je kleuren opnieuw en klik op **Opslaan**. Gebruik je eigen CSS? Kies **Geavanceerd**, plak je bewaarde CSS terug en klik op **Opslaan**.

**Kan ik Eenvoudig en Geavanceerd combineren?**
Nee. Je gebruikt altijd één van de twee.

**Kan ik een andere stijl voor één betaalpagina maken?**
Nee. De stijl geldt voor je hele shop.

Klaar! Je huisstijl staat goed en je weet hoe je voorkomt dat je CSS wordt overschreven. 🚀