Design

Under fliken design kan man ändra på webbplatsens stil och utseende. Här finns 6 avdelningar.

Design closed 1

  • Skins
    Färdiga, valbara skin med övergripande layout, stilmallar mm
  • Themes
    Variationer på skinnens stilmallar
  • Google fonts
    En dynamisk lista med länkar till Googles fria typsnitt (drygt 1000 st)
  • Webb fonts (woff)
    En dynamisk lista med woff-typsnitt som finns på servern
  • Style presets
    Ändring av några vanliga stilmallar, rubriker etc, som kan använda sig av ovantående typsnitt.
  • Custom CSS
    En textruta där man kan skriva sin egen css-stilmall, och även här kan man använda sig av ovanstående typsnitt.

Skins

Varje webbplats har ett Skin och i första avdelningen, Skins, väljer man vilket som webbplatsen ska använda. Ett Skin består av några filer som webbdesignern skapat och laddat upp på servern. Dessa filer bygger tillsammans med mallarna upp varje webbsida. Välj Skin genom att trycka på en av förhandsvisningsbilderna. Det valda får en röd ram.

Design skins 2

Themes

I avdelningen Themes finns på samma sätt små förhandsvisningsbilder att välja emellan. Ett Tema är en alternativ stilmall som förändrar utseendet på en mängd saker och ändrar därmed även känslan och karaktären på hela webbplatsen. Temat med namnet bootstrap är det förinställda temat. Överst finns en länk till en sida där man kan konfigurera teman.

Design themes 3

Google fonts

Google tillhandahåller ett antal typsnitt som man som kan använda fritt på sin webbplats. Lägg till ett nytt sådant genom att trycka på New Google Font. En ny textrad i listan läggs till. Gå nu till fonts.google.com och välj typsnitt att lägga till (Select this style) och kopiera koden vid Link (den markerade texten i bilden nedan).

Design google fonts 4

Hela koden från Google (som Google menar ska klistras in i head) klistras in på raden för typsnittet:

Design google fonts save 5

När man klistrat in koden från Google (enligt ovan) extraheras och sparas typsnittets namn och ev vikt, vilket är den information som systemet behöver för att kunna använda typsnittet. Det är endast namnet som är nödvändigt och det går lika bra att själv spara det manuellt om man vill. När ett Google-typsnitt lagts till på det ena eller andra sättet är det klart att användas. Lägg till så många typsnitt som behövs.

Design Google fonts saved 6

Web fonts (woff)

Om man av någon anledning inte vill eller kan använda sig av Googles typsnitt kan man lägga till egna typsnitt själv. Dessa typsnitt ska ha formatet ".woff" och ligga i mappen för typsnitt på servern (/fonts). Typsnittens filnamn namn ska vara samma som den familj med typsnitt man vill använda (font-family). Om typsnittet uppfyller dessa krav visas de i listan. Kryssa i för att aktivera de önskade typsnitten och de är klara att användas.

Design web fonts 7

Style presets

Den här avdelningen visar en tabell med möjlighet att förändra typsnitt på ett urval av rubriknivåer, där h1 är den största, samt på brödtexten och i toppmenyn. Man kan ändra typsnitt, storlek, vikt och färg. De typsnitt som finns att välja på är de som finns under Google fonts och Webb fonts (woff). Storleken är relativ och angiven i rem, vikten med en siffra, ju högre siffra desto fetare, men vikten kan bero på typsnittets egenskaper. De färger som går att välja är förinställda och hämtas från en konigurationsfil som webbdesignern skapat.

Design style presets 8

Custom CSS

Här kan man skriva sin egen CSS. Här finns inga begränsningar. Eventuella regler och selektorer som redan finns i skinnets stilmallar skrivs över.

Design custom css 9
🙂