Kristofers Drupalkurs Del 8a: Font Implementering och Menyer

I denna del av drupalkursen ska vi kolla på hur man installerar och använder sig av självvalda fonts på drupalsidan. Vi ska även göra en huvudmeny som vi kan sedan använda och styla.

1. Installera fonter på sidan

Googla ”font face generator” och ladda upp fonten du har valt och vill ha på din sida. Välj optimala inställningar och acceptera deras EULA. När du har laddat ner filen så skapa mappen fonts i (drupal/sites/all/themes/framework) , under mappen fonts skapar du ännu en mapp med samma namn som fonten du valde. Extrahera font kit-filen du laddade ner till mappen du skapade för fonten.

Undersök stylesheet.css som följer med i ”font kittet”. Där finns det en bit kod som ser ut som koden vi visar nedan (se några rader ned). Om du har laddat upp flera fonter t.ex. fetstil och kursiva versioner av fonten, så kommer det finnas flera kodsektioner.

Kopiera all kod från stylesheet.css till din style.css som ligger under temamappen i ditt system. Klistra in koden längst upp i css-dokumentet under den dokumentation som berör temat.

Ändra url:en för fonterna i koden så att det står (/fonts/[fontnamnet]) framför resten av filvägen.

@font-face { - Deklaration att man skapar en ny font import

font-family: 'HabanaRegular'; - Fontens samlingsnamn.

src: url('fonts/habana/habana-webfont.eot'); - Filvägen till fonten. Viktigt att den visar /fonts/[fontnamnet]

font-weight: normal; - Default ”vikten” på fonten.

font-style: normal; - Default stylingen på fonten.

2. Använd fonten på sidan

För att implementera fonten så använder vi oss av två css properties, nämligen h1 och p.

För att få fonten att se likadan ut på både framsidan och undersidor så väljer vi att vara selektiva med våra id’s och classes: Den första delen av koden är för front sidan på main sectionen. Den andra delen är för samma section på de sidor som inte är front sidor.

body.front section#main h1, body.not-front section#main h1 {
  font-family: 'HabanaRegular';
  font-size:2em;
  text-align:center;
}
body.front section#main p,
body.not-front section#main h1 {
  font-family: 'helvetica';
  font-size:1.1em;
}

3. Skapa en huvudmeny

Gå till site building -> menus och döp om primary links till Huvudmeny. Gå sedan till site building -> blocks och lägg till Huvudmeny i headern eller på en sidospalt. Se till att alla noder du skapat ligger under menyn ”huvudmeny” i deras nodinställningar.

4. Installera global redirect

Googla ”Global redirect drupal” och ladda ner den rekommenderade 6.x versionen. Extracta filen i drupals module folder (drupal/sites/all/modules) och installera modulen under site construction -> modules.

Ev. Problem

Om du får några problem så se till att kolla att du inte har glömt några sluttaggar i css koden och att all kod är insluten i ’{}’ brackets. Håll utkik efter fler guider från webbyrå Storleden, och subscriba till vår YouTubekanal, Twitterfeed och Facebook fanpage.

Facebook.com/Storleden

Twitter.com/Storleden

Youtube.com/user/Storleden