Slides fra foredrag af Toolmaster.dk, om at lave sin egen Joomla CMS template, i forbindelse med Joomladay Danmark 2012. jd12dk

1. JOOMLA 2.5 TEMPLATES
Byg din egen template og lær om overrides
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224

2. DAGENS PROGRAM
 Velkommen
 Om templates
 Hvad er en template?
 Hvordan det virker - design adskilt fra indhold
 Forskel på købe og specialdesignet templates
 Installation og assignment
 Værktøjer og struktur
 Teknologier der skal bruges
 Værktøjer og links
 Templatens opbygning
 Hvad templatens også kan indeholde
 Implementering af template
 Planlægning af struktur og modulpositioner
 HTML vs. CSS templates
 Joomla! templatetags
 Modulpositioner uddybet
 PHP templatetags
 Implementering af template XML fil
 Gennemgang af XML installer
 Brug af ”discover” installation
 Gennemgang af templatekonfiguration
 Template-overrides
 Hvad er overrides?
 Hvordan bruges overrides?
 Færdiggørelse
 Test af template i browsere
 Gode tips og råd
 Udvikling af egen template

3. KORT OM MIG OG TOOLMASTER.DK
Thomas Kampp
 31 år
 København
 IT-uddannet
 Joomla! siden år 2003
 Bl.a. udvikler af:
 CB plugin “Public Mail”
 CB plugin “User IP logger”
 Ejer af Toolmaster.dk
 Startet i 2004
 www.toolmaster.dk
 www.facebook.com/toolmaster.dk
 www.linkedin.com/in/kampp

4. Om Templates

5. HVAD ER EN TEMPLATE?
Templaten er
 Sidens udseende/design
 Jeres identitet
 Forskellig fra andres sider
Templatetyper
 Unikt udviklet
 Genbrug eller indkøbt
Templateformål
 Sikre ens undersider
 Styres alt design fra et sted
 Nemt kunne skifte design

6. DESIGN ER ADSKILT FRA INDHOLD!
Joomla er opbygget i ”MVC” (Model-View-Controller)
 ”Indhold” (fx artikler) er placeret i databasen
 ”Funktionalitet” er selve Joomla koden/systemet
 ”Design” er måden vi præsenterer ”indhold” på

7. EKSEMPLER PÅ TEMPLATES

8. SPECIALUDVIKLET VS. KØBE TEMPLATES
Specialudviklet template
 Fordele
 Få det præcist som det ønskes
 Lettere at holde størrelsen på templaten nede
 Få en målrettet template med jeres forretningsidentitet (herunder farver)
 Ulemper
 Udgiften og/eller tidsforbruget
 Kræver ofte enten en udgift til en grafiker og/eller programmør
Købte templates (ofte 300 kr.)
 Fordele
 Der er ingen udviklingsudgift
 Kom videre og i gang med det samme
 Templaten bliver vedligeholdt af professionelle
 Der følger ofte en mobil/tablet version af templaten med
 Man får ofte mange ekstra funktioner, muligheder, moduler mm. med
 Ulemper
 Hacks bør dokumenteres
 Mange andre bruger dette design
 Ikke altid nemt at lave større ændringer, som fx tilføje en modulposition
 Man skal ofte lave et nyt/unikt stylesheet der har farver efter ens identitet

9. INSPIRATION & TEMPLATE-OVERSIGT
www.templates.toolmaster.dk

10. VALG AF DEFAULT TEMPLATE I JOOMLA 2.5
Efter installationen i ”Extension Manager” gøres følgende:
1 3
2

11. ASSIGNMENT AF TEMPLATE I JOOMLA 2.5
Med ”assignment” kan forskellige templates bruges på forskellige undersider:
2
1

12. Værktøjer og struktur

13. TEKNOLOGIER DER SKAL BRUGES (PRIORITERET)
 HTML
 CSS
 XML
 Joomla Framework
 PHP
 JavaScript

