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/<namn>.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).
- 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: defaulti 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.
Viktigt
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-<datum>. 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=<namn> 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.
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 rundningen8pxoch 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).