Dokumentation

Tema

Lund (.sv-theme-lund)

Mörkt tema (.sv-theme-dark)

Rubriker och texter (formatmallar)

Hämtar från innehållstexter i temat:

• Rubrik 1 → Innehållstext → Rubrik / 01
• Rubrik 2 → Innehållstext → Rubrik / 02
• Rubrik 3 → Innehållstext → Rubrik / 03
• Rubrik 4 → Innehållstext → Rubrik / 04
• Vit tabellrubrik → Innehållstext → Alternativrubrik / 01
• Dekorationsrubrik → Innehållstext → Alternativrubrik / 02
• Brödtext → Innehållstext → Brödtext / 01
• Vit brödtext → Innehållstext → Brödtext / 02
• Detaljer → Innehållstext → Brödtext / 03
• Formulärbeskrivning → Innehållstext → Brödtext / 04
• Ingress → Innehållstext → Ingress / 01
• Tabellrubrik → Innehållstext → Tabellrubrik / 01
• Tabelldata → Innehållstext → Tabelldata / 01
• Tabellbeskrivning → Innehållstext → Tabellbeskrivning / 01

Sidhuvud

• Bakgrundsfärg: Profilfärg→ Profilfärg
• Textfärg: Profilfärg→ Textfärg

Sök, Kontakt och Menyknapp:

• Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Standard
• Textfärg: Elementfärger→ Textfärg → Standard
• Hover:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Primär
  • Textfärg: Elementfärger→ Bakgrundsfärg → Textfärg

Sökfunktion i sidhuvudet:

Inputfältet:

• Bakgrundsfärg: Formulärfält och fokus → Formulärfält → Bakgrundsfärg
• Textfärg: Formulärfält och fokus → Formulärfält → Textfärg

Sökknappen:

• Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Sekundär
• Textfärg: Elementfärger→ Textfärg→ Sekundär
• Hover: Elementfärger→ Bakgrundsfärg → Standard

Sidfot

• Bakgrundsfärg: Profilfärg→ Profilfärg
• Textfärg: Profilfärg→ Textfärg
  
• Ikoner:
  • Bakgrund: Elementfärger→ Bakgrundsfärg → Sekundär
  • Textfärg: Elementfärger→ Textfärg → Sekundär
• Hover: Statusfärger → Komponenter → Bakgrundsfärg Aktiv

VMA/VMA - Info

Con VMA

• Bakgrundsfärg: Statusfärger → Komponenter → Bakgrundsfärg Aktiv
• Textfärg: Statusfärger → Komponenter → Textfärg Aktiv
• Ikon
  • Bakgrundsfärg: Statusfärger → Komponenter → Textfärg Fel
  • Textfärg: Statusfärger → Komponenter → Bakgrundsfärg Fel

Con VMA-Info

• Bakgrundsfärg: Statusfärger → Komponenter → Bakgrundsfärg Aktiv
• Textfärg: Statusfärger → Komponenter → Textfärg Aktiv
  
• Ikon
  • Bakgrundsfärg: Statusfärger → Komponenter → Textfärg Fel
  • Textfärg: Statusfärger → Komponenter → Bakgrundsfärg Uppmärksamhet

Meny

Det finns i dagsläget inga specifika inställningar för meny i temat. Därför har vi satt upp det enligt följande:

Stängknapp:

• Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Standard
• Textfärg: Elementfärger→ Textfärg → Standard
• Hover:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Primär
  • Textfärg: Elementfärger→ Bakgrundsfärg → Textfärg

Plusknapp:

• Bakgrundsfärg: Ingen
• Textfärg: Elementfärger→ Textfärg → Standard
• Hover:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Primär
  • Textfärg: Elementfärger→ Bakgrundsfärg → Textfärg

Aktiv sida:

• Bakgrundsfärg: Statusfärger → Komponenter → Bakgrundsfärg Aktiv
  

Länkar i botten:

• Bakgrundsfärg: Blockfärger → Standard→ Bakgrundsfärg
• Textfärg: Blockfärger → Standard→ Textfärg

Steg 1:

• Bakgrundsfärg: Blockfärger → Standard→ Bakgrundsfärg
• Textfärg: Blockfärger → Standard→ Textfärg
• Border: Blockfärger → Standard→ Färg för kantlinje
  

Steg 2:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär → Textfärg
• Border: Blockfärger → Standard→ Färg för kantlinje

Steg 3:

• Bakgrundsfärg: Grundläggande → Bakgrundsfärg
• Textfärg: Grundläggande → Textfärg
• Border: Blockfärger → Standard→ Färg för kantlinje

Våra andra webbplatser

• Bakgrundsfärg: Blockfärger → Standard→ Bakgrundsfärg
• Rubrikfärg: Blockfärger → Standard→ Textfärg
• Länkar: Blockfärger → Standard→ Länkfärg
  
• Länkar - hover: Blockfärger→ Standard→ Länkfärg för hover
• Border: Blockfärger → Standard→ Textfärg