14. VÆRKTØJER DER KAN BRUGES
Gratis programmer
 Editor ”Notepad++”: http://notepad-plus-plus.org
 Editor ”PsPad” (bedst til CSS): http://www.pspad.com
 Foto-programmet ”Paint.net”: http://www.getpaint.net
 Browseren Firefox: http://www.mozilla.org/da/firefox/
 Udvidelsen ”Firebug” til Firefox: https://getfirebug.com
 WAMPP server: http://www.wampserver.com/en/
Online services
 Template inspiration: http://www.templates.toolmaster.dk
 Joomla print, e-mail og pdf ikoner: http://www.ikoner.toolmaster.dk
 Gratis Joomla templates: http://www.joomlaos.de/joomla_template_galerie.html
 Favicon generator: http://favicon-generator.org
 W3C, HTML: http://validator.w3.org
 W3C, CSS: http://jigsaw.w3.org/css-validator/
 Google Webmaster: https://www.google.com/webmasters/tools/
 Sidens loadhastigheder: http://tools.pingdom.com/fpt/
 Sidens loadhastigheder: http://www.webpagetest.org
 Hvordan ser siden ud i andre browsere/OS: http://browsershots.org
 Hvordan ser bots/søgemaskiner siden? I Google skrives:
cache:www.hjemmeside.dk

15. FIREBUG TIL FIREFOX
1. Højreklik på et element og vælg ”Inspicer element”
2. Se kildekoden for det valgte element
3. Modificer CSS’en for valgte element på alle tænkelige måder og se resultatet. Se linje-nr.
1
2
3

16. EN TEMPLATE BESTÅR SOM MINIMUM AF
FØLGENDE FILER OG MAPPER
 Filen ”index.html”
 Denne fil uden indhold, skal af sikkerhedsgrunde placeres i alle mapper (også images og css)
 Filerne ”template_thumbnail.png” og ”template_preview.png”
 To billeder (i forskellige størrelser) af hvordan den færdige template ser ud
 Filen ”index.php”
 Templatens struktur og opbygning, inkl. modulpositionerne
 Filen ”template.css” (placeret i mappen ”css”)
 Templatens design, farver, afstande, font, størrelser mm.
 Filen ”templateDetails.xml”
 Templatens installationsfil og konfiguration
 Mappen ”images”
 Alle templatens billeder og baggrunde placeres i denne mappe
 Mappen ”css”
 Alle templatens stylesheet(s) placeres i denne mappe (inkl. ”template.css”)

17. HVAD KAN EN TEMPLATE OGSÅ INDEHOLDE?
 JavaScript (fx til en menu)
 Fonte
 Sprogfiler
 Én 404-error page
 Component.php som kun viser komponentet
 ”Overrides” (kan ændre visningen af udvidelser)
 Joomla ikoner (print og e-mail)
 Favicon
Kort sagt, samt indeholder templaten alle
elementer der bestemmer hvordan alt indhold ser ud

18. Implementering af template

19. PLANLÆGNING AF DESIGN, STRUKTUR SAMT
TEMPLATENS MODULPOSITIONER
 Der kan godt være flere aktive
moduler i en modulposition
 Visning af en modulposition
kan godt afhænge af, om der er
aktive eller ikke aktive moduler
i en anden modulposition
 Bredde på et modul kan automatisk
afgøres af antallet af moduler
i modulpositionen
 Husk en menu, logo, breadcrumbs
og søg også er moduler
 ”System output” eller ”main content”
er komponentet

20. HTML TEMPLATES VS. CSS TEMPLATES
Fordele ved HTML template
 Lettere og hurtigere kodet
Fordele ved CSS templates
 Mindre kodemængde
 Hurtigere load tid
 Bedre brugeroplevelse
 Bedre søgemaskineoptimering
 Bedre browserkompatabilitet

21. SE TEMPLATENS MODULPOSITIONER
1
3
2
Se modulpositioner i frontend
ved at tilføje tp=1
som parameter i URL’en
Fx ”index.php?tp=1” eller
”www.domæne.dk/?tp=1”

