Theme Creator

17-08-2023
Administrering

Her kan du se, hvordan du selv opretter og tilpasser et tema i GoBasic. Det er relevant for dig, som gerne selv vil oprette subsites og ønsker at tilpasse dit site med farver og fonte. Med Theme Creator har du mulighed for selv at foretage nogle enkle valg i forhold til dit stylesheet.

Med Theme Creator kan du selv oprette nye temaer (stylesheets), som du kan benytte på dine sites. Du kan i princippet benytte egne temaer på alle sites, men du skal være opmærksom på, at designmulighederne er begrænsede. Det er derfor fordelagtigt at benytte dine egne temaer på hjemmesider, der ikke stiller store krav til specialdesignede løsninger.

Hvad vil du bygge temaet på?

Du kan vælge mellem to muligheder: 

  1. Du kan basere dit tema på GoBasics basisdesign ved at vælge det stylesheet, der hedder Blank v5. I det tilfælde har du mulighed for at indstille følgende variabler:
    • Skrifttype til brødtekst og overskrifter
    • Farvepalette med en primær farve og 5 sekundære farver
    • Farve på footer
    • Farve på header og hovednavigation
    • Afrundede hjørner

  2. Du kan basere temaet på et andet design du har fået udarbejdet, fx på dit hovedsite. Det kan eksempelvis være relevant, hvis du ønsker at oprette subsites, hvor der skal være genkendelighed og gennemgående træk fra jeres hoveddesign, men blot med en anden identitetsfarve. Hermed bliver alle de øvrige designvariabler, som er udviklet i designet bevaret. Hvis du benytter dig af den mulighed, der det kun muligt at justere farver og fonte.

    Bemærk at denne funktion ikke er standard, så du skal derfor kontakte supporten, hvis det er noget du ønsker at benytte dig af. 

Sådan opretter du et tema

  • Gå til roden af dit site > Vælg fanen 'Indstillinger' > Gå ned under ‘Theme Creator’ > Klik på ‘Opret nyt tema’.
  • Vælg hvilket design du vil basere det nye tema på.
  • Navngiv dit nye tema (stylesheet) og klik ‘Opret tema’.
  • Nu har du mulighed for at indstille de forskellige parametre, du ønsker. 

Temaets indstillinger

  • Fonte:
    Du har mulighed for at vælge en brødttekst-font og en overskrift-font. Theme Creator har en række fonte indbygget, som du kan vælge imellem - nogle med fødder og andre uden. Alle fonte er variable google fonts og har du behov for at se, hvordan de ser ud, kan du finde dem på Google Fonts. Med font weight kan du indstille, hvor fed skrifttypen skal være. Per default er font weight indstillet til deres standarder.
  • Farvepalette:
    Du kan vælge en primær farve og op til fem sekundære farver. Primærfarven har betydning for farven på links og knapper. Du vælger en farve ved at klikke i farvefeltet og benytter farvevælgeren. Her kan du fx også indtaste RGB- eller hexkode. Farvevælgeren ser forskellig ud afhængig af, hvilken browser du benytter. I videoen vises det Chrome. Du kan ændre farverne undervejs, så du behøver ikke føle dig nødsaget til at beslutte de endelige farver før du kan gå i gang med at oprette indhold og struktur.
  • Header og footer:
    Du kan vælge en baggrundsfarve til footer, header og til navigationslinjen.
  • Runde hjørner:
    Endelig kan du indstille, om hjørnerne på bokse skal være skarpe eller afrundede. Hvis kanterne skal være skarpe vælger du '1' - jo højere tal, jo rundere hjørner vil du få. 

Om at vælge farver

Sammensæt en farvepalette, der repræsenterer din organisation og dét formål, som hjemmesiden eksisterer for. Her får du vores anbefalinger til, hvordan du kan sammensætte en farvepalette, også selvom du ikke nødvendigvis har designmæssige kompetencer:

  • Tag udgangspunkt i primærfarven fra organisationens logo eller designmanual, og basér de resterende fire farver på denne. Vælg farver, der lægger sig op ad primærfarven, ex. hvis primærfarven er blå, så hold dig eksempelvis til farver i blålige nuancer. Derudover kan du supplere med nogle neutrale toner, som er gode at bruge til baggrunde uden at være for fremtrædende i designet eller fx en varm farve, hvis sitet har en overvejende kølig palette.
  • Du kan selv sammensætte en farvepalette med fem farver ved hjælp af redskaber som https://coolors.co/ - husk at eksperimentere og prøv jer frem. Start eksempelvis med at lande på en fed primærfarve, som I synes ser godt ud, og som passer med det udtryk I gerne vil formidle med det nye site. Arbejd ud fra denne til at finde de resterende fire farver - eksempelvis med ovenstående tilgang - eller ved at lade Coolors matche farver indtil du har fem farver du er glad for.

Husk webtilgængelighed

Du skal tage højde for at dine farvevalg overholder webtilgængelighed. Det indebærer, at der skal være tilstrækkelig kontrast mellem skrift og baggrundsfarve. GoBasic vil automatisk tilføje lys tekst på mørke baggrunde og mørk tekst på lyse baggrunde, men det er dig som webansvarlig, der skal sørge for at farverne overholder kontrastforholdet. Du kan bruge WebAIM's kontrasttjekker, som du kan finde via dette link: https://webaim.org/resources/contrastchecker/

Vær opmærksom på, at du "kun" behøver leve op til AA-standarden.

Indstil visning af temaet på sitet

  • Gå til roden af dit site > Vælg fanen 'Indstillinger' > Gå ned under ‘Konfiguration’.
  • Under ‘Konfiguration’ finder du feltet ‘Tema’. Vælg det tema du har oprettet via dropdown.
  • Når du afslutter med ‘Gem og Publicer’ er temaet skiftet ud på sitet.

    OBS: Brug hard refresh (CTRL + SHIFT + R) for at få ændringer til at slå igennem.

Rediger og slet temaer

  • Gå til roden af dit site > Vælg fanen 'Indstillinger' > Gå ned under ‘Theme Creator’.
  • Vælg det tema du ønsker at redigere eller slette og klik på ‘Rediger tema’.
  • Nu kan du gennemgå indstillingerne og gemme. Eller du kan i stedet vælge 'Slet tema'.

I denne artikel...

  • Sådan opretter du et nyt tema
  • Om valg af farver, fonte mv.
  • Sådan indstiller du temaet på din hjemmeside
  • Rediger eller slet temaer