Eén module anders opmaken: modulestijlen

Details

Wat zijn modulestijlen?

Misschien kent u nog de modulestijlen uit de Joomla! 1.5 template MilkyWay. Al geruime tijd kan men in Joomla gebruik maken van modulestijlen of "module chrome". Door het gebruik van deze stijlen kan men een bepaalde module anders opmaken.

In Joomla! 1.5 had je enkel de keuze uit een aantal opgemaakte modulestijlen die beschikbaar waren in je template. In Joomla! 3 zijn er ook een aantal Bootstrap-stijlen standaard aanwezig.

In het index.php bestand van je template worden de modules opgenomen via jdoc:include.

<?php if ($this->countModules('position-7')) : ?> <div id="aside" class="span3">  <jdoc:include type="modules" name="position-7" style="well" />  </div> <?php endif; ?>

Hierboven een voorbeeld van de Protostar template om de modules op te nemen die gepubliceerd worden in modulepositie 7 (rechts).

<jdoc:include type="modules" name="position-7" style="well" />

Zoals je merkt worden de modules in "position 7" gekoppeld aan de stijl "well" . Dit is de standaard stijl van modules in "position 7" in de Protostartemplate. Dit verklaart ook waarom een module die gepubliceerd wordt in een andere positie een heel andere opmaak kan hebben.

Hieronder enkele voorbeelden uit de Beez-template:

<jdoc:include type="modules" name="position-4" style="beezHide" headerLevel="3" state="0 " />
<jdoc:include type="modules" name="position-5" style="beezTabs" headerLevel="2" id="3" />

Modules die gepubliceerd worden in position 4 krijgen automatisch de stijl "beezHide", deze in position 5 de stijl "beezTabs":

In dit geval zijn de parameters van jdoc:include ook voorzien van de nodige instellingen voor JavaScript (bv: id="3"), of een "state" die aangeeft of de module in- of uitgeklapt is.

Bedenk ook dat de uiteindelijke layout van je pagina afhankelijk is van een aantal iF-statements die aanwezig zijn in je template. bv. ALS er modules aanwezig zijn op positie 7 DAN krijgt deze span3-breedte (Bootstrap) EN zal de breedte van je main (component) aangepast worden. Of ALS er geen rechterkolom is DAN mag de linkerkolom breder.

Omdat de beschikbare templatestijlen afhankelijk zijn van je template is het handig om de documentatie of de demo aandachtig te bekijken.

Een andere modulestijl kiezen

Zoals uit het voorgaande gebleken is, is de stijl van je module afhankelijk van de positie en de standaard stijl. Je kan de standaardstijl echter gemakkelijk overschrijven via de parameters van je module:

Extensies > Modulebeheer > kies je module >Opties > Geavanceerde opties > Modulestijl

Overgenomen

Standaard instelling is "Overgenomen". Dit wil zeggen dat de standaardstijl wordt gebruikt die is gedefinieerd in je index.php bestand. In de Protostartemplate op positie 7 is dit "Well". (zie hierboven)

System

Hierin staan een aantal stijlen die steeds aanwezig zijn. De modulechrome uit deze lijst wordt gedefineerd in:

- template/system/html/module.php (standaard Joomla module stijlen)

Als je het bestand bekijkt krijg je een mooi overzicht van de structuur van de modulestijlen:

