# Utseende > Handbok · 2026-10-30 · https://groovy.simplo.dev/handbok/utseende Temainställningar, lagren och presets. > [!SUBPAGES 1 descriptions] ## Temainställningar Var inställningarna finns och hur de fungerar. Temats inställningar finns på två ställen, beroende på vad de gäller: - **Det som gäller hela installationen** ändras i **System-Admin** → *Temainställningar*, av en super-admin. Det är valen som gäller alla sajter lika, och grundvärdena som varje sajt ärver. - **Det som är en sajts eget** ändras i sajtens **Site-Admin** → *Inställningar*: sajtens preset, funktioner och identitet (loggan, texten vid den, länkarna i sidhuvudet, GitHub-länken, sidfotens text). Det gör sajtens site-admin. En super-admin ändrar där också sajtens övriga värden (se [Editors och site-admins](https://groovy.simplo.dev/handbok/atkomst/redaktorer)). En logga som laddas upp där hamnar i sajtens egen mapp. Samma inställningar finns också i Admin (Themes → Groovy Docs). Admin och *Temainställningar* sparar i samma fil. **Utseendet finns inte här.** Färger, typsnitt, storlekar och layout är sajtens preset, och ändras i **System-Admin** → *Presets* (se [Presets](https://groovy.simplo.dev/handbok/utseende/presets)). ### Temainställningar i System-Admin - **Här ändrar du det som gäller alla sajter.** Det finns ingen sajt att välja. Med flera sajter heter det du ändrar *Alla sajter*: grunden som varje sajt bygger på. En sajt som har satt samma inställning själv behåller sitt värde. Utan flera sajter står det *Den här sajten*. - **En sajts egna inställningar finns inte här.** Överst står att de ställs in i sajtens **Site-Admin** → *Inställningar*, med en länk till grundsajtens. - **Första fliken, *Whole installation*,** har valen som gäller alla sajter lika och som ingen sajt kan ändra själv: sajtväljarens läge, inbäddningsläget, *Show System-Admin* och hur länge papperskorgarna sparar sidor. Varje val står under rubriken för fliken det hör till. - **Sedan kommer de andra flikarna,** ordnade efter var på sidan inställningen syns: General, Header, Content och Search. Sist kommer flikarna för funktioner: Presets, Editing, Attachments och Versions. - **Vid varje fält står varifrån värdet kommer:** - *Alla sajter* eller *Den här sajten*: sparat här; - *Temats standard*: ingen har ändrat det. - ***à terställ*** tar bort det sparade värdet. Fältet visar då temats standard. ***Bara ändrade*** visar bara det som är sparat, och sökrutan söker i alla flikar. - **Överst står också att *Alla sajter* inte har något utseende:** varje sajt ser ut som sin preset. Länken leder till *Presets*. - **Listor** (extra sajter i sajtväljaren) ändras rad för rad: *Lägg till rad*, pilarna flyttar en rad, papperskorgen tar bort den. - **Inget sparas förrän du väljer *Spara*.** Bredvid knappen står hur många ändringar som väntar, och varje flik visar sitt antal. *à ngra* tar tillbaka allt som inte är sparat. Ladda om en sida på sajten för att se ändringen. - **Vem som får läsa en sajt** bestämmer du i sajtens **Site-Admin** → *à tkomst*. - **Fliken *Presets*** har preseten för kontrollpanelerna. Sajtens preset väljs i sajtens **Site-Admin** → *Inställningar*. Själva preseten ändras i *Presets* (se [Presets](https://groovy.simplo.dev/handbok/utseende/presets)). > [!WARNING] > *Enable frontend editing*, *Show Site-Admin* och *Show System-Admin* > stänger något: redigeringen och Site-Admin i varje sajt som inte satt > valet själv, eller System-Admin, där du står. Du måste kryssa i *Jag > förstår* innan du kan spara. Redigeringen och Site-Admin slår du på > igen här. System-Admin slår du på igen i Admin, under Themes → Groovy > Docs → Editing. ### Gränssnittets språk Temats gränssnitt finns på engelska och svenska. Sajten väljer ett av dem. - **Inställningen heter *Interface language*,** under General → *Language*. Standard är engelska. - **För alla sajter** sätter du den i **System-Admin** → *Temainställningar*. En sajt ärver det värdet. - **För en enskild sajt** sätter en super-admin den i sajtens **Site-Admin** → *Inställningar*. En site-admin kan inte ändra språket. - **Det som följer språket:** allt läsaren ser (menyerna, sökningen, innehållsförteckningen, rutornas rubriker, blocken, utskriften och exporterna), inloggningen, personens panel, redigeringen och kontrollpanelerna. - **Innehållet översätts inte.** Sidorna står på det språk de är skrivna på. Det finns ingen språkväljare för läsaren. - **Kvar på engelska:** - fältens namn och hjälptexter i inställningsformulären (*Temainställningar*, *Presets* och Site-Admin → *Inställningar*); - Admin; - avsnitten som kommer från pluginen, till exempel *Members* och *Domain accounts*; - sidans Markdown-adress, `llms.txt` och AI-klientens verktyg. - **Mejlen följer en egen inställning,** *Mail language* (se [Inloggning → Mejlen](https://groovy.simplo.dev/handbok/atkomst/inloggning)). Sätt båda om allt ska vara på samma språk. - **Rubriker som står kvar på standardtexten följer språket.** Det gäller rubriken över innehållsförteckningen ("On this page") och orden i sidinfon ("Created", "Updated", "by"). Har du skrivit en egen text visas den som den står. ### Admin är reservvägen Themes → Groovy Docs i Admin har samma inställningar, också när System-Admin är avstängd. Utseendet finns inte där heller: överst står att det är sajtens preset, med en länk till **System-Admin** → *Presets*. Överst på varje flik står var inställningarna också ändras och varifrån värdena kommer, se [Admin: en per sajt](https://groovy.simplo.dev/handbok/kom-igang/admin). ### Bra att veta - **Varje fält visar värdet som gäller.** Har ingen ändrat fältet står temats standard där (*Temats standard*). - **I Admin står härkomsten överst på varje flik** i stället för vid fältet: - *You are changing* säger om du ändrar alla sajter eller bara en; - *Set for this site* räknar upp fälten sajten har satt själv; - *Inherited from All sites* räknar upp fälten som grundsajten har ändrat och som sajten ärver. - **↺ vid en etikett i Admin** betyder att värdet är sparat för sajten. Klicka på den för att gå tillbaka till det ärvda värdet. Ladda om Admin efter en sparning för att se raderna överst uppdaterade. - **Vissa funktioner kan styras per sida:** innehållsförteckning, föregående/nästa, brödsmulor, sidinfo, grenexport och Word-export. 1. Temat väljer läge: *av*, *på för alla* eller *på bara där sidan säger på*. 2. Sidan säger *ärv*, *på* eller *av*, och undersidorna ärver värdet. 3. **Av i temat vinner alltid.** - **Valfria funktioner är av tills de slås på:** frontend-redigering, sidhistorik, versioner, grenexport och sidinfo. Kontrollpanelerna är undantaget: *Show Site-Admin* och *Show System-Admin* är på. - **Sajtens site-admin ställer in sajten utan Admin:** utkast, sidhistorik, versioner, taggar, sidinfo, grenexport och sajtens identitet finns också i **Site-Admin** → *Inställningar* (se [Editors och site-admins → Inställningar](https://groovy.simplo.dev/handbok/atkomst/redaktorer)). Med flera sajter är de valen varje sajts egna och ärvs inte från grundsajten. ## Lagren Default, sajtens preset, grenens preset och sidans egna värden. Sidans utseende byggs av fyra lager, där ett högre lager vinner över ett lägre: 1. **Default:** temats eget utseende. Det går inte att ändra. 2. **Sajtens preset:** väljs av sajtens site-admin i **Site-Admin** → *Inställningar*. Super-admin väljer den också i **System-Admin** → *Temainställningar* (fliken Presets) eller i Admin under *Presets → Site preset*. En sajt utan preset ser ut som Default. 3. **Grenens preset:** väljs på en sida och gäller den och allt under den. I Admin under sidans *Docs → Settings preset*, i redigeringsläget under *Inställningar → Utseende → Preset*. En hel design läggs direkt på Default. En preset med bara några ändringar läggs på sajtens preset. 4. **Sidans egna värden** i dess frontmatter. *Site preset* (`base`) som grenens preset tar bort grenens preset. Grenen visas då med sajtens preset. **Utseendet finns bara i presets.** Ett utseendevärde i temainställningarna har ingen verkan. Övriga inställningar (loggan, länkarna i sidhuvudet, sidfotens text, funktionerna) har egna lager: temats standard, *Alla sajter* och sajtens egna värden (se [Temainställningar](https://groovy.simplo.dev/handbok/utseende/installningar)). **Så ger du en sajt ett eget utseende:** välj en preset som sajtens preset. Ska sajten avvika i ett enda fält: gör en kopia av preseten, ändra kopian och välj den för sajten. Då finns bara två frågor: - Ändrar jag **en preset**? Då ändras alla sajter och grenar som använder den. - Byter jag **preset för en sajt**? Då ändras bara den sajten. Hälsokontrollen varnar om en temainställning har utseendevärden: de har ingen verkan och kan tas bort. ## 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).