Module Chrome: personalizzare l'output di un modulo in Joomla!

Coloro i quali realizzano templates per Joomla!, dovendo creare un sito con particolari impostazioni grafiche, si sarà reso conto che nel file index.php devono essere inseriti snippet di codice che richiamino i moduli in specifiche posizioni predefinite. Di default Joomla!  prevede sei modi di output per stampare a video un modulo. Essi sono:

  1. raw / none: output "grezzo" dei contenuti del modulo, senza nessun elemento html che li contiene. La visualizzazione è la medesima;
  2. table: output del modulo inserito in una tabella;
  3. horz: output del modulo presentato come tabella inserita, a sua volta, in un'altra tabella;
  4. xhtml: output del modulo racchiuso in un elemento div;
  5. rounded: output del modulo racchiuso in div annidati, con possibilità di poter avere angoli arrotondati;
  6. outline: output del modulo racchiuso all'interno di bordi tratteggiati, all'interno del quale è possibile leggere il nome dato al modulo.

Le differenti visualizzazioni prodotte da ciascuno stile assegnato al modulo, verranno trattate nel prosieguo dell'articolo.

Tornando alla descrizione di cosa si intende per Module Chrome, possiamo assimilarla a degli elementi formati da codice HTML predefinito, i quali possono trovarsi all'esterno, prima o dopo i contenuti di un modulo e che è possibile formattare ricorrendo all'ausilio dei CSS. Il Module Chrome è principalmente utilizzato per presentare i contenuti di un modulo con bordi, bordi arrotondati ecc. (si faccia riferimento, ad esempio, ai menu del template rhuk_milkyway).

Affinchè le diverse visualizzazioni del Module Chrome possano entrare in azione, è necessario che nello statement che richiama il modulo sia presente l'attributo style. In un articolo precedente è stato ampiamente trattato l'argomento inerente gli Jdoc statement di Joomla!

Si veda il seguente statement di esempio, da inserire nel file index.php; esso richiama un modulo nella posizione left - precedentemente creata nel file templateDetails.xml:

<jdoc:include type="modules" name="left" style="Stile personalizzato del modulo"  />

Da notare come - con il codice appena riportato - lo stesso output di un modulo verrà applicato a tutti i moduli presenti nella posizione left. In altri termini, se si devono presentare e video più di un modulo all'interno della stessa colonna, volendo un output differente per ognuno di essi, è necessario "istanziare" tante posizioni quanti sono i moduli. Esempio:

<jdoc:include type="module" name="user1" style="Nome stile" />

<jdoc:include type="module" name="user2" style="Nome stile" />

Come anticipato all'inizio dell'articolo circa le diverse visualizzazioni di un modulo in Joomla!, il CMS prevede delle modalità predefinite di presentazione. Nello specifico vedremo il codice HTML prodotto e come viene reso nel frontend del sito, a seconda dello style associato al modulo stesso./p>

Style raw

<ul id="mainlevel_menu">      
<li><!-- contenuti voci menu --></li>
</ul> 
raw style
Raw Style

Style table

<table cellpadding="0" cellspacing="0" class="moduletable_menu"> 
<tr>     
<th valign="top">Menu Principale</th>
</tr>     
<tr>         
<td>             
<ul id="mainlevel_menu">               
<li><!-- contenuti voci menu --></li>             
</ul>          
</td>  
</tr>
</table> 
raw style
Table Style

Style horz

<table cellspacing="1" cellpadding="0" border="0" width="100%">     
<tr> 	
<td valign="top">	   
<table cellpadding="0" cellspacing="0" class="moduletable_menu">                  
<tr>                     
<th valign="top">Menu Principale</th>                 
</tr>                
<tr>                 
<td>                   
<ul id="mainlevel_menu">                      
<li><!-- contenuti voci menu --></li>                    
</ul>                 
</td>             
</tr>        
</table>     
</td>    
</tr> 
</table> 
Horizontal style
Horizontal Style

Style xhtml

<div class="moduletable_menu">   
<h3>Menu Principale</h3>      
<ul id="mainlevel_menu">        
<li><!-- contenuti voci menu --></li>    
</ul>
</div>
XHTML style
XHTML Style

Style rounded

<div class="module_menu">   
<div>     
<div> 	
<div>            
<h3>Menu Principale</h3>              
Contenuti Menu            
</div>        
</div>     
</div> 
</div>         
Rounded style
Rounded Style

Style outline

<div class="mod-preview">   
<div class="mod-preview-info">left[outline]</div>        
<div class="mod-preview-wrapper"> 	   
<ul id="mainlevel_menu">               
<li><!-- contenuti voci menu --></li>          
</ul>   
</div>
</div> 
Outline style
Outline Style

In questo primo approccio con i moduli di Joomla! si è avuta la possibilità di capire meglio quanto è più semplice e personalizzabile un output che si potrebbe cambiare a nostro piacimento.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati