Vlastní CSS

Vlastní CSS je nastavené pro každý kvíz zvlášť, ne pro celý účet, takže můžeš stylovat kvíz pro klienty jinak než interní kvíz. Ukládá se spolu se zbytkem nastavení kvízu a vkládá se do tagu <style> na veřejné stránce, a to až po vlastních stylech FluoTestu — takže tvá pravidla mají přednost. Před uložením i před vykreslením se CSS sanitizuje: nesmí obsahovat HTML tagy, pravidla @import, expression() ani odkazy url(), které nemíří na data: URI, a je omezeno na 20 000 znaků.

1. Otevři kvíz, který chceš stylovat, a přejdi na jeho záložku Nastavení.
2. Rozbal sekci „Pokročilé“ a najdi „Vlastní CSS“ (jde o Pro funkci — free účty zde uvidí výzvu k upgradu).
3. Napiš CSS v editoru, cílící na třídy a data atributy uvedené v referenci níže.
4. Klikni na „Náhled“ pro otevření naposledy uložené verze kvízu ve vloženém rámu, nebo ulož a použij běžný odkaz Náhled kvízu pro zobrazení změn naživo.
5. Ulož kvíz. Změny ve Vlastním CSS se na veřejné stránce projeví okamžitě.

Kořenový prvek veřejné stránky kvízu má třídu fluotest-quiz a klíčové prvky mají stabilní data-fluotest-el atributy, takže tvé CSS bude fungovat, i když FluoTest změní své vnitřní stylovací třídy.

Několik běžných úprav pro začátek — zkopíruj, uprav hodnoty a vlož do pole Vlastní CSS.

Uprav barvu a tvar tlačítka

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

Uprav rozestupy otázek a velikost nadpisu

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

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

Přestyluj ukazatel průběhu

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

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

Vlastní CSS je veřejně přístupný vstup, takže se sanitizuje před uložením i znovu před vykreslením:

• Žádné HTML tagy: Cokoliv, co vypadá jako HTML tag (včetně </style>), je odstraněno, takže tvé CSS nikdy nemůže uniknout z kontextu <style>.
• Žádné @import: Pravidla @import jsou odstraněna — jinak by mohla natáhnout externí styly třetí strany.
• Žádné externí url(): Odkazy url() jsou zachovány jen pokud míří na data: URI. Odkazy na externí hostitele jsou odstraněny, aby se zabránilo zneužití ve stylu sledovacích pixelů a smíšenému obsahu.
• Žádné expression(): Zastaralá syntaxe CSS expression() je odstraněna.
• Limit 20 000 znaků: Vše nad limit je oříznuto — to bohatě stačí na úpravy rozestupů, barev a typografie.