Aangepaste CSS

Aangepaste CSS geldt per quiz, niet voor het hele account, zodat je een klantgerichte quiz anders kunt stylen dan een interne. Het wordt opgeslagen bij de rest van je quizinstellingen en ingevoegd in een <style>-tag op de openbare pagina, na de eigen stijlen van FluoTest — zodat jouw regels voorrang krijgen. Voordat het wordt opgeslagen of weergegeven, wordt de CSS gesaniteerd: er mogen geen HTML-tags, @import-regels, expression() of url()-verwijzingen in staan die niet naar een data: URI verwijzen, en er geldt een limiet van 20.000 tekens.

1. Open de quiz die je wilt stylen en ga naar het tabblad Instellingen.
2. Klap de sectie "Geavanceerd" open en zoek "Aangepaste CSS" (dit is een Pro-functie — gratis accounts zien hier een upgradeprompt).
3. Schrijf CSS in de editor, gericht op de klassen en data-attributen uit het overzicht hieronder.
4. Klik op "Voorbeeld" om de laatst opgeslagen versie van de quiz in een ingesloten frame te openen, of sla op en gebruik daarna de normale voorbeeldlink van de quiz om je wijzigingen live te zien.
5. Sla de quiz op. Wijzigingen in Aangepaste CSS zijn direct zichtbaar op de openbare pagina.

Het rootelement van de openbare quizpagina heeft de klasse fluotest-quiz, en belangrijke elementen hebben stabiele data-fluotest-el-attributen, zodat je CSS blijft werken ook als FluoTest zijn interne stijlklassen wijzigt.

Een paar veelvoorkomende aanpassingen om mee te beginnen — kopieer, pas de waarden aan en plak ze in het veld Aangepaste CSS.

Pas de knopkleur en -vorm aan

.fluotest-quiz [data-fluotest-el="button-next"] {
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Pas de ruimte tussen vragen en de titelgrootte aan

.fluotest-quiz [data-fluotest-el="question-item"] {
  padding: 2rem;
}

.fluotest-quiz [data-fluotest-el="question-title"] {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
}

Herstyle de voortgangsbalk

.fluotest-quiz [data-fluotest-el="progress-track"] {
  height: 6px;
}

.fluotest-quiz [data-fluotest-el="progress-fill"] {
  background: linear-gradient(90deg, #9E3BB9, #FFD94D);
}

Aangepaste CSS is openbare invoer, dus het wordt gesaniteerd voordat het wordt opgeslagen en nogmaals voordat het wordt weergegeven:

• Geen HTML-tags: Alles wat op een HTML-tag lijkt (inclusief </style>) wordt verwijderd, zodat je CSS nooit uit de <style>-context kan ontsnappen.
• Geen @import: @import-regels worden verwijderd — anders zouden ze een stylesheet van derden kunnen laden.
• Geen externe url(): url()-verwijzingen worden alleen behouden als ze naar een data: URI verwijzen. Links naar externe hosts worden verwijderd om misbruik zoals trackingpixels en gemengde content te voorkomen.
• Geen expression(): Verouderde CSS expression()-syntax wordt verwijderd.
• Limiet van 20.000 tekens: Alles voorbij de limiet wordt afgekapt — ruim voldoende voor aanpassingen aan ruimte, kleur en typografie.