Dekorationer

Faktaruta:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
  
• Länkar: Blockfärger → Primär→ Länkfärg
  
• Länkar - hover: Blockfärger→ Primär→ Länkfärg för hover
  

Länk med pil:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
  
• Länkar: Blockfärger → Primär→ Länkfärg
  
• Länkar - hover: Blockfärger→ Primär→ Länkfärg för hover
• Ikon:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Primär
  • Textfärg: Elementfärger→ Textfärg → Primär
    
  • Hover: Blockfärger→ Primär→ Länkfärg för hover

Accordions

Hopfälld:

• Bakgrundsfärg: Hopfällbart fält→ Hopfälld→ Bakgrundsfärg
• Textfärg: Elementfärger→ Textfärg → Primär
• Ikon:  Hopfällbart fält→ Allmänt → Färg på ikonen

Utfälld:

• Bakgrundsfärg: Hopfällbart fält→ Utfälld→ Bakgrundsfärg
• Textfärg: Grundläggande → Sektionsbakgrund
• Ikon: Grundläggande → Sektionsbakgrund

Blockcitat

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
  
• Länkar: Blockfärger → Primär→ Länkfärg
  
• Länkar - hover: Blockfärger→ Primär→ Länkfärg för hover

Tabell

Texter:

• Tabellrubrik: Innehållstext → Tabellrubrik / 01
• Tabelldata: Innehållstext → Tabelldata / 01
• Tabellbeskrivning: Innehållstext → Tabellbeskrivning / 01

Bakgrundsfärger:

• Vit: Grundläggande → Bakgrundsfärg
• Grön: Blockfärger → Primär→ Bakgrundsfärg

Hjälpte informationen dig

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
  
• Knappar (Border): Blockfärger → Primär→ Färg för kantlinje

Formulär vid klick på "Nej":

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
• Inputfält:
  • Bakgrundsfärg: Formulärfält och fokus → Formulärfält → Bakgrundsfärg
  • Textfärg: Formulärfält och fokus → Formulärfält → Textfärg
  • Kantlinje : Formulärfält och fokus → Formulärfält → Kantlinje

Uppdaterd

• Textfärg: Innehållstext → Bildtext
  (Eftersom Bildtext och Uppdatera använder samma färg används denna även här.)

Dela sidan

• Textfärg: Innehållstext → Bildtext
  (Eftersom Bildtext och Uppdatera använder samma färg används denna även här.)
• Länkar: Grundläggande → Länkfärg
• Länkar (Hover): Grundläggande → Länkfärg för hover
• Ikoner:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Primär
  • Textfärg: Elementfärger→ Textfärg → Primär
  • Hover: Grundläggande → Länkfärg för hover

Hitta snabbt

• Rubrikfärg: Innehållstexter→ Rubrik / 02
• Knappar:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg → Info
  • Textfärg: Elementfärger→ Textfärg → Info
    
• Hover:
  • Bakgrundsfärg: Elementfärger→ Textfärg → Info
  • Textfärg: Elementfärger→ Bakgrundsfärg → Info

Navigationspuffar

• Bakgrundsfärg: Profilfärg→ Profilfärg

Puffar:

• Bakgrundsfärg: Grundläggande → Sektionsbakgrund
• Textfärg: Grundläggande → Färg för typsnitt
• Ikon: Grundläggande → Färg för typsnitt

Bildpuffar

• Bakgrundsfärg: Blockfärger → Sekundär → Bakgrundsfärg

Puffar:

• Inställning i webbappen

Aktuellt

• Bakgrundsfärg: Blockfärger → Sekundär → Bakgrundsfärg

Innehåll på sidan

• Textfärg: Grundläggande → Färg för typsnitt
• Kantlinjefärg: Grundläggande → Färg för kantlinje
• Aktiv markör: Statusfärger→ Komponenter→ Bakgrundsfärg → Uppmärksamhet

Evenemang

Startsidan:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
  

Eventkort:

• Val i webbapp.

Evenemangskalender:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg

Eventkort:

• Val i webbapp.

Servicemeddelanden

• Bakgrundsfärg: Blockfärger → Sekundär→ Bakgrundsfärg
• Textfärg: Blockfärger → Sekundär→ Textfärg
• Border: Blockfärger → Primär→ Färg för kantlinje
• Ikon (framför datum): Grundläggande → Färg för typsnitt

Nyheter

Startsidan:

• Border: Blockfärger → Sekundär→ Färg för kantlinje
• Bakgrundsfärg: Grundläggande → Sektionsbakgrund
• Textfärg: Grundläggande → Färg för typsnitt
• Ikon (framför datum): Statusfärger → Komponenter → Bakgrundsfärg Aktiv

Alla nyheter (nyhetslistning):

Bakgrundsfärg:

• Vit: Grundläggande → Bakgrundsfärg
• Rosa: Blockfärger → Sekundär→ Bakgrundsfärg
  

Sökruta:

