Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Zelf je Joomla! template bouwen voor beginners

272 views

Published on

Zet je eerste stappen in het zelf ontwikkelen van een template voor het CMS Joomla!. Benodigde kennis: HTML en CSS

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Zelf je Joomla! template bouwen voor beginners

  1. 1. Zelf je template bouwen Deel 1: absolute beginners
  2. 2. Even voorstellen… Rachel Walraven Webdesigner (sinds 1998) Mail: rachel@walravenwebwerk.nl Web: https://walravenwebwerk.nl Tel: 06 13391722
  3. 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. 4. Bestanden • Alle bestanden in 1 map • templateDetails.xml • index.php Aangevuld met: • template_preview.png • template_thumbnail.png • css/template.css
  5. 5. templateDetails.xml Doel: Geeft Joomla informatie over de template Bevat: • Naam, auteur etc. • Bestanden • Module posities En verder: • Opties
  6. 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.
  7. 7. templateDetails.xml
  8. 8. templateDetails.xml
  9. 9. templateDetails.xml
  10. 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
  11. 11. index.php
  12. 12. index.php
  13. 13. index.php
  14. 14. index.php
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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!

×