Grönt bälte: Hantera CSS och Javascript

Detta är den fjärde delen i guiden Sju steg mot svart bälte i att tema Drupal 6.

Hur får man runda hörn till blocken på sin Drupalsajt? Hur får jag menyblocket, men inte något annat block, att få en viss bakgrundsfärg?

Frågorna ovan är rätt viktiga saker om man håller på att utveckla ett eget tema, men de har mycket lite med Drupal att göra. Oavsett vilket system man använder för att driva webbplatser kommer sådana saker att skötas med CSS, och jobbet för att åstadkomma ändringarna handlar om att hitta rätt CSS-fil, rätt CSS-klasser eller ID:n, och lägga in rätt CSS-kod för att påverka utseendet på webbsidan.

För den som inte är speciellt bekant med CSS ter sig språket som ett sätt att få alla länkar att bli i en viss färg, eller sätta texten alla paragrafer till ett visst typsnitt. Men det går att göra mycket mer än så. Så länge elementen på sidan är uppmärkta på ett trevligt sätt går det att påverka endast utvalda delar av webbsidan, och till exempel ge loginblocket en annorlunda formatering. Det går också att använda CSS för att välja ut de första tre orden i den första paragrafen på sidan och ge dem en egen stil. Och inte minst går det att använda CSS för att styra hur olika element ska placeras på sidan.

Innan du djupdyker i hur man temar Drupal bör du känna till hur allmänna webbspråk som (X)HTML, CSS och Javascript fungerar. Om du vet hur dessa språk fungerar – eller allra minst vad man kan och inte kan göra med dem – kommer du att ha bra förutsättning att använda mer avancerad Drupal-temning endast när det behövs. Om du däremot inte vet hur man åstadkommer skuggeffekter med hjälp av CSS spelar det ingen roll hur mycket tid du lägger på att leta runt bland Drupals temafunktioner – i slutändan kommer de skuggorna att komma från CSS-kod.

Sensmoralen är klar: Se till att lära dig de breda designfärdigheterna innan du ger dig i kast med de mer avancerade verktygen. Med CSS och ett bra grundtema (exempelvis Zen) kan man åstadkomma 95 procent av det som krävs för ett färdigt tema.

Redigera teman: skapa underteman

Det korrekta sättet – best practice – för att redigera teman är att skapa ett undertema (sub theme) till temat man har laddat hem. När man precis börjar lära sig att bearbeta teman känns det som onödigt arbete, men fjärde eller femte gången upptäcker man att det finns en del vinster.

Att skapa ett undertema är enkelt gjort, och går till på följande vis:

• Skapa en mapp i temakatalogen, och ge den ett namn som matchar undertemat. (Underkatalogens namn kommer att bli systemnamnet för undertemat.)
• Kopiera filen [temanamn].info till underkatalogen, och byt namn på den till [undertema].info.
• Öppna .info-filen och ändra alla [temanamn] till [undertema]. Det är också lämpligt att ändra beskrivningarna i filen till saker som stämmer för ditt undertema.
• Se till att .info-filen innehåller information om vilket bastema du utgår från genom att lägga till raden base theme = [maskinnamn_för_bastemat]

Har du gjort detta rätt borde ditt undertema dyka upp i webbplatsens lista över teman, eftersom .info-filen säger åt Drupal att det finns ett nytt tema att använda. Undertemat borde – än så länge – ge precis samma utseende som modertemat. Det är för att Drupal först letar efter temainställningar i ditt undertema, men om det inte finns några där faller den tillbaka på modertemat. Och än så länge finns det inte några temainställningar i katalogen.

När du hittar CSS-filer som du vill ändra i ändrar du inte i modertemats filer, utan kopierar dem först till undertemats katalog. Väl där kan du göra alla ändringar du vill, och Drupal kommer att välja den redigerade filen framför filen i modertemat. Fördelen med denna approach är dels att du kan gå tillbaka till det orörda modertemat när du vill, dels att du kan installera uppdateringar till modertemat utan att dina egna justeringar påverkas.

Hitta rätt CSS-filer

Om man inte använder rätt verktyg är det ett utdraget arbete att ta reda på varifrån CSS-koden som ger ett visst utseende kommer. Med rätt verktyg är det däremot en enkel match.

Rätt verktyg heter Firefox och Firebug. Med dessa kan du högerklicka på vilket element som helst på en webbsida och välja “inspect element”. Detta öppnar en panel för Firebug, där du dels kan se HTML-strukturen för elementet, dels vilka olika CSS-attribut som styr elementets utseende. För varje attribut står det vilken fil attributet kommer ifrån, och på vilken rad i filen du hittar just de kodraderna. Som grädde på moset kan du dessutom gå in i CSS-koden live och göra teständringar. (De ändringarna görs inte i källfilerna, så du måste redigera dem själv för att göra ändringar permanenta.)

Många CSS-filer kommer inte från temat som används, utan från olika moduler i Drupalinstallationen. En sådan CSS-fil redigerar du på samma sätt som en CSS-fil i modertemat – du kopierar den till undertemats mapp, och redigerar sedan efter behag.
Om Firebug skulle berätta att sin CSS-fil har ett namn som ser ut som ett temporärt filnamn (så som 16 slumpvis valda tecken) beror det med stor sannolikhet på att Drupal börjat slå samman och cacha CSS-filer. Stäng av den inställningen genom optimize CSS på administration > inställningar > prestanda.

Lägga till fler CSS- och js-filer

I ett temas .info-fil finns en förteckning över de CSS- och js-filer som används. Så länge de finns med i .info-filen kommer de att länkas in korrekt av Drupal.

Om du vill lägga till fler CSS- eller js-filer gör du detta genom att lägga till fler hänvisningar i .info-filen, enligt samma mönster som de andra hänvisningarna i filen (så som stylesheets[print][] = print.css för CSS och scripts[] = scripts.js för Javascript).

Om ändringar du gör inte får effekt är det värt att rensa cachen för webbplatsen. Det görs enkelt genom ett block som modulen Devel tillhandahåller, eller lite mer omständligt genom administration > inställningar > prestanda.

Två genvägar

Om man tycker att det är jobbigt att redigera CSS-filer, eller man av någon anledning har svårt att nå filsystemet för sin webbplats, är det värt att kolla in de två modulerna CSS Injector och Block Class. De låter en skjuta in extra CSS-kod på utvalda platser på sajten genom ett onlinegränssnitt.

Lösningen kan också vara praktisk om man bara vill göra mycket små/få ändringar i ett tema.

Det gröna bältet kräver en del av temaninjan, nämligen att man ska ha koll på verktygslådan utanför Drupal. I orange bälte ingår också det första steget i att redigera temafiler för Drupal – att skapa ett nytt undertema, inklusive .info-fil och eventuella förändrade CSS- och js-filer.