--- title: Presets url: 'https://groovy.simplo.dev/handbok/utseende/presets' updated: '2026-10-30' description: 'Vad en preset är och hur du arbetar med dem.' --- # Presets Vad en preset är och hur du arbetar med dem. En preset är en namngiven uppsättning utseendeinställningar, sparad som en fil i `public/user/data/groovy-docs/presets/.yaml`. **Utseendet finns bara i presets:** en sajt ser ut som sin preset. - **Den innehåller bara utseende:** färger, typsnitt, storlekar, layout, header, footer. **Funktioner ingår aldrig,** till exempel redigering, bilagor, versioner, export och per-sida-lägen. Inte heller sajtens logga, texten vid loggan, länkarna i sidhuvudet, GitHub-länken och sidfotens text: de ställs in per sajt i sajtens **Site-Admin** → *Inställningar*, fliken *Identitet* (se [Editors och site-admins](https://groovy.simplo.dev/handbok/atkomst/redaktorer)). - **En preset kan ha en egen logga,** under fliken *Branding*: *Preset logo* och *Preset logo (dark mode)*. Den visas bara på en sajt som inte har någon egen logga. Har sajten en egen logga, också bara den för mörkt läge, visas ingen av presetens. Bilderna väljs och laddas upp som hero-paletten, nedan. - **Default** finns alltid och kan inte ändras: temats eget utseende. En sajt utan preset ser ut som Default. - **En preset innehåller bara det som skiljer sig från Default.** Allt annat är temats standard. - **En hel design** (*Hela designen*, `base: default` i filen) spelar roll när den väljs för en gren. Den läggs då direkt på Default och ser likadan ut var den än används. En preset utan märkningen läggs på sajtens preset. Som sajtens preset gör märkningen ingen skillnad. - **Ska en sajt avvika i ett fält** får den en egen preset: en kopia av den den har, med fältet ändrat. ## Konstruera presets i System-Admin System-admin och super-admin skapar, ändrar och tar bort presets i **System-Admin** → *Presets*. Det är enda stället där utseendet ändras. - **Listan** visar varje preset och var den används: vilka sajter som har den som sin preset, och vilka sidor som anger den. - **Ny preset:** skriv en titel, välj vad den ska vara en kopia av och välj *Skapa*. En kopia av *Default* ändrar ingenting förrän du ändrar ett fält. - **Ändra:** pennan öppnar preseten som ett formulär, med alla utseendefält i temats flikar och grupper. - Sök efter ett fält i sökrutan, eller kryssa i *Bara ändrade* för att bara se det preseten ändrar. - Ett fält preseten inte sätter visar temats standard, med *Temats standard* vid fältet. Ett val har då första läget *Temats standard: …*. *Återställ* tar fältet ur preseten. - Ett färgfält som är tomt från början har valet *Inte i preseten*eller *Egen färg*. Fältet säger vad det följer, till exempel accentfärgen. - Hero-paletten ändras rad för rad. En rads bild väljer du bland bilderna som redan finns, eller skriver dess sökväg. Bara super-admin kan ladda upp en ny bild, med *Ladda upp* vid fältet. Presetens logga väljs och laddas upp på samma sätt. - En egen bredd (*Custom content width*, *Custom sidebar width*) gör valet ovanför till *Custom* när du sparar. Tömmer du den blir valet *Normal*. - Titeln byter du överst i formuläret. Namnet går inte att byta. - Inget sparas förrän du väljer *Spara*. - **Ta bort:** papperskorgen. Används preseten får du först se var, och måste kryssa i att du förstår. - **Förhandsvisa** öppnar startsidan med preseten som den är sparad. Klickar du vidare följer preseten med inom sajten. En list överst säger vilken preset du ser; *Avsluta förhandsvisningen* visar samma sida utan den. Ingenting sparas: en ny flik eller en adress utan `?preset=` visar sajten som vanligt, och ingen annan ser preseten. ## Kontrast Varje preset prövas mot kravet i WCAG, nivå AA, i både ljust och mörkt läge. Text ska ha minst 4.5 gånger så hög kontrast som sin bakgrund. Ramar och ikoner som måste synas ska ha minst 3. - En preset som inte klarar det märks **Under AA** i listan. Öppnar du den står det vilka färger som är för svaga, i vilket läge och vilka fält som avgör. - Den sparas ändå, så att du kan arbeta i flera steg. Använd den inte förrän märket är borta. - En bakgrund med övertoning går inte att mäta. Titta på den själv i båda lägena. - **Ett tomt mörkt fält tar det ljusa värdet**, inte temats mörka. Sätter du en ljus bakgrund får mörkt läge den också, om du inte sätter en mörk. Undantag: grundfärgerna i fliken General och områdenas linjefärger. Mörkt läge har där alltid sitt eget värde. - **Dämpad text** (*Muted text* i General) prövas mot sidan och mot sidomenyn. Den gäller bland annat sidomenyns länkar, innehållsförteckningen, brödsmulorna och sidfoten. - **Länkfärgen gäller all text i accentfärgen:** länkar, sekundära knappar (om fliken *Buttons* inte ger dem en egen färg) och den aktuella länken i menyn. I mörkt läge använder temat en ljusare blå. Med en egen accentfärg gäller den också i mörkt läge; blir den för mörk där, sätt *Color (dark mode)* under *Body links — text style* i fliken *Content — links*. > [!IMPORTANT] > En sparning gäller direkt på alla sajter och sidor som använder preseten. Vill du prova först: gör en kopia, ändra kopian och titta på den med *Förhandsvisa*. Före varje ändring sparas preseten som den var, som en egen preset med namnet `backup-`. Säkerhetskopiorna visas med *Visa säkerhetskopior*. De rensas inte automatiskt; ta bort dem när du inte behöver dem. En säkerhetskopia går inte att välja för en sajt eller en sida. För att få tillbaka ett gammalt utseende: gör en ny preset som en kopia av säkerhetskopian. ## Välja preset | Vill du … | Gör så här | |---|---| | ge en hel sajt en preset | **Preset** i sajtens **Site-Admin** → *Inställningar*. Super-admin också i sajtens Admin under *Presets* → **Site preset**. | | ge en gren en preset | *Settings preset* på grenens översta sida. | | se hur en sida ser ut med en preset | Lägg till `?preset=` på adressen (`?preset=default`, `?preset=base`). Fungerar för den som får redigera sidor. | | radera en preset | **Delete preset** i Admin, eller papperskorgen i **System-Admin** → *Presets*. Sidor som använder den får sajtens preset, och en sajt som har den får Default. | Admin har inga utseendefält. Fliken *Presets* där har bara sajtens val och *Delete preset*. Listan *Presets on this site* visar varje preset och om den är en hel design, vilka sidor och sajter som använder den, och namn som något pekar på men som saknas. Presets kan också läsas och skrivas via API:t `/api/v1/docs-presets/`, och av en AI-klient: [Koppla in en AI-klient](https://groovy.simplo.dev/handbok/atkomst/ai-klient). ## Bra att veta - **Färger har ofta separata fält** för ljust och mörkt läge. - **Ett fält kan följa en annan inställning.** Valet heter då vad det följer, till exempel *Same as All headings* för en rubriknivås vikt eller *Follow layout* för sidfotens textjustering. - **Valet för rörelse heter *Motion profile*** (fliken Motion): Instant, Snappy, Smooth eller Custom. Det är inte en preset. - **Sidomenyn kan bli minimerbar och få dragbar bredd:** *Collapsible sidebar* och *Resizable sidebar* i fliken Sidebar, båda av i Default. - **Toppmenyn kan stå till vänster, i mitten eller till höger** i layouterna med toppnavigering: *Menu position* i fliken Header — mega menu. Där väljs också avståndet mellan punkterna och hur sidan man är på markeras: med starkare text i en egen färg, också med ett streck under punkten, eller inte alls. Default har menyn till vänster och markerar med starkare text. - **Sidhuvudet kan få två eller tre rader** i layouterna med toppnavigering, i fliken *Header — layout*. *A row above the header*ger en smal rad överst med sajtens egna länkar, till exempel andra webbplatser eller *Om oss*. *The menu in a row of its own* lägger toppmenyn och sökikonen i en egen rad under raden med loggan. Båda raderna kan få egen bakgrund i ljust och mörkt läge, och går att kombinera. Länkarna i den översta raden ställs in per sajt (fliken *Identitet*), deras färg och textstil i *Header — links*. På en mobilskärm är sidhuvudet en rad, och länkarna står sist i menyn. Default har en rad. - **Knapparna kan få egen form och färg** i fliken *Buttons*: rundningen från rak (`0px`) till helt rund (`999px`), och den fyllda knappens och konturknappens färger i ljust och mörkt läge. Det gäller alla knappar på sajten: knappgrupper, heroknappen, knapparna i sidhuvudet och inloggningssidan. Kontrollen prövar knapparnas text. Default har rundningen `8px` och accentfärgen. - **Grundvärdena för hela sajten** står i fliken *General*: färgen på linjer och ramar, dämpad text och ljusa ytor (i ljust och mörkt läge), och rundningen av kort, rutor, kodblock, bilder, sökrutan och sidomenyns länkar (*Corner rounding*, `0px` = raka hörn). Rubrikernas radavstånd och luft ovanför och under ställs in per nivå i *Content — headings*, och länkens färg under pekaren i *Content — links*. - **Varje område kan få egna kanter och egen luft.** Sidhuvudet kan ha en linje, en skugga i stället, eller inget (*Bottom edge*), padding åt sidorna och en största bredd för innehållet, så att det linjerar med en centrerad sida. Sidomenyn kan få linjen mot sidan av eller i egen färg, egen padding, avstånd mellan länkarna och en rak eller rundad aktiv länk. Innehållsförteckningens och sidfotens linjer kan få egen färg. En mörk sidomeny utan ljus linje: sätt sidomenyns färger och slå av *Line between the sidebar and the page*. Default ser ut som förut. - **Texterna kan få versaler och spärrning** i sina textstilar: *Letter case* (normal eller versaler) och *Letter spacing* (avståndet mellan bokstäverna, t.ex. `0.08em`; tomt = inget). Det finns för sajtnamnet, länkarna i sidhuvudet, toppmenyn, sidomenyns länkar och grupprubriker, rubrikerna, brödsmulorna, sidinfon, innehållsförteckningen, föregående/nästa, sidfoten och sökresultaten, men inte för brödtexten. Default har versaler och lite spärrning på sidomenyns grupprubriker och på den minsta rubriknivån (H6). --- ## Navigation - Parent: [Utseende](https://groovy.simplo.dev/handbok/utseende.md) - Previous: [Lagren](https://groovy.simplo.dev/handbok/utseende/lagren.md) - Next: [Åtkomst](https://groovy.simplo.dev/handbok/atkomst.md)