Theme Creator

17-08-2023

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 opretter du et design, der tager udgangspunkt i GoBasics basis-design. Du kan i princippet selv 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 krav til specialdesignede løsninger.

Med Theme Creator kan du indstille:

  • 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

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 tema du vil basere det nye tema på.
  • Navngiv dit tema 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 det 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å. 
OBS

Om at vælge farver

Farver spiller ikke overraskende en betydelig rolle for hjemmesidens visuelle udtryk, og det er derfor vigtigt at sammensætte en farvepalette, der præcist repræsenterer din organisation og dét formål, som hjemmesiden eksisterer for.  Du får derfor vores to anbefalinger til, hvordan du kan lave din 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.

Derudover skal du 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. Vi bruger 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.

Sådan indstiller du dit tema 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.

    TIP: 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