Denna del i kursen handlar om hur man gör ändringar i ett utseende på en Joomla-site. Detta åstadkommer man genom att göra ändringar dels i en template och/eller i ett CSS. I kursen ingår inte hur man skapar CSS, men vi har en länk till en guide för det. 

Nedan används det svengelska ordet template istället för mall här och där, ledsen för det.

FireBug (Firefox) och Web Inspector (Safari)

Jag har skrivit en separat artikel om om dessa två tillägg till två vanliga webbläsare här på siten. Du hittar den här: Firebug (för Firefox) och Web Inspector (i Safari).

Anledningen att man vill ha dessa är att man då kan ta reda på vad det är på en Joomla-sida som ger en viss sak dess utseende. Man får reda CSS-filens namn och tom raden i filen.

Att ändra i Joomla!s templates via dess admin-sida

De flesta template-leverantörer skickar med en admin-sida för templatet, där man kan ange saker som tex färgtema, bredd, vilken typ av menysystem man vill ha mm. 

Den template-leverantör jag använder mig av, Rockettheme, har utvecklat ett ramverk för att göra templates med många inställningar för administratören. Detta ramverk heter Gantry Framework och skärmdumpar och alla möjliga inställningar finns på den länken. Du kan även kolla i dokumentationen per template i Rocketthemes demo-site

Denna typ av ändringar är alltså ganska lätta att göra, man går in i adminsidan för templatet.

Att ändra i Joomlas template via CSS-filer

Detta är nästa "nivå" i svårighetsgrad. Tillsammans med Firebug eller Web Inspector och en smula lätta-att-lära-sig kunskaper i CSS, så kan man byta ut vissa saker i ett mall och påverka dess utseende mera i detalj. Tex byta en färg, bild mm som används av mallen.

Man kommer åt ett mallens CSS-filer i Joomla! Admin

Tillägg > Mallar > (klicka på aktuell mall) > Knapp uppe till höger "Redigera CSS".

Där finns en lista på CSS-filer och beroende på hur utvecklat ditt template är, så kan det finnas CSS-filer inte bara för ditt templates inbyggda stilar (nr 1-x), utan kanske även en separat CSS-filer per version av Internet explorer, 6, 7, 8, 9 osv, sedan separata CSS-filer för olika mobiler, sedan kanske vissa tillägg till Joomla! har egna osv. Joomlas eget template heter dock template.css. Det bör innehålla de flesta sakerna du behöver ändra. 

Sedan kan du behöva ändra i det förvalda stilens template, tex om du valt stil nummer 7 som default av de inbyggda stilar din mall eventuellt har, så behöver du ändra i något som möjligtvis kan heta style7.css.

Hur gör man en ny template då?

Vet du redan hur du gör en webbsida och bestämmer över layouten på den, i tex ett program som Dreamweaver eller Photoshop, så är det inte så långt till att göra om den design du skapat däri till en template för Joomla.

Man behöver en fil (tex den du skapat med sitens utseende) som man kompletterar med en del Joomla-kod så att Joomla! förstår var den skall skjuta ut menyer, artiklar, navigation, sedan, minst en, separat fil som innehåller ett CSS som specifierar typsnitt, färger, bakgrunder mm. Sedan några filer till som talar om för Joomlas installerare att det är en template och vilka filer det består av. Sedan tillkommer flera CSS-filer, flera bilder, kanske ett Javascript eller två mm. Har du allt det där så kan du zippa det till ett arkiv, och installera det i Joomla! admin.

Vet man hur man gör allt det där är det inte så svårt. 

Här är en lista på ställen där du kan lära dig göra en egen template:

Boken "Joomla! 1.6 A User's Guide: Building a Successful Joomla! Powered Website 3rd Edition (häftad)" av Barrie M North, har ett helt kapitel som ägnas åt det, kapitel 9. (Boken hos Bokus, bokens egen webbsida med komplett innehållsförteckning).

Creating a basic Joomla! template 

(http://docs.joomla.org/Creating_a_basic_Joomla!_template )

Joomla! 1.5 tutorial 

(http://www.compassdesigns.net/joomla-tutorials/joomla-15-template-tutorial )

Joomla! 1.6 tutorial

(ladda hem filarkivet med filer och PDF med guiden, http://www.compassdesigns.net/joomla-tutorials/joomla-16-template-tutorial-with-960-grid )

Videopresentation på 77 min från en Joomla-konferens i feb 2010 på engelska

(http://community.joomla.org/blogs/community/1131-creating-a-joomla-template-from-scratch.html )

Videopresentation göra template för 1.5 @ Youtube

(det finns en nyare på hans site, se beskrivningen, som kräver login och eventuellt pengar)

htmldog.com

Bra referens-site för HTML och CSS.