• Bakgrundsfärg: Formulärfält och fokus → Formulärfält → Bakgrundsfärg
• Textfärg: Formulärfält och fokus → Formulärfält → Textfärg
• Border: Formulärfält och fokus → Formulärfält → Kantlinje
• Knapp:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär
  • Textfärg: Elementfärger→ Textfärg→ Primär

Filtreringsknapp:

• Bakgrundsfärg: Ingen
• Textfärg: Elementfärger→ Textfärg→ Sekundär
• Border: Elementfärger→ Textfärg→ Sekundär
• Hover:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär
  • Textfärg: Elementfärger→ Textfärg→ Primär
    

Resultatträff (hit):

• Border: Blockfärger → Standard→ Färg för kantlinje
• Textfärg: Grundläggande → Färg för typsnitt
• Ikon (framför datum): Statusfärger→ Komponenter→ Bakgrundsfärg → Aktiv

Pagenering:

Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär

Textfärg: Elementfärger→ Textfärg→ Primär

Sökresultatssida

Bakgrundsfärg:

• Vit: Grundläggande → Bakgrundsfärg
• Rosa: Blockfärger → Sekundär→ Bakgrundsfärg
  

Sökruta:

• Bakgrundsfärg: Formulärfält och fokus → Formulärfält → Bakgrundsfärg
• Textfärg: Formulärfält och fokus → Formulärfält → Textfärg
• Border: Formulärfält och fokus → Formulärfält → Kantlinje
• Knapp:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär
  • Textfärg: Elementfärger→ Textfärg→ Primär

Filtreringsknapp:

• Bakgrundsfärg: Ingen
• Textfärg: Elementfärger→ Textfärg→ Sekundär
• Border: Elementfärger→ Textfärg→ Sekundär
• Hover:
  • Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär
  • Textfärg: Elementfärger→ Textfärg→ Primär
    

Resultatträff (hit):

• Border: Blockfärger → Standard→ Färg för kantlinje
• Textfärg: Grundläggande → Färg för typsnitt
• Ikon (framför datum): Statusfärger→ Komponenter→ Bakgrundsfärg → Aktiv

Pagenering:

Bakgrundsfärg: Elementfärger→ Bakgrundsfärg→ Primär

Textfärg: Elementfärger→ Textfärg→ Primär

Nya dekorationer

Vi har satt upp 3 nya dekorationer som då hämtar inställningar från block i temat. Dessa kan användas istället för att sätta bakgrund på rad/text moduler.

Inforuta (Block Standard):

• Bakgrundsfärg: Blockfärger → Standard→ Bakgrundsfärg
• Textfärg: Blockfärger → Standard→ Textfärg
• Länkfärg: Blockfärger → Standard→ Länkfärg
• Länkfärg för hover: Blockfärger → Standard→ Länkfärg för hover
• Färg för kantlinje: Blockfärger → Standard→ Färg för kantlinje

Inforuta (Block Primär):

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
• Länkfärg: Blockfärger → Primär→ Länkfärg
• Länkfärg för hover: Blockfärger → Primär→ Länkfärg för hover
• Färg för kantlinje: Blockfärger → Primär→ Färg för kantlinje

Inforuta (Block Sekundär):

• Bakgrundsfärg: Blockfärger → Sekundär→ Bakgrundsfärg
• Textfärg: Blockfärger → Sekundär→ Textfärg
• Länkfärg: Blockfärger → Sekundär→ Länkfärg
• Länkfärg för hover: Blockfärger → Sekundär→ Länkfärg för hover
• Färg för kantlinje: Blockfärger → Sekundär→ Färg för kantlinje

"Gamla" dekorationer

De fanns några dekorationer som används på webben och dessa kan ni fortsätta använda. Nedan ser ni vilka kopplingar de har till temat.

Faktaruta:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
• Länkfärg: Blockfärger → Primär→ Länkfärg
• Länkfärg för hover: Blockfärger → Primär→ Länkfärg för hover
• Färg för kantlinje: Blockfärger → Primär→ Färg för kantlinje

Länk med pil:

• Bakgrundsfärg: Blockfärger → Primär→ Bakgrundsfärg
• Textfärg: Blockfärger → Primär→ Textfärg
• Länkfärg: Blockfärger → Primär→ Länkfärg
• Länkfärg för hover: Blockfärger → Primär→ Länkfärg för hover
• Färg för kantlinje: Blockfärger → Primär→ Färg för kantlinje

Ikoner

Ikoner som är utbytta till Font Awesome:

• Dekorationslänk med pil

Övrig information

Vilka komponenter eller delar på sidan som inte är uppdaterade med temavariabler är:

• Ikoner - Vi har bytt ikonen för "Länk med pil" till en fontawesome ikon, övriga ikoner är inte ändrade.
• Heroplattan på startsidan. Man kan välja bland olika färger och detta är idag byggt i ett skript. Vi behöver se över denna!
• Cookiebanner - Anpassar vi denna med temainställningar kommer den se olika ut på alla webbar, hur vill ni göra med den?