SlideShare une entreprise Scribd logo
1  sur  27
Zelf je template bouwen
Deel 1: absolute beginners
Even voorstellen…
Rachel Walraven
Webdesigner (sinds 1998)
Mail: rachel@walravenwebwerk.nl
Web: https://walravenwebwerk.nl
Tel: 06 13391722
Wat gaan we doen
• Opbouw van de template bekijken
• Bestanden ontleden
• Bepalen waar wat moet komen
• Beeeetje PHP
Resultaat:
je eerste eigen template! / kennis om er mee te starten.
Bestanden
• Alle bestanden in 1 map
• templateDetails.xml
• index.php
Aangevuld met:
• template_preview.png
• template_thumbnail.png
• css/template.css
templateDetails.xml
Doel: Geeft Joomla informatie
over de template
Bevat:
• Naam, auteur etc.
• Bestanden
• Module posities
En verder:
• Opties
templateDetails.xml
Het is een extensie, voor joomla versie 3.3 en hoger, van het type template, voor de site en heeft een
upgrade mogelijkheid.
templateDetails.xml
templateDetails.xml
templateDetails.xml
index.php
Doel: De structuur van de
pagina
Bevat o.a
• Positie van component
• Posities van Modules
• Positie van Messages
• Positie van Debug info
index.php
index.php
index.php
index.php
Codes
Component <jdoc:include type="component" />
Bericht <jdoc:include type="message" />
Module <jdoc:include type="modules“ name="NAAM" style="xhtml" />
Debug info <jdoc:include type="modules“ name="debug" style="none" />
Code toegepast
<div class=“wrapper”>
<div class=“header”>
<div class=“logo”>
<jdoc:include type="modules" name=“logo" style="xhtml"/>
</div>
<div class=“navigatie”>
<jdoc:include type=“modules” name=“position-1 ”style=“xhtml”/>
</div>
</div>
<div class=“contentarea”>
<div class=“content”>
<jdoc:include type=“message” />
<jdoc:include type=“component” />
</div>
<div class=“sidebar”>
<jdoc:include type="modules" name=“sidebar" style="xhtml"/>
</div>
</div>
<div class=“footer”>
<jdoc:include type="modules" name=“footer" style="xhtml"/>
</div>
</div>
<jdoc:include type="modules" name=“debug" style="xhtml"/>
template.css
Doel: Opmaak van de pagina
Linken in index.php:
(plaatsen tussen <head> en </head> tags)
<link rel="stylesheet" href="<?php echo $this->baseurl ?>
/templates/<?php echo $this->template; ?>/css/template.css"
type="text/css" />
template_preview.png
template_thumnail.png
• Doel: Laten zien van voorbeeld in het beheergedeelte.
• Afmetingen:
preview = 800 x 600 pixels
thumbnail = 206 x 150 pixels
• Template werkt ook zonder deze bestanden
&
Installeren
• Map met alle bestanden zippen
• Installeren zoals je gewend bent
• Of map met alle bestanden uploaden naar map templates
• Naar Extensies > Ontdekken (extensions > discover)
• Selecteer gevonden template en klik op Install (installeren)
• Ga naar Extensies > Templates en maak default
Stapje verder?
Rekenen met modules!
<?php if ($this->countModules('NAAM')) : ?>
<jdoc:include type="modules" name="NAAM" style="xhtml"/>
<?php endif; ?>
<?php if ($this->countModules(‘NAAM')) : ?>
<div class=“moduleblok”>
<jdoc:include type="modules" name="NAAM" style="xhtml"/>
</div>
<?php endif; ?>
Stapje verder?
<?php if ($this->countModules('NAAM1 or NAAM2')) : ?>
<div class=“blokken”>
<div class=“blokje1”>
<jdoc:include type="modules" name="NAAM1" style="xhtml"/>
</div>
<div class=“blokje2”>
<jdoc:include type="modules" name="NAAM2" style="xhtml"/>
</div>
</div>
<?php endif; ?>
or kan ook and zijn (of = de een of de ander, and = de een en de ander)
Stapje verder?
Dit kan je ook kleiner toepassen…
<div class=“<?php if ($this->countModules(‘NAAM1 or NAAM2')) :?>
blok<?php endif; ?> <?php if ($this->countModules(‘NAAM1 and
NAAM2’)) : ?>blokken<?php endif; ?>”>
<div class=“blokje blk1”>
<jdoc:include type="modules" name=“NAAM1" style="xhtml"/>
</div>
<div class=“blokje blk2”>
<jdoc:include type="modules" name=“NAAM2" style="xhtml"/>
</div>
</div>
Stapje verder?
Wanneer er alleen een module actief is op positie NAAM1 resulteert
dit in:
<div class=“blok”>
<div class=“blokje blk1”>
<div class=“moduletable”> Inhoud module </div>
<div class=“blokje blk2”>
<div class=“moduletable”> </div>
</div>
</div>
Stapje verder?
Wanneer er zowel op positie NAAM1 als NAAM2 een module actief is
resulteert dit in:
<div class=“blok blokken”>
<div class=“blokje blk1”>
<div class=“moduletable”> Inhoud module </div>
<div class=“blokje blk2”>
<div class=“moduletable”> Inhoud module </div>
</div>
</div>
Zelf aan de slag
• Geef je template een naam
• Richt de templateDetails.xml in
• Maak een indeling in je index.php zodat je
dit kan krijgen ->
• Pas naar wens opmaak toe in de
template.css
• Installeer dit in je eigen testomgeving
Resumé
• Nodig: index.php en templateDetails.xml
• Alles in 1 map. Mapnaam gelijk aan template naam
• Bestanden en moduleposities in templateDetails.xml verwerken
• Zippen en installeren of via ftp in map templates plaatsen
KLAAR!
Zelf je Joomla! template bouwen voor beginners

Contenu connexe

Similaire à Zelf je Joomla! template bouwen voor beginners

Magento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beherenMagento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beheren
Michel Doens
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development Cursus
Luciuswebsystems
 
Drupal 7 Theming
Drupal 7 ThemingDrupal 7 Theming
Drupal 7 Theming
Hans Rossel
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters Training
Luciuswebsystems
 

Similaire à Zelf je Joomla! template bouwen voor beginners (20)

Magento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beherenMagento cursus: theme opzetten & beheren
Magento cursus: theme opzetten & beheren
 
Drupal7 Theming
Drupal7 ThemingDrupal7 Theming
Drupal7 Theming
 
Lucius Drupal Development Cursus
Lucius Drupal Development CursusLucius Drupal Development Cursus
Lucius Drupal Development Cursus
 
Drupal 7 Theming
Drupal 7 ThemingDrupal 7 Theming
Drupal 7 Theming
 
Best Practice: Joomla! templating
Best Practice: Joomla! templatingBest Practice: Joomla! templating
Best Practice: Joomla! templating
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!
 
The power of joomla!
The power of joomla!The power of joomla!
The power of joomla!
 
NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)NL Front-end Guidelines (HTML,CSS,Javascript)
NL Front-end Guidelines (HTML,CSS,Javascript)
 
Magento webwinkel starten & optimaliseren
Magento webwinkel starten & optimaliserenMagento webwinkel starten & optimaliseren
Magento webwinkel starten & optimaliseren
 
Drupal 6 Theming
Drupal 6 ThemingDrupal 6 Theming
Drupal 6 Theming
 
How to create a Drupal theme (Dut
How to create a Drupal theme (DutHow to create a Drupal theme (Dut
How to create a Drupal theme (Dut
 
Daarom Joomla! - Makkelijk content publiceren
Daarom Joomla! - Makkelijk content publicerenDaarom Joomla! - Makkelijk content publiceren
Daarom Joomla! - Makkelijk content publiceren
 
Presentatie WordPress Theme Frameworks WordCamp NL 2010
Presentatie WordPress Theme Frameworks WordCamp NL 2010Presentatie WordPress Theme Frameworks WordCamp NL 2010
Presentatie WordPress Theme Frameworks WordCamp NL 2010
 
Drupal Uitgebreide Starters Training
Drupal Uitgebreide Starters TrainingDrupal Uitgebreide Starters Training
Drupal Uitgebreide Starters Training
 
1.7 terugblik module 1
1.7 terugblik module 11.7 terugblik module 1
1.7 terugblik module 1
 
Lucius Websystems Drupal Startersdag
Lucius Websystems Drupal StartersdagLucius Websystems Drupal Startersdag
Lucius Websystems Drupal Startersdag
 
XPages Introductie
XPages IntroductieXPages Introductie
XPages Introductie
 
Joomla backend-beheer vereenvoudigen - Joomladagen 2016
Joomla backend-beheer vereenvoudigen - Joomladagen 2016Joomla backend-beheer vereenvoudigen - Joomladagen 2016
Joomla backend-beheer vereenvoudigen - Joomladagen 2016
 
Mijn eerste Joomla! plugin
Mijn eerste Joomla! pluginMijn eerste Joomla! plugin
Mijn eerste Joomla! plugin
 
Wdreader1
Wdreader1Wdreader1
Wdreader1
 

Zelf je Joomla! template bouwen voor beginners

  • 1. Zelf je template bouwen Deel 1: absolute beginners
  • 2. Even voorstellen… Rachel Walraven Webdesigner (sinds 1998) Mail: rachel@walravenwebwerk.nl Web: https://walravenwebwerk.nl Tel: 06 13391722
  • 3. Wat gaan we doen • Opbouw van de template bekijken • Bestanden ontleden • Bepalen waar wat moet komen • Beeeetje PHP Resultaat: je eerste eigen template! / kennis om er mee te starten.
  • 4. Bestanden • Alle bestanden in 1 map • templateDetails.xml • index.php Aangevuld met: • template_preview.png • template_thumbnail.png • css/template.css
  • 5. templateDetails.xml Doel: Geeft Joomla informatie over de template Bevat: • Naam, auteur etc. • Bestanden • Module posities En verder: • Opties
  • 6. templateDetails.xml Het is een extensie, voor joomla versie 3.3 en hoger, van het type template, voor de site en heeft een upgrade mogelijkheid.
  • 10. index.php Doel: De structuur van de pagina Bevat o.a • Positie van component • Posities van Modules • Positie van Messages • Positie van Debug info
  • 15. Codes Component <jdoc:include type="component" /> Bericht <jdoc:include type="message" /> Module <jdoc:include type="modules“ name="NAAM" style="xhtml" /> Debug info <jdoc:include type="modules“ name="debug" style="none" />
  • 16. Code toegepast <div class=“wrapper”> <div class=“header”> <div class=“logo”> <jdoc:include type="modules" name=“logo" style="xhtml"/> </div> <div class=“navigatie”> <jdoc:include type=“modules” name=“position-1 ”style=“xhtml”/> </div> </div> <div class=“contentarea”> <div class=“content”> <jdoc:include type=“message” /> <jdoc:include type=“component” /> </div> <div class=“sidebar”> <jdoc:include type="modules" name=“sidebar" style="xhtml"/> </div> </div> <div class=“footer”> <jdoc:include type="modules" name=“footer" style="xhtml"/> </div> </div> <jdoc:include type="modules" name=“debug" style="xhtml"/>
  • 17. template.css Doel: Opmaak van de pagina Linken in index.php: (plaatsen tussen <head> en </head> tags) <link rel="stylesheet" href="<?php echo $this->baseurl ?> /templates/<?php echo $this->template; ?>/css/template.css" type="text/css" />
  • 18. template_preview.png template_thumnail.png • Doel: Laten zien van voorbeeld in het beheergedeelte. • Afmetingen: preview = 800 x 600 pixels thumbnail = 206 x 150 pixels • Template werkt ook zonder deze bestanden &
  • 19. Installeren • Map met alle bestanden zippen • Installeren zoals je gewend bent • Of map met alle bestanden uploaden naar map templates • Naar Extensies > Ontdekken (extensions > discover) • Selecteer gevonden template en klik op Install (installeren) • Ga naar Extensies > Templates en maak default
  • 20. Stapje verder? Rekenen met modules! <?php if ($this->countModules('NAAM')) : ?> <jdoc:include type="modules" name="NAAM" style="xhtml"/> <?php endif; ?> <?php if ($this->countModules(‘NAAM')) : ?> <div class=“moduleblok”> <jdoc:include type="modules" name="NAAM" style="xhtml"/> </div> <?php endif; ?>
  • 21. Stapje verder? <?php if ($this->countModules('NAAM1 or NAAM2')) : ?> <div class=“blokken”> <div class=“blokje1”> <jdoc:include type="modules" name="NAAM1" style="xhtml"/> </div> <div class=“blokje2”> <jdoc:include type="modules" name="NAAM2" style="xhtml"/> </div> </div> <?php endif; ?> or kan ook and zijn (of = de een of de ander, and = de een en de ander)
  • 22. Stapje verder? Dit kan je ook kleiner toepassen… <div class=“<?php if ($this->countModules(‘NAAM1 or NAAM2')) :?> blok<?php endif; ?> <?php if ($this->countModules(‘NAAM1 and NAAM2’)) : ?>blokken<?php endif; ?>”> <div class=“blokje blk1”> <jdoc:include type="modules" name=“NAAM1" style="xhtml"/> </div> <div class=“blokje blk2”> <jdoc:include type="modules" name=“NAAM2" style="xhtml"/> </div> </div>
  • 23. Stapje verder? Wanneer er alleen een module actief is op positie NAAM1 resulteert dit in: <div class=“blok”> <div class=“blokje blk1”> <div class=“moduletable”> Inhoud module </div> <div class=“blokje blk2”> <div class=“moduletable”> </div> </div> </div>
  • 24. Stapje verder? Wanneer er zowel op positie NAAM1 als NAAM2 een module actief is resulteert dit in: <div class=“blok blokken”> <div class=“blokje blk1”> <div class=“moduletable”> Inhoud module </div> <div class=“blokje blk2”> <div class=“moduletable”> Inhoud module </div> </div> </div>
  • 25. Zelf aan de slag • Geef je template een naam • Richt de templateDetails.xml in • Maak een indeling in je index.php zodat je dit kan krijgen -> • Pas naar wens opmaak toe in de template.css • Installeer dit in je eigen testomgeving
  • 26. Resumé • Nodig: index.php en templateDetails.xml • Alles in 1 map. Mapnaam gelijk aan template naam • Bestanden en moduleposities in templateDetails.xml verwerken • Zippen en installeren of via ftp in map templates plaatsen KLAAR!

Notes de l'éditeur

  1. Doel: Joomla vertellen dat het een template is, hoe die heet, wie het gemaakt heeft, welke bestanden geinstalleerd moeten worden, welke module posities gebruikt worden en eventueel opties.
  2. Doel: Joomla vertellen dat het een template is, hoe die heet, wie het gemaakt heeft, welke bestanden geinstalleerd moeten worden, welke module posities gebruikt worden en eventueel opties.
  3. Doel: Joomla vertellen dat het een template is, hoe die heet, wie het gemaakt heeft, welke bestanden geinstalleerd moeten worden, welke module posities gebruikt worden en eventueel opties.
  4. Doel: Joomla vertellen dat het een template is, hoe die heet, wie het gemaakt heeft, welke bestanden geinstalleerd moeten worden, welke module posities gebruikt worden en eventueel opties.
  5. Doel: Joomla vertellen dat het een template is, hoe die heet, wie het gemaakt heeft, welke bestanden geinstalleerd moeten worden, welke module posities gebruikt worden en eventueel opties.