- - none: enkel de inhoud van de module wordt weergegeven. De titel wordt niet weergegeven, ook als deze is ingesteld op "Toon" via de moduleopties. Ook eventuele opmaakkenmerken op het tabblad "Geavanceerd", zoals "Module class achtervoegsel", worden niet gebruikt.
  - html5: speciaal gemaakt voor de weergave van HTML5-elementen zoals aside, address, article, ... Deze tags geven een semantische betekenis aan je HTML-structuur. Je kan het HTML5-element kiezen via de optie Module-tag op het tabblad "Geavanceerd" van je module.
    
    Naast de Module-tag kan je bij de modulestijl "html5" ook gebruik maken van een "Module class achtervoegsel", "Bootstrap-grootte" (de breedte van je module volgens het grid-systeem van Bootstrap), "Koptekst-tag" (De HTML-tag van de titel van je module: H1, H2, ...) en "Koptekst class" (een bijkomende class voor de titel van je module).
    
    Bovenstaande instellingen resulteren in:
  - table: zet je module in tabel-structuur
    
    Enkel een eventuele "Module class achtervoegsel" wordt toegepast, de andere opmaak-eigenschappen niet. Tabellen zijn echter af te raden voor positionering van modules, gebruik ze enkel voor de weergave van "tabelgegevens".
  - horz: een tabel-structuur met tabel-in-tabel
  - xhtml: div-tag met H3 voor de moduletitel
    
    Enkel een eventuele "Module class achtervoegsel" wordt toegepast, de andere opmaak-eigenschappen niet.
  - rounded: meerdere geneste div-tags. Werd vroeger gebruikt om modules te voorzien van afgeronde hoeken.
    
    Enkel een eventuele "Module class achtervoegsel" wordt toegepast, de andere opmaak-eigenschappen niet.
  - outline: deze modulestijl ken je waarshijnlijk van de preview van je templateposities

Belangrijk! Hieruit blijkt dat de opmaak-eigenschappen van je module op het tabblad "Geavanceerd" niet altijd worden toegepast maar afhankelijk zijn van de mogelijkheden van je modulechrome. Deze eigenschappen zullen dus niet werken bij sommige modulestijlen.

Modulestijlen van je template

De meeste templates zijn voorzien van een aantal ingebouwde modulestijlen. Deze stijlen zijn gedefineerd in het bestand modules.php.

- template/protostar/html/modules.php

Voor de Protostar-template zijn dit:

- - no: deze stijl is bijna identiek aan de system-stijl "none". Het enige verschil is dat een eventuele "Module class achtervoegsel" wel wordt gebruikt.
  - well: te vergelijken met de system-stijl "xhtml". De modulestijl is voorzien van css-selectors van de Protostar-template (well, page-header).

In principe kan je ook modulestijlen kiezen die niet behoren tot je actieve template. Bedenk wel dat de bijhorende CSS-bestanden niet gebruikt zullen worden. Een modulestijl bevat immers alleen de HTML-structuur met bijhorende CSS-selectors, niet de CSS-regels zelf.

Zelf een modulestijl aanmaken

Het bestand modules.php in je template map kan je gebruiken om je eigen modulestijlen aan te maken.

- template/protostar/html/modules.php

Je zou bijvoorbeeld een HTML5-versie kunnen maken voor de Protostar-template door de HTML5-versie van de system te combineren met de well-modulestijl:

/* * html5 (chosen html5 tag and font headder tags with well) */ function modChrome_html5well ($module, &$params, &$attribs) { $moduleTag = $params->get('module_tag', 'div'); $headerTag = htmlspecialchars($params->get('header_tag', 'h3')); $bootstrapSize = (int) $params->get('bootstrap_size', 0); $moduleClass = $bootstrapSize != 0 ? ' span' . $bootstrapSize : '';// Temporarily store header class in variable $headerClass = $params->get('header_class'); $headerClass = !empty($headerClass) ? ' class="' . htmlspecialchars($headerClass) . '"' : '';if (!empty ($module->content)) : ?> <<?php echo $moduleTag; ?> class="moduletable<?php echo htmlspecialchars($params->get('moduleclass_sfx')) . $moduleClass; ?>"><?php if ((bool) $module->showtitle) :?> <<?php echo $headerTag . $headerClass . '>' . $module->title; ?></<?php echo $headerTag; ?>> <?php endif; ?><?php echo $module->content; ?></<?php echo $moduleTag; ?>><?php endif; }

Gebruik wel een unieke functienaam: function modChrome_html5well

Wijzig class="moduletable in class="well om de well-selector te behouden.

meer info op http://docs.joomla.org/Applying_custom_module_chrome

Details: Laatst bijgewerkt: 02 oktober 2016; Hits: 5367