22. TEMPLATE INDHOLDS INDSÆTTELSESTAGS
 <jdoc:include type=”head” />
 Indsætter output fra Joomla, som sidens titel, meta beskrivelse og tags
 <jdoc:include type=”modules” name=”left” style=”xhtml” />
 Indsætter modulpositionerne i templaten hvor i moduler kan placeres
 Koden bruges som den eneste flere gange, alt efter antallet af modulpositioner
 <jdoc:include type=”message” />
 Indsætter output beskeder fra Joomla til brugeren (fx ”Tak for din mail”)
 <jdoc:include type=”component” />
 Indsætter komponenten i templaten (fx nyheder, artikel, eller kontaktform)
 <jdoc:include type=”modules” name=”debug” />
 Indsætter output fra debugsystemet i Joomla (hvis aktiveret).
Placeres blot helt i bunden af templaten

23. MODULPOSITIONERS ”NAME” & ”STYLE”
Udgangspunkt
 <jdoc:include type=”modules” name=”Y” style=”X” />
Tagget ”name” (Y)
 Tagget ”name” er navnet på modulpositionen. Man kan helt selv vælge navnet!
Dette kunne fx være ”user3”, ”search”, ”topmenu”, ”breadcrumb”, ”left”, ”right”.
Tagget ”style” (X)
 ”table” – Opretter HTML tabeller rundt om modulpositionen og modultitel
 ”horiz” – Opretter HTML horisontal tabel rundt om modulpositionen og modultitel
 ”xhtml” – Opretter et div-baseret layout rundt om modulpositionen og modultitel
 ”rounded” – Opretter divs rundt om modulpositionen, så der kan laves runde hjørner
 ”outline” – Opretter et simpelt layout brugt til preview/udvilking
 ”none” – Fjerner så mange tags så muligt, samt selve modulets titel
 Man kan lade være med at definere en ”style” og helt fjerne tagget
 Man kan definere ens helt egen ”style” i et stylesheet (CSS), ofte kaldt ”chrome”.
Færdigt eksempel
 <jdoc:include type=”modules” name=”left” style=”xhtml” />

