Design

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

Design closed 1

  • Skin
    Färdiga, valbara skin med övergripande layout, stilmallar mm. Här kan man även ställa in grundläggande färger i varje skin.
  • Google fonts
    En dynamisk lista med länkar till Googles fria typsnitt.
  • Webb fonts (woff)
    En dynamisk lista med woff-typsnitt som finns på servern. Man kan även ladda upp sina egna typsnitt här.
  • Font styles
    Stilmallar för rubriker och texter. Typsnitt, storlek, vikt, case och färg.
  • 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.

Skin

Varje webbplats har ett Skin och i första avdelningen, Skin, 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. Om det bara finns ett enda skin installerat visas det inte. Här finns även nio färgväljare för att designa skinnet ytterligare samt en kryssruta för att återgå till de förinställda färgerna.

Design skin 2

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, hitta och välj typsnitt att lägga till. Tryck på "Get font" och sedan på knappen "Get embed code". Kopiera koden med "Copy code" (se bild).

Design Embed code

Klistra nu in hela den kopierade koden (den som Google vill att du lägger in i head-taggen i html-koden) på den tomma textraden under Font i WebMan. Uppdatera. Nu finns typsnittet tillgängligt för användning.

Design google font

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.

Web fonts (woff)

Om typsnittet man söker efter inte finns hos Google, eller om man av någon anledning inte vill eller kan använda sig av Googles typsnitt kan man ladda upp och lägga till egna typsnitt själv. Dessa typsnitt ska vara i formatet WOFF (Web Open Font Format) och typsnittens filnamn ska vara desamma som typsnittets namn (font-family) med ändelsen ".woff". Om typsnittet laddats upp och uppfyller dessa krav visas de i listan. Kryssa i för att aktivera de önskade typsnitten, spara, och de är klara att användas.

Design web font

Font styles

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, case (stora eller små bokstäver) 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 enheten "rem" (relativ storlek till root-elementet), 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 konfigurationsfil som webbdesignern skapat.

Font styles

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
🙂