JOOMLA 2.5 TEMPLATESByg din egen template og lær om overrides

www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224

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

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

Om Templates

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

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å

EKSEMPLER PÅ TEMPLATES

SPECIALUDVIKLET VS. KØBE TEMPLATESSpecialudviklet 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

INSPIRATION & TEMPLATE-OVERSIGT

www.templates.toolmaster.dk

VALG AF DEFAULT TEMPLATE I JOOMLA 2.5

1

2

3

Efter installationen i ”Extension Manager” gøres følgende:

ASSIGNMENT AF TEMPLATE I JOOMLA 2.5

Med ”assignment” kan forskellige templates bruges på forskellige undersider:

1

2

Værktøjer og struktur

TEKNOLOGIER DER SKAL BRUGES (PRIORITERET)

HTML CSS XML Joomla Framework

PHP JavaScript

VÆRKTØJER DER KAN BRUGESGratis 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

FIREBUG TIL FIREFOX1. Højreklik på et element og vælg ”Inspicer element”2. Se kildekoden for det valgte element3. Modificer CSS’en for valgte element på alle tænkelige måder og se resultatet. Se

linje-nr.

1

23

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”)

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

Implementering af template

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 moduleri en anden modulposition

Bredde på et modul kan automatiskafgø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

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

SE TEMPLATENS MODULPOSITIONER

Se modulpositioner i frontendved at tilføje tp=1som parameter i URL’en

Fx ”index.php?tp=1” eller

”www.domæne.dk/?tp=1”

1

2

3

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

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” />

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

SKAB FORBINDELSE TIL STYLESHEET (CSS)

Eksempel på brug af: echo $this->baseurl; echo $this->template;

Implementering af XML fil

GENNEMGANG AF XML INSTALLER

”DISCOVER” I STEDET FOR INSTALLATION

Så snart projektet er oprettet, og XML på plads kan man:

Det er fx nok at kopiere en template, ændre mappens navn,

samt ændre navnet på templaten i XML installer filen.

1

2 3

4

5

GENNEMGANG AF TEMPLATEKONFIGURATIONOm 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.

Template-overrides

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

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:

Herefter modificerer vi den kopieret template (i dette eksempel ”default.php”)

Designet vi ønsker at ændre Kopieres til template override mappen

Færdiggørelse

TEST ALTID TEMPLATEN I FLERE BROWSERE Internet Explorer (IE)

Chrome Firefox (FF) Opera

Safari

Forvent at bruge op mod 1/6 af udviklingstiden på at få templaten til at virke i ældre ”Internet Explorer” versioner

Danskernes browservalg 2012 - kilde www.fdim.dk

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

Udvikling af egen template

ØVELSE - UDVIKLING AF EGEN TEMPLATE1. Opret projektet direkte i Joomla mappen ”templates”:

A. Kopier en eksisterende template for at få filer og struktur medB. Omdøb den kopieret templatemappe til sigende navn uden mellemrumC. 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 templatesB. Indskriv de modulpositioner du regner med at have

3. Tag templaten i brugA. Brug Joomla ”Extension Manager” til at ”discover” din template, så vi kan se mens vi arbejder videre med

templatenB. Aktiver templaten som default så vi kan se ændringerne

4. Åben ”index.php” filenA. Ret <header> til, og skab forbindelse til stylesheetetB. Skab i HTML (og/eller CSS) skelettet du ønsker templaten skal haveC. Indsæt Joomla tags for komponent, systembeskeder, debug og modulerD. 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å headlinesB. Få styr afstande mellem elementerne og modulpositioner på pladsC. 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 farverB. Om en modulposition skal brugesC. Templatens bredde

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

TAK FOR NU …

www.toolmaster.dk – info@toolmaster.dk – (+45) 2623 5224

Husk at tage et visitkort