A presentation at Joomla User Group ‘s-Hertogenbosch The Netherlands in in 's Hertogenbosch, Netherlands by Hans Kuijpers
JOOMLA! TEMPLATE OVERRIDES ZET JOOMLA NAAR JE EIGEN HAND Presentatie van Hans Kuijpers
WAT IS EEN OVERRIDE? Een bestand dat ingeladen wordt in plaats van Joomla core.
WAAR ZIT DE OVERRIDE? Meestal in de actieve template.
WIE MAAKT DE OVERRIDE? Jij
WIE MAAKT DE OVERRIDE? Jij Echt waar… jij
WAAROM EEN OVERRIDE? Omdat de output van extensie of Joomla core net anders moet.
HOE DAN? Via de makkelijke manier.
HOE DAN? Via de makkelijke manier. Of een nog makkelijkere manier…
DE MAKKELIJKE MANIER
DEMO: AANPASSING VAN MODULE INLOGGEN
BUTTON “LOGIN” VERGROTEN Override maken van module mod_login
JA MAAR… CSS WIJZIGEN KAN TOCH OOK? .login-button { width: 100%; }
MAAR IS NIET NODIG. Protostar gebruikt Bootstrap
JOOMLA ADMINISTRATOR Extensions > Templates > Templates
BEWERK TEMPLATE Protostar Details and Files > Create Overrides > mod_login > klik
KLIK BESTAND OM TE BEWERKEN
ZOEK BUTTON LOGIN
VOEG CLASS .BTN-BLOCK TOE
EN AANSCHOUW HET RESULTAAT
NOG MAKKELIJKERE MANIER Voor mij althans
DEMO: OVERRIDE COM_CONTENT/ARTICLE default.php als verdeelpunt
STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk En bewerk
STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk Hernoem default.php naar default_default.php En bewerk
STAPPENPLAN Kopieer components/com_content/views/article/tmpl/default Plak in template/perfecttemplate/html/com_content/article/ En bewerk Hernoem default.php naar default_default.php En maak nieuw bestand default.php aan En bewerk
DEFAULT.PHP switch true i.p.v. if-then-elseif-elseif-else $this->template = JFactory::getApplication()->getTemplate(); require_once JPATH_THEMES . ‘/’ . $this->template . ‘/helper.p switch (true) { case PWTTemplateHelper::isContact(): echo $this->loadTemplate(‘contact’); break; default: echo $this->loadTemplate(‘default’); break; }
OF NOG GEKKER $informativeNL = ‘informatief’; $informativeEN = ‘informative’; $trainingNL = ‘nederlandstalig/trainingen-workshops’; $trainingEN = ‘engelstalig/courses-and-workshops’; $opleidingNL = ‘nederlandstalig/opleidingen’; $opleidingEN = ‘engelstalig/teacher-training’; $peopleNL = ‘mensen’; $peopleEN = ‘people’; $publicatieNL = ‘nederlandstalig/bronnen/publicaties’; $publicatieEN = ‘engelstalig/resources/publications’; $newsNL = ‘nieuws’;
JLAYOUTS Nog toffer speelgoed
JLAYOUTS Nog toffer speelgoed Don’t repeat yourself
DEMO: SOCIAL SHARE OP DE WEBSITE Wat is het?
DEMO: SOCIAL SHARE OP DE WEBSITE Wat is het? Lijstje met links om content te delen via Social Media
JOOMLA EXTENSION DIRECTORY Uren zoeken naar die ene die er niet is
EIGEN JLAYOUT Voorbeeldcode op Github zelf CSS toevoegen.
COM_CONTENT/CATEGORY Nog een eenvoudige om het af te leren
CATEGORY BLOG VIEW Toont titels van artikelen uit bepaalde category Toont description van category
STAPPENPLAN Kopieer blog.xml, blog.php en blog_item.php Vanuit components/com_content/views/category/tmp Naar template/perfecttemplate/html/com_content/categor En hernoem blog naar motto
MOTTO.XML Benodigd voor menu item type = Motto <layout title=”Motto” option=”Motto”> <help key = “JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG” <message> <![CDATA[‘Weergave van het motto door de jaren heen]]> </message> </layout>
MAAK MENU ITEM
BEWERK MOTTO.PHP <div class=”page__header”> <h1><?php echo $this->escape($this->params->get(‘page_head </div> <?php if (!empty($this->intro_items)) : ?> <div class=”page__content”> <div class=”page__description”> <?php echo HTMLHelper::_(‘content.prepare’, $this->cat </div> <ul><?php foreach ($this->intro_items as $key => &$item) : $this->item = &$item; echo $this->loadTemplate(‘item’); endforeach; ?> </ul> </div>
BEWERK MOTTO_ITEM.PHP $state = ($this->item->state == 0 || strtotime($this->item->pu ?> <li class=”<?php echo $state; ?>”> <?php echo $this->item->title; ?> </li>
DANK JE WEL
SLIDES Slideshare.net/hans2103
Joomla Template override is niet moeilijk. Gewoon doen en zien waar je strandt. ;-)
for free. You
can too.