Das Erscheinungsbild von Modulen anpassen (modChrome)

Bewertung:  / 3
SchwachSuper 
Wer etwas tiefer in die Templategestaltung einsteigen möchte und dabei für sein Template das Style-Verhalten von Modulen ändern will, oder für einzelne oder eine Gruppe von Modulen neue Styles hinzufügen möchte, kann das in Joomla über die modChrome-Funktion realisieren. Im Beipiel beziehe ich mich auf die Template-Engine JYAML von Hieblmedia.
 
 

Wie wird modChrome genutzt und aufgerufen?

 
Der Aufruf erfolgt im Haupttemplatescript index.php, so wie bekannt über z.b. in nachfolgender Weise:
 
templates/hm_yaml/html/index/THEME/index.php
1
2
3
4
5
6
7
8
9
10
11
<?php
 if($this->countModules( 'teaser' )) :
 $jyaml->getPosition('modules', 'teaser', 'rounded', ''); 
 endif;
?>

<?php
 if($this->countModules( 'HeadFuncModules' )) :
 $jyaml->getPosition('modules', 'HeadFuncModules', 'headfunctionmodule', ''); 
 endif;
?>

Die "Pflichtparameter" sind type, name und style. Ein weiterer Parameter kann genutzt werden um diverse Variablen (Attribute) zu übergeben, die durch modChrome interpretiert werden. Dazu gleich mehr. Zu den ersten beiden Parametern type und name muss wohl nichts gesagt werden, das ist in vielen anderen Artikeln zum Joomla Template und PatTemplate hinreichend dokumentiert (z.B. hier). Mit dem Style-Paramter übergeben wir in unserem Beispiel den Bezeichner teaser. Damit wird in der Funktion modChrome festgelegt, welcher Style verwendet werden soll. Im Anderen Fallbeispiel wird hier rounded verwendet. rounded ist eine der vorgefertigten hm_yaml-Styles, so wie es z.B. auch xhtml, table, none und horz gibt. Im zweiten Fallbeispiel wollen wir einen eigenen Style headfunctionmodule in der Modulposition HeadFuncModules verwenden.

 

Was passiert bei modChrome?

Im Detail passiert folgendes: Verantwortlich für individuell modChrome-Definitionen ist das Script modules.php. Bei JYAML liegt das im Verzeichnis joomlarootpfad/templates/hm_yaml/html/. Enhalten ist dort schon ein Beispiel mit dem Bezeichner jyaml Der Bezeichner jyaml wird montiert zum Methodennamen modChrome_jyaml. Genau diese Methode muss in modules.php existieren und ist die für den Style verantwortliche. Es können dann also in modules.php mehrere modChrome-Methoden definiert werden und somit wie oben als Wunschstyle definiert und wahlweise in der Templates-index.php aufgerufen werden.

Hier also mal ein Beispiel wie so eine Methode aussehen kann. Erzeugt wird ein flexibler Modulestyle, welcher einen Border um das Modul zieht, einen Module-Titel auf einem separaten farbigem Hintergrund ausgibt und den Module-Inhaltsbereich mit einem Schatten Links und oben versieht. Außerdem kann das Module ein Modulbild enthalten, welches wiederum mit einer Link versehen werden kann.