24. VIGTIGSTE TEMPLATE JOOMLA PHP-TAGS
 echo $this->baseurl;
 Skriver den fulde URL/sti til Joomla installationen
 For at templaten kan bruges på alle hjemmesider bør dette tag altid bruges
 echo $this->template;
 Skriver navnet på templaten, defineret i XML’en
 For at templaten nemt kan kopieres bør dette tag altid bruges
 echo $this->_charset;
 Skriver sidens charset (fx UTF8), så søgemaskiner og browser læser siden korrekt
 echo $this->language;
 Skriver sidens sprog, så søgemaskiner læser siden korrekt
 echo $this->direction;
 Skriver sidens læseretning (”rtl” eller ”ltr”), til hvis siden understøtter begge
 $var = $this->params->get('templatecolor');
 Henter variabel ”templatecolor” fra template-konfigurationen og placerer den i $var
 if ($this->countModules(‘right'))
 Tester at der er aktive moduler i modulpositionen
 if ($this->countModules(‘left')==0)
 Tester at der ikke er nogle aktive moduler i modulpositionen

25. SKAB FORBINDELSE TIL STYLESHEET (CSS)
Eksempel på brug af:
 echo $this->baseurl;
 echo $this->template;

26. Implementering af XML fil

27. GENNEMGANG AF XML INSTALLER

28. ”DISCOVER” I STEDET FOR INSTALLATION
Så snart projektet er oprettet, og XML på plads kan man:
1
2 5 3
4
Det er fx nok at kopiere en template, ændre mappens navn,
samt ændre navnet på templaten i XML installer filen.

29. GENNEMGANG AF TEMPLATEKONFIGURATION
Om templatekonfigurationer
 Konfigurationen er en del af XML installationsfilen!
 Det er ikke påkrævet at have en konfiguration!
 Man behøver ikke at bruge en sprogfil!
 Der kan bruges text, textarea, media, dropdown (list), radiobuttons (radio) mm.

30. Template-overrides

31. HVAD ER ”OVERRIDES”?
Templates bestemmer design
 Sidens generelle design og udseende
 Herunder formelementers og indholds design,
farver, størrelser og udseende
Overrides bestemmer struktur og indhold
 Enten sprog, modul eller komponents struktur
 Herunder formelementernes og indholds
orden, stuktur og individuel placering
 Kan ændre, fjerne eller tilføje information
 Forudsætter modul eller komponent bruger MVC
Hvorfor bruge overrides?
 Man kan ændre udvidelserne radikalt
 Der ændres kun i en kopi af originalfilen
 Man kan helt undgå hacks af udvidelser
 Gør opdatering og vedligeholdelse lettere
 Overrides kan følge din template så udvidelser altid matcher templaten

32. HVORDAN BRUGES OVERRIDES?
 Joomla tjekker selv om der er overrides der skal vises. Intet skal aktiveres
 Overrides kan bruges på komponenter, sprog og moduler
 Oprettelse af override sker ved at kopiere standard udseendet over i templatens
override-mappe. Fx:
Designet vi ønsker at ændre Kopieres til template override mappen
 Herefter modificerer vi den kopieret template (i dette eksempel ”default.php”)

33. Færdiggørelse

34. TEST ALTID TEMPLATEN I FLERE BROWSERE
 Internet Explorer (IE)
 Chrome
 Firefox (FF)
 Opera
 Safari
Danskernes browservalg 2012 - kilde www.fdim.dk
Forvent at bruge op mod 1/6 af udviklingstiden på at få
templaten til at virke i ældre ”Internet Explorer” versioner

35. GODE TIPS OG RÅD
 Kopier templatens filstruktur fra en anden template
 Overvej stærkt at bruge den ekstra tid/udgift på at lave
templaten ”table-less” (dvs. i CSS og ikke HTML)
 Der er tidspunkter hvor det bedre kan betale sig at modificere en
eksisterende template end lave en ny
 Undgå at bruge flash og frames
 Tøm ud i <header>
 Overhold W3C standarden (kun 4,37 % gør dette)
 Sikre at søgemaskinerne læser templaten korrekt
 Sikre templaten virker i forskellige browsere
 Hastighedstest siden, for at se om billeder er for store
 For super søgemaskineoptimering, bør tags og billeder
navngives fornuftigt

36. Udvikling af egen template

37. ØVELSE - UDVIKLING AF EGEN TEMPLATE
1. Opret projektet direkte i Joomla mappen ”templates”:
A. Kopier en eksisterende template for at få filer og struktur med
B. Omdøb den kopieret templatemappe til sigende navn uden mellemrum
C. Fjern herefter elementer og filer du ved ikke skal bruges
2. Åben XML installationsfilen ”templateDetails.xml”
A. Ret så meget til du kan, herunder <name> så vi kan kende den fra de andre templates
B. Indskriv de modulpositioner du regner med at have
3. Tag templaten i brug
A. Brug Joomla ”Extension Manager” til at ”discover” din template, så vi kan se mens vi arbejder videre med templaten
B. Aktiver templaten som default så vi kan se ændringerne
4. Åben ”index.php” filen
A. Ret <header> til, og skab forbindelse til stylesheetet
B. Skab i HTML (og/eller CSS) skelettet du ønsker templaten skal have
C. Indsæt Joomla tags for komponent, systembeskeder, debug og moduler
D. Sikre at templaten er uafhængig af navn og server med tags vi så tidligere
5. Åben stylesheet i mappen ”css” (ofte kaldt ”template.css”)
A. Sæt baggrunden, centrer siden, bestem farver på links, størrelser på headlines
B. Få styr afstande mellem elementerne og modulpositioner på plads
C. Lav ændringer til modulerne, og definer menuen
6. Opret en konfiguration i XML installationsfilen til at styre fx:
A. Hvilket af to stylesheets der skal bruges med forskellige farver
B. Om en modulposition skal bruges
C. Templatens bredde

38. GENNEMGANG AF DEFAULT TEMPLATE ”ATOMIC”
 Lad os hurtigt gennemgå default templaten ”atomic”
 Selve filstrukturen
 De to preview billeder af templaten
 XML installationsfilen
 Selve templaten i index.php
 Stylesheets i mappen ”css”
 Selve stylesheetet i template.css
 Overrides mappen ”html”, samt enkelt override
 Simple ændringer på storskærmen
 Tilføjelse af modulposition til templaten
 Oprettelse af konfiguration der styrer modulpositionen

39. TAK FOR NU …
Husk at tage et visitkort 
www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224