Lägg till tema
På panelen Lägg till tema gör du de inställningar du önskar för ditt tema.
Här bestämmer du hur varje komponent ska se ut gällande bland annat färg, formatmall, ikoner och kantlinjer. Följ länken på respektive komponent för att komma till mer utförlig dokumentation.
Under fliken "Avancerat" kan du även hitta funktioner för "Dark mode" och export och import av teman. Läs mer på filken "Avancerat".
Allmänt
Namn
Här fyller du i ett namn på ditt tema.
CSS-klassnamn
Varje tema behöver ett klassnamn. När du har fyllt i Namn så fylls detta fält automatiskt i.
Beskrivning
Här kan du fylla i en beskrivning av ditt tema (om det behövs).
Typsnitt
Här kan du välja mellan typsnitten Arial, Helvetica, Verdana, Times New Roman, Georgia och Courier New eller andra typsnitt som du lagt till under Webbplatsinställningar.
Grundstorlek för typsnitt
Här ställer du in basstorlek på formatmallen. Den ligger till grund och påverkar övriga storlekar. Som exempelvis small, medium, large, x-large. Se exempel på https://github.com/sitevision/envision/blob/master/packages/envision/src/scss/variable.scss Länk till annan webbplats, öppnas i nytt fönster.
När du fyllt i inställningarna och klickar på OK så anropas en tjänst och kompilerar dessa inställningar till en färdig css.
Färg för typsnitt
Här väljer du färg på texten. Färger anges som HEX-värde (#123456) eller i RGB(A)-format (rgba(123, 123, 123, 1)). Du kan också välja färg genom att klicka på färgväljaren. Under färgväljaren visas färgpaletter som hämtas från dina webbplatsfärger som förslag på färger.
Bakgrundsfärg
Du kan även göra inställningar för bakgrundsfärg.
Bakgrundsfärg för en sektion
Du kan även göra inställningar för bakgrundsfärg för en sektion Det används exempelvis som bakgrund på modal och andra större ytor. Det är bra om denna inställningar matchar med bakgrundsfärgen (bara något svagare).
Länkfärg
Här väljer du länkfärg.
Länkfärg för hover
Här väljer du vilken länkfärgen ska vara när du för muspekaren över länken.
Understrykning av länk
Här väljer du om länken ska vara understruken.
Understrykning av länk vid hover
Här väljer du hur länken ska bete sig vid hover.
Storlek på länkikon
Här kan du ställa in storlek på länkikon i antingen em eller px.
Justering i höjdled för ikon
Här kan du justera höjdled för ikon antingen i em eller px.
Storlek på länkmetadatatext
Här kan du ställa in storlek på länkmetadatatext i antingen em eller px.
Kantradie
Här ställer du in kantradie. Ställ in 0 px om du inte vill ha rundade hörn på din kantlinje.
Färg för kantlinje
Här ställer du in färg för din kantradie.
Färg för skugga
Här väljer du färg för skugga. Färger anges som HEX-värde eller väljs genom att klicka på färgväljaren. Under färgväljaren visas färgpaletter som hämtas från dina webbplatsfärger som förslag på färger.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Profilfärg
Profilfärg
Här ställer du in din profilfärg.
Textfärg
Här ställer du in din textfärg. Det står en grön ruta OK ovanför för att visa att kontrasten är tillräckligt bra. Du kan läsa mer om detta på sidan förhandsgranska.
Dämpa färgmättnad i profilfärgpalett
En vald färg har alltid en viss färgmättnad. Du kan välja att göra paletten mer grå, så utifrån den färg som är vald som profilfärg kan du dra ner mättnaden 0-100%. 0 ger samma mättnad och 100% ger maximal dämpning av mättnaden det vill säga helt i gråskala.
Beräkning av textfärg i palett
Det går att välja följande:
- Palettfärger (Standard)
- Textfärg + högkontrast
- Högkontrast (svart/vit)
Dämpa textens färgmättnad i palett
Du kan minska mättnad på profilfärgers textfärg på samma sätt som du kan minska mättnaden på profilfärgerna. 0 ger samma mättnad och 100% ger maximal dämpning av mättnaden det vill säga helt i gråskala.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Innehållstext
Vald textstil
I listan "vald textstil" väljer du den rubrik/text som du vill göra alla inställningar för.
Listan innehåller:
- Rubriker
- Rubrik 1-6
- Alternativrubrik 1-3
- Stycken
- Brödtext 1-4
- Ingress
- Citat 1-2
- Bildtext
- Tabell
- Tabellbeskrivning
- Tabellrubrik
- Tabelldata
Där man kan säga att siffran i exempelvis Brödtext 1-4 innebär att Brödtext 1 är den största texten som standard och så blir den mindre och mindre. Men du själv kan ju ställa in de storlekar du vill på de fyra olika varianterna av brödtext.
För respektive rubrik/text kan du ange följande.
Text
Typsnitt
Här kan du välja mellan typsnitten Arial, Helvetica, Verdana, Times New Roman, Georgia och Courier New eller de webbfonter du lagt till under Webbplatsinställningar.
Storlek
Här anger du textstorlek för ditt typsnitt.
Färg
Här anger du färg för ditt typsnitt.
Vikt
Här anger du vilken vikt som typsnittet ska visas med. Här kan du ange från Thin till Extra Black.
Radavstånd
Här ställer du in radavstånd. Följande finns att välja i listan:
- normal
- 1.5
Teckenavstånd
Här ställer du in avstånd mellan bokstäverna.
Textomvandling
Här kan du välja på följande:
- Inledande versal
- Versaler
- Gemener
Stil
Här väljer du normal eller kursiv.
Marginaler
Marginal upptill
Här gör du inställning av marginalen ovanför textstycken eller rubriker.
Marginal nertill
Här gör du inställning av marginalen nedanför textstycken eller rubriker.
Länkar
Länkfärg
Välj den färg du ska ha som länkfärg.
Länkfärg för hover
Välj den färg du ska ha som länkfärg för hover. Dvs du kan ha en länkfärg på det vanliga typsnittet och en annan länkfärg i ett färgat block som exempelvis en puff.
Understrykning av länk
Här väljer du om länken ska vara understruken eller inte.
Understrykning av länk för hover
Här väljer du om länken ska vara understruken vid hover eller inte.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Gränssnittstext
Vald textstil
Här gör du inställningar för Överliggare, Rubrik, Sektionsrubrik, Underrubrik och Dialogtext.
För respektive rubrik/text kan du ange följande.
Typsnitt
Här kan du välja mellan typsnitten Arial, Helvetica, Verdana, Times New Roman, Georgia och Courier New eller webbfonter som du lagt till under Webbplatsinställningar.
Färg
Här anger du färg för ditt typsnitt.
Storlek
Här anger du textstorlek för ditt typsnitt.
Vikt
Här anger du vilken vikt som typsnittet ska visas med. Här kan du ange från Thin till Extra Black.
Textomvandling
Här kan du välja på följande:
- Inledande versal
- Versaler
- Gemener
Teckenavstånd
Här ställer du in avstånd mellan bokstäverna.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Punktlistor
Här gör du inställningar för hur standard punktlistan och numrerade listan ska se ut i textmodulen.
Liststilar
Stil för punktlista
Här kan du välja någon av följande:
- Punkt
- Cirkel
- Fyrkant
- Ingen
Stil för numrerad lista
Här kan du välja någon av följande:
- Siffror
- Siffror med inledande nolla
- Små bokstäver
- Stora bokstäver
- Små romerska siffror
- Stora romerska siffor
- Ingen
Marginaler för lista
Här kan du ställa in marginaler och avstånd upptill/nertill/vänster och höger för hela listan.
Marginaler för listpunkter
Här kan du ställa in marginaler och avstånd upptill/nertill/vänster och höger för listpunkterna. Exempelvis om du vill ha mer mellanrum mellan punkterna.
Visa marginaler
Om du bockar i visa marginaler så visas en färgkodad vy som ger dig möjlighet att förhandsgranska marginaler och avstånd för listorna.
För Standard/Primär och Sekundär kan du göra följande inställningar:
Bakgrundfärg
Välj den färg som ska vara din bakgrundsfärg.
Textfärg
Välj din textfärg. Se till att det är tillräckligt med kontrast mot bakgrundsfärgen.
Länkfärg
Välj den färg du ska ha som länkfärg.
Länkfärg för hover
Välj den färg du ska ha som länkfärg för hover. Dvs du kan ha en länkfärg på det vanliga typsnittet och en annan länkfärg i ett färgat block som exempelvis en puff.
Understrykning av länk
Här väljer du om länken ska vara understruken eller inte.
Understrykning av länk för hover
Här väljer du om länken ska vara understruken vid hover eller inte.
Färg för kantlinje
Välj den färg du vill ha som kantlinje.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
För Standard/Primär/Sekundär/Framgång/Varning/Fara och Info kan du ange:
Bakgrundsfärg
Här väljer du bakgrundsfärg för elementet.
Textfärg
Här väljer du textfärg för elementet.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Komponenter
Bakgrundsfärg/Textfärg
Här kan du ställa in färg för både bakgrundsfärg/textfärg:
- Neutral
- Aktiv
- Uppmärksamhet
- Fel
Texter
Här kan du ställa in textfärg för :
- Aktiv
- Uppmärksamhet
- Fel
Formulärfält
Typsnitt
Här ställer du in typsnitt.
Bakgrundsfärg
Här ställer du in om du vill ha en bakgrundsfärg i fältet.
Textfärg
Här ställer du in om du vill ha en en annan textfärg i formuläret.
Färg för kantlinje
Här ställer du in om du vill ha en färg för kantlinje i fältet.
Fältetiketter
Typsnitt
Här ställer du in typsnitt för fältetiketter.
Vikt
Här ställer du in vikt för fältetiketter.
Fokusmarkering
Storlek
Här ställer du in om du vill öka storleken på fokusmarkeringen
Avstånd
Här ställer du in om du vill ha mer avstånd mellan formulärsrutan och fokusmarkeringen.
Färg
Här ställer du in om du vill ha en annan färg för fokusmarkeringen än svart.
Färg innanför markering
Här ställer du in om du vill ha en färg för området mellan formulärsrutan och fokusmarkeringen. Det syns bara om du ställt in avstånd.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Typsnitt
Här ställer du in det typsnitt du vill ha på dina brickor.
Storlek
Här ställer du in om du vill ha en annan storlek på brickorna.
Vikt
Här anger du vilken vikt som typsnittet ska visas med. Här kan du ange från Thin till Extra Black.
Textomvandling
Här kan du välja på följande:
- Inledande versal
- Versaler
- Gemener
Teckenavstånd
Här ställer du in avstånd mellan bokstäverna.
Kantradie
Här ställer du in kantradie. Ställ in 0 px om du inte vill ha rundade hörn på dina brickor.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Denna komponent används för att göra utseendeinställningar för knappar. Färginställningar görs under Element.
Typsnitt
Här ställer du in Typsnitt för knapparna.
Kantradie
Här ställer du in kantradie. Ställ in 0 px om du inte vill ha rundade hörn på dina knappar.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Denna komponent används för att göra utseendeinställningar för meddelanderutor. Färginställningar görs under Element.
Typsnitt
Här ställer du in det typsnitt du vill ha på dina meddelanderutor.
Kantradie
Här ställer du in kantradie. Ställ in 0 px om du inte vill ha rundade hörn på din kantlinje runt meddelanderutan.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Denna komponent används för att göra utseendeinställningar för paginering. Färginställningar görs under Element.
Typsnitt
Här väljer du typsnitt för kantlinjen.
Kantlinjens bredd
Här ställer du in bredden på kantlinjen.
Kantlinjens stil
Här ställer du in stil för din kantlinje. Följande alternativ finns:
- Heldragen
- Punkter
- Bindesstreck
- Ingen
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Hopfällbart fält
Denna komponent används för att göra utseendeinställningar för hopfällbara fält.
Allmänt
Färg på ikonen
Här ställer du in färg på ikonen
Kantlinjens stil
Här ställer du in stil på kantlinjen. Följande alternativ finns:
- Heldragen
- Punkter
- Bindesstreck
- Ingen
Ikonens längd
Här kan du ställa in ikonens längd om du vill ha lite större/mindre ikon.
Kantlinjens bredd
Här ställer du in bredd på kantlinjen.
Ikonens tjocklek
Här kan du ställa in ikonens tjocklek om du vill ha lite större/mindre ikon.
Animeringstid i milisekunder
Här kan du ställa in animeringstid innan innhållet i ett hopfällbart fält visas.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Hopfälld
Bakgrundsfärg
Här ställer du in bakgrundsfärg.
Färg för kantlinje
Här ställer du in om du vill ha en färg för kantlinje.
Utfälld
Bakgrundsfärg
Här ställer du in bakgrundsfärg.
Färg för kantlinje
Här ställer du in om du vill ha en färg för kantlinje.
Kantlinje upp- och nertill
Kantlinjens bredd
Här ställer du in bredden på kantlinjen.
Färg för kantlinje
Här ställer du in färg för din kantlinje.
Kantlinje till vänster
Kantlinjens bredd
Här ställer du in bredden på kantlinjen.
Färg för kantlinje
Här ställer du in färg för din kantlinje.
Kantlinje till höger
Kantlinjens bredd
Här ställer du in bredden på kantlinjen.
Färg för kantlinje
Här ställer du in färg för din kantlinje.
Avstånd
Här kan du ange avstånd upptill, nertill, vänster och höger.
Marginaler
Här kan du ange marginal upptill och nertill.
Textfärg
Här kan du välja färg för markerad text.
Bakgrundsfärg
Här kan du välja bakgrundsfärg för markerad text.
Kantradie
Här ställer du i om du vill ha en kantradie på profilbilden. Som standard är profilbilden rund. För att få en fyrkantig profilbild, ange 0px.
Verktygstips
Här ställer du in hur verktygstips ska se ut. Verktygstips (tooltip på engelska) är en liten ruta med förklarande text som dyker upp när användaren lägger muspekaren över ett objekt, till exempel en hyperlänk.
Typsnitt
Här kan du välja mellan typsnitten Arial, Helvetica, Verdana, Times New Roman, Georgia och Courier New eller andra typsnitt som du lagt till under Webbplatsinställningar.
Textstorlek
Här anger du textstorlek för ditt typsnitt.
Bakgrundsfärg
Här ställer du in om du vill ha en bakgrundsfärg i rutan.
Textfärg
Här ställer du in om du vill ha en annan textfärg i rutan.
Vikt
Här anger du vilken vikt som typsnittet ska visas med. Här kan du ange allt från Thin till Extra Black.
Kantradie
Här ställer du in kantradie. Ställ in 0 px om du inte vill ha rundade hörn på din ruta.
Förhandsgranskning
Till höger kan du se en förhandsgranskning av dina inställningar.
Denna funktion kräver att du har behörigheten "Hantera webbplatsinställningar"
Skriv ut sida
help.sitevision.se hänvisar alltid till senaste versionen av Sitevision