Grönt bälte: Hantera CSS och Javascript

We encourage users to post events happening in the community to the community events group on https://www.drupal.org.
Itangalo's picture

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.

Comments

Lär dig CSS på w3schools

Itangalo's picture

Om du vill lära dig CSS är w3schools ett utmärkt ställe att börja: http://www.w3schools.com/Css/css_intro.asp

//Johan

Vad ska det stå?

araneida's picture

Hej Johan och tack för en bra guide!

Undrar bara om det inte fallit bort något i dina punkter under Redigera teman: skapa underteman. Eller vad menas med:
"# Kopiera filen .info till underkatalogen, och byt namn på den till .info.
# Öppna .info-filen och ändra alla till ."

/Lotta

Fixat

Itangalo's picture

Tack för snälla ord och skarpa ögon!
Min formatering klipptes bort av HTML-filtret här på sidan. Nu har jag omslutit texten med code-taggar, så att allt ska synas bra.

//Johan Falk, NodeOne
**
Vill du lära dig mer om Drupal? Kolla in samlingen av tips och guider!
Har du en fråga om Drupal? Missa inte FAQ-sidan på forumet!

Tack!

araneida's picture

Tackar, nu förstår jag lite bättre : )

/Lotta

Saknad punkt tillagd

Itangalo's picture

När man skapar underteman är det bra – eller nödvändigt – att markera modertemat i .info-filen.
Tack till polaren Robbski (och Advantage Labs) som fick mig att se detta.

//herr Falk

Jättebra lektion! Tack! En

bambi_2's picture

Jättebra lektion! Tack!

En fråga bara - jag har kanske missat det nånstans på vägen, men vad menar Du med: "markera modertemat i .info-filen"?

A-B

Ann-Britt

Verkligen informativt för nybörjare!

Karin Andersen's picture

Har gått igenom det du skrivit men undrar lite över temat Zen. När jag försöker öppna info filen kommer jag in i Opera och ett tomt dokument. Alltså inget att redigera... Mitt undertema hittar jag... så det kanske blir rätt ändå...
Har jag missat något?

Karin

Högerklick!

Itangalo's picture

Att Opera försöker öppna filen beror med stor sannolikhet på att du har någon sorts association mellan .info-filer och Opera i ditt operativsystem. Högerklicka på filen och välj 'Öppna med...' istället, så bör du få upp en lista med tillgängliga program. Välj någon sorts textredigerare.

Lycka till!
//Falk

editera .info - filen , men vilken?

Göran's picture

Informationen man får gratis är i det mesta kanon, tack för denna.

Blev en smula osäker om vilken av .info filerna man ska öppna och editera ? [undertema].info. / [temanamn].info
Det är undertema.info - vet jag nu.

Hade ett fel p g av att jag använde (-) tkn i filnamnet, så mina första försök misslyckades, nu funkar det.

// Göran

Toppen!

Itangalo's picture

Toppen att det löste sig! Och tack för att du delar med dig av klokskapen. :-)

//Johan Falk

Viktigt - Gällande sub-tema

Göran's picture

Det som uttryckligen aldrig nämns i instruktionerna är att det är Sub-Temat som man ska ange som STANDARD = klicka på "Ange som standard" under "utseenden"-menyn.
Det är lätta att tro att det är "huvudtemat" som ska vara standard, men så är det alltså inte ( tog ett tag innan jag fick detta klart för mig).

// Göran

Sweden

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week