Våre undersøkelser renderes som et eget custom element, som gir mulighet for omfattende tilpasning gjennom CSS-variabler. Dette lar deg bruke din merkevareprofil for å tilpasse utseendet til undersøkelsene.
CSS-variabler
Ved hjelp av følgende CSS-variabler kan du endre farger, skrifttyper og andre stiler:
<style>
skyra-survey {
--skyra-bg-color: #000;
--skyra-text-color: #000;
--skyra-z-index: <ønsket z-index-verdi for widgeten>;
--skyra-interface-color: #000;
--skyra-action-color: #000;
--skyra-action-text-color: #000;
--skyra-secondary-color: #000;
--skyra-link-color: #000;
--skyra-error-color: #000;
--skyra-font-size: 16px;
--skyra-font-body: dine font family
--skyra-font-heading: dine font family for headings
}
</style>
Hva betyr theming-variablene?
font-sizeAngir basis tekststørrelse for widgeten. Denne settes på :host, og underliggende elementer skaleres med em.font-headingFont-familie for overskrifter.font-bodyFont-familie for alt annet innhold.
z-indexBestemmer hvilken z-index widgeten skal benytte. Vår default er maxint så den aldri havner bak noe, men hvis du f.eks har en chatbot du vil skal legge seg over på mobilvisning så kan du her spesifisere en verdi som er høyere enn alt innhold men samtidig lavere enn chatbot.bg-colorBakgrunnsfarge for hele widgeten. Bør ha tilstrekkelig kontrast til andre farger og tilpasses din nettsides bakgrunnsfarge. (Brukes stort sett ikke på de kortene som er i en findability survey, men tenk den som bakgrunnsfargen til hele widgeten.)interface-colorBrukes til rammer og ikoner.action-colorBakgrunnsfarge på "neste"-knappen.action-text-colorTekstfarge på "neste"-knappen.error-colorFeilmeldingsfarge. Brukes ikke i Findability-skjema enn så lenge men for fremtidsikring bør det være en rød feilfarge med nok kontrast mot bg-color
Style en bestemt undersøkelse
Du kan bruke en mer spesifikk CSS-selektor for å style en bestemt undersøkelse:
skyra-survey[slug="min-konto/min-undersøkelse"] {
}
Avansert theming
For mer spesifikke justeringer kan du bruke CSS ::part()-selektoren (hvis dere absolutt må skreddersy mer.) Dette lar deg overstyre individuelle deler av widgeten.
💡 Merk: Avansert tilpasning kan påvirkes av fremtidige oppdateringer i widgetens oppbygning.
Følgende parts er tilgjengelige for tilpasning:
heading: Overskrifter.button-primary: Primære knapper.description: Tekstbeskrivelser.wrapper: Selve skyra-popupen. Brukes for å tilpasse posisjonering
skyra-survey::part(wrapper) {
bottom: 2rem;
right: 2rem;
top: auto; // Trengs kanskje basert på hvilken posisjon survey har i settings
left: auto; // Trengs kanskje basert på hvilken posisjon survey har i
}
Eksempel: Juster plasseringen av undersøkelsen med CSS
For å unngå at undersøkelsen overlapper viktige elementer på nettsiden, kan du tilpasse plasseringen ved hjelp av CSS. Dette gjøres ved å bruke ::part(wrapper)-selektoren. La oss si at vi vil flytte undersøkelsen litt høyere opp på skjermen. Da kan vi skrive:
I dette eksempelet:
skyra-surveyer vårt custom element (hele undersøkelsen).::part(wrapper)gir tilgang til den "boksen" undersøkelsen ligger i.bottom: 5rem;flytter undersøkelsen oppover på skjermen.right: 1rem;sørger for at den ikke er helt i hjørnet.
Hva er ::part(wrapper)-selektoren?
::part(wrapper) er en spesiell CSS-selektor som brukes til å tilpasse deler av et custom element.
Hva betyr det i praksis?
Normalt kan du style vanlige HTML-elementer som <div>, <p>, eller <button> rett i CSS. Men noen spesielle komponenter, som vår undersøkelses-widget (<skyra-survey>), er laget som "custom elements". Disse fungerer litt annerledes, og det er ikke mulig å style dem direkte med vanlig CSS.
Derfor bruker vi ::part()-selektoren for å få tilgang til spesifikke deler av widgeten som er laget for å kunne tilpasses.