include

We naderen het eind van de upgrade van het Plankenkoor template. Het stramien van de pagina is nu in DIVs opgebouwd; nu is het tijd om ook de stukjes code die we voorheen nog insloten met een include op een Joomla manier in te sluiten. Ook gaan we de randen van deze onderdelen op een nieuwe CSS manier opbouwen.

Terug naar jdoc:include
De manier om in Joomla een module in te sluiten is met jdoc:include.

<jdoc:include type="modules" name="user3" />
<jdoc:include type="modules" name="user4" />

In dit voorbeeld uit het Beez template worden de modules user3 en user4 ingesloten. In het Plankenkoor template maken we hier nog geen gebruik van:

<!-- 4. left (side navigation en contact) -->
<div id="left">
<!-- side navigation -->
  <?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_sidenavigation.php' ); ?>
<!-- //sidenavigation -->
<br/>
<!-- contact -->
<?php include_once( $GLOBALS['mosConfig_absolute_path'] . '/templates/plankenkoor/includes/_contact.php' ); ?>
<!-- //contact -->
</div>
<!-- end left -->

Zoals je kunt zien gebruiken we include_one om twee aparte bestand in te sluiten, _sidenavigation.php en _contact.php. Het werkt, maar het is geen Joomla 1.5 methodiek. Ook in de rest van de pagina staan zulke includes.

Gebruik van jdoc:includes met stijl rounded
We gaan de includes vervangen door jdoc:includes. Daarbij geven we aan dat de style gelijk is aan ’rounded’.

<!-- 4. left (side navigation en contact) -->
<div id="left">
  <jdoc:include type="modules" name="left" style="rounded"  />
</div>
<!-- end left -->

Het effect hiervan is dat er vier geneste DIVs om de inhoud van het menu en het inlogelement van Community Builder worden gezet. Die DIVs hebben we nodig om zo direct weer de randen te kunnen maken. De pagina verliest nu tijdelijk de opmaak, want we zullen het stylesheet moeten aanpassen aan de nieuwe situatie.

rounded

Een nieuwe module maken voor de contactgegevens
De contactgegevens zijn verdwenen. Logisch, want die waren niet gemaakt via de beheeromgeving van Joomla, maar stonden ‘hard’ in het bestandje dat we insloten. Een nieuwe module kan je gemakkelijk maken via Extensies > Module beheer. Klik daar op ‘Nieuw’.

modulebeheer

Aangezien we een statische tekst gaan maken met de contactgegevens, kies ik hier voor de eerste optie: Aangepast HTML-module. Ik stel hier een paar dingen in:
1) de titel en dat deze getoond moet worden,
2) dat deze module op de positie left zit (bij het menu) en
3) een plek in de volgorde.
4) bij de Module class achtervoegsel vul ik een spatie in en dan de classenaam ‘contact’. Het voordeel hiervan is dat ik zo beschikking heb over de standaard classe ‘module’ en mijn eigen class ‘contact’. Dit scheelt later complexiteit in het CSS stylesheet.
5) Onderin geef ik nu de tekst op die ik al had.
Het effect van deze actie is:

<div class="module contact">
  <div>
   <div>
      <div>
        <h3>Contact</h3>
        <p>...</p>
      </div>
     </div>
   </div>
</div>

Het instellen van andere module en overige includes
Op dezelfde manier kan je alle andere includes vervangen door jdoc:includes en er de juiste stijl aan meegeven.

<!-- 5.a en 5.b main (topcontent en content) -->
<div id="main">
<!-- topcontent -->
<jdoc:include type="modules" name="topcontent" style="rounded"/>
<!-- topcontent -->

<!-- content -->
<jdoc:include type="component"  style="rounded"/>
<!-- content -->
</div>
<!-- end main -->

Hoe nu verder?
Het enige wat we nu nog moeten doen is de vormgeving van de elementen weer terugkrijgen. Hierover meer in het volgende artikel in deze serie.