templates/hm_yaml/html/modules.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<?php
function modChrome_jyaml($module, &$params, &$attribs)
{
 $headerLevel = isset($attribs['headerLevel']) ? $attribs['headerLevel'] : '3';
 $cssId = isset($attribs['cssId']) ? ' id="'.$attribs['cssId'].'"' : '';
 $bkColor = isset($attribs['bgColor']) ? ' style="background:'.$attribs['bgColor'].';"' : '';
 $linkStart = isset($attribs['link']) ? ' <a href="' . $attribs['link'] . '" style="color:#333; text-decoration:none;">' : '';
 $linkEnde = isset($attribs['link']) ? '</a>' : '';
 $modulId = ' id#' . $module->id;
 $TeaserMenuBoxHeight = isset($attribs['items'])? ' style="height:' . ($attribs['items']*24 + 125) .'px"' : ''; 
// echo "modChrome_jyaml" . $TeaserMenuBoxHeight;
 if (!empty ($module->content)) : ?>
 <div class="modBox">
 <?php if ($module->showtitle) : ?>
 <?php echo $linkStart ?><div<?php echo $bkColor ?> class="modBoxTitle"><?php echo $module->title; ?><?php echo $linkEnde ?></div>
 <?php endif; ?>
 <div class="modBoxContent"<?php echo $TeaserMenuBoxHeight?>>
 <?php if (isset($attribs['img'])) : ?>
 <div class="modBoxMotivBkGd">
 <?php echo $linkStart ?><img src="/<?php echo $attribs['img'] ?>"><?php echo $linkEnde ?>
 <div class="modBoxMotivShdwLft pngTrans"></div>
 </div>
 <?php endif; ?> 
 <div class="floatbox TeaserMenu module<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $module->content; ?></div>
 <div class="modBoxShdwTop pngTrans"></div>
 </div>
 </div>
 <?php endif;
}


function modChrome_pvh($module, &$params, &$attribs)
{
 $headerLevel = isset($attribs['headerLevel']) ? $attribs['headerLevel'] : '3';
 $cssId = isset($attribs['cssId']) ? ' id="'.$attribs['cssId'].'"' : '';
 $bkColor = isset($attribs['bgColor']) ? ' style="background:'.$attribs['bgColor'].';"' : '';
 $imgPath = isset($attribs['imgPath']) ? $attribs['imgPath'] : '/templates/hm_yaml/images/pvh/';
 $modulId = ' id#' . $module->id;
 $TeaserMenuBoxHeight = isset($attribs['items'])? ' style="height:' . ($attribs['items']*24 + 125) .'px"' : ''; 
// echo "modChrome_jyaml";
echo $TeaserMenuBoxHeight;
 if (!empty ($module->content)) : ?>
 <?php if ($module->showtitle) : ?>
 <div<?php echo $cssId . $bkColor ?> class="TeaserMenuBoxTitle"><?php echo $module->title; ?></div>
 <?php endif; ?>
 <div class="TeaserMenuBox"<?php echo $TeaserMenuBoxHeight?>>
 <div class="TeaserMenuMotivBkGd"><img src="/<?php echo $imgPath; ?>/TM_Stifte.jpg"></div>
 <div class="floatbox TeaserMenu module<?php echo $params->get('moduleclass_sfx'); ?>"><?php echo $module->content; ?></div>
 <div class="TeaserMenuShaddowTop pngTrans"></div>
 <div class="TeaserMenuShaddowLeft pngTrans"></div>
 </div>
 <?php endif;
}


function modChrome_slider($module, &$params, &$attribs)
{
 jimport('joomla.html.pane');
 // Initialize variables
 $sliders = & JPane::getInstance('sliders');
 $sliders->startPanel( JText::_( $module->title ), 'module' . $module->id );
 echo $module->content;
 $sliders->endPanel();
}

?>

 

Natürlich sind die Styles zu diesem Module-Style in CSS-Dateien hinterlegt und hier werden nur die Classen-Selectoren erzeugt.

 

Wenn Ihnen dieser Beitrag geholfen und viel Zeit gespart hat, zeigen Sie sich erkenntlich: Über einen Klick auf Google+1 oder Rückmeldungen freue ich mich. Zeigen Sie mir, dass sich die Mühe für die Beitragerstellung gelohnt hat. Schenken Sie auch den Produktwerbungen Ihre Beachtung, denn damit wird mein Aufwand für diese Beiträge refinanziert.

  • Keine Kommentare gefunden

Einen Kommentar verfassen

Als Gast kommentieren

0
Deine Kommentare erfordern die Moderation durch den Administrator
Nutzungsbedingungen.
Suche - Kategorien
Suche - Inhalt
plg_search_attachments
VM - Search, Virtuemart Product

Ihr Warenkorb

 x 
Ihr Warenkorb ist noch leer.