Moduli Collassabili

Mi e' capitato spesso di vedere template di joomla con 2, 3 colonne e delle zone modulo collassabili.
Per zone collassabili si intende che, se non contengono moduli, le zone scompaiono dalla pagina
lasciando spazio per i contenuti.
Questo e' realizzabile però utilizzando template tableless ossia senza uso delle tabelle

L'articolo e' la traduzione di quello riportato su You Joomla

Anzitutto creiamo in identificativo di classe nel foglio di stile del template template_css.css:

#contenitore_moduli{
  width:100%;
  margin:0 auto;
  text-align:center;
  color:#fff;
}

Questo identificativo verra' utilizzato per dimensionare e formattare il contenitore dei moduli collassabili
Ora decidiamo quanti moduli collassabili vogliamo gestire. Ad esempio ne imposteremo 4.
Aggiungiamo nel foglio di stile:

  #mod1,#mod2,
  #mod3,#mod4{
  text-align:left;
  
  float:left; /*Questo e' il trucco!*/
}

Questa sara' la struttura dei container che conterranno i moduli:

<div id="contenitore_moduli">
        <div id="mod1"> </div>
        <div id="mod2"> </div>
        <div id="mod3"> </div>
        <div id="mod4"> </div>
</div>

Come vedete esiste un continer principale di classe "contenitore_moduli" e al suo interno 4 container, uno per ogni modulo.

Vediamo adesso come applicare il collasso dei moduli utilizzando il codice php:

<?php if (mosCountModules('user1')||
               (mosCountModules('user2')||
               (mosCountModules('user3')||
               (mosCountModules('user4')) { ?><!-- Questa istruzione recita:
se ognuno dei seguenti moduli a' pubblicato, Visualizza il container principale. 
Il container principale collassera' se nessuno dei moduli e' pubblicato-->

<div id="contenitore_moduli"><!-- Inizio container principale -->
   <!-- Questo per far collassare un modulo -->
        <div id="mod1">
   
       <div id="mod2">
   
       <div id="mod3">
   
       <div id="mod4">

La funzione mosCountModules('nome_zona_modulo') consente di sapere se in una particolare zona_modulo e' pubblicato uno o piu' moduli. La funzione infatti conta quanti moduli sono pubblicati.

La funzione mosLoadModules() consente di visualizzare un modulo in una zona modulo

Adesso scriviamo il codice che ci consenta di capire quanti moduli sono presenti e quanto dovr� essere
larga la zona che li conterrà. Questo codice andrà inserito tra i tag e del tempalte:

$nmod = 0;
if (mosCountModules('user1')) $nmod++;
if (mosCountModules('user2')) $nmod++;
if (mosCountModules('user3')) $nmod++;
if (mosCountModules('user4')) $nmod++;
// se sono pubblicati 4 moduli
if ( $nmod == 4 ) { 
  $modwidth = '24%'; // ogni modulo sar� largo il 24%
// se sono pubblicati 3 moduli
}if ( $nmod == 3 ) { 
  $modwidth = '33.3%'; // ogni modulo sar� largo il 33.3%
// se sono pubblicati 2 moduli
}if ( $nmod == 2 ) { 
  $modwidth = '49%'; // ogni modulo sar� largo il 49%
} else if ($nmod == 1) { // se � pubblicato 1 modulo
  $modwidth = '100%'; // il modulo sar� largo il 100%
}
?>

La variabile $nmod conterrà il numero di moduli pubblicati mentre la variabile $modwidth conterrà
la dimensione della zona in cui saranno pubblicati i moduli. E' evidente che se non sono pubblicati
moduli la dimensione della zona sarà zero.
Questo comporterà la scomparsa della zona sulla pagina.
Questo codice va inserito prima di definire la struttura del template. Ho utilizzato le zone da user1
a user4 a titolo esemplificativo, ma è possibile utilizzare qualsiasi altro nome di zone blocchi modulo.

Vediamo come applicare le variabili definite in base al codice sopra riportato:

<div id="contenitore_moduli"><!-- Inizio Contenitore principale-->


<div id="mod1" style="width:;" >
       

<div id="mod2" style="width:;" >
       

<div id="mod3" style="width:;" >
       

<div id="mod4" style="width:;" >
       

 

Nel caso vogliate usare questo sistema con Joomla 1.5 dovrete:

Sostituire mosCountModules con $this->countModules

 
con <jdoc:include type="modules" name="user4" style="xtml" />

Definiamo adesso le classi standard di joomla per la formattazione dei moduli:

#mod1 .moduletable,#mod2 .moduletable,
#mod3 .moduletable,#mod4 .moduletable{
  text-align:left;
  padding:5px;  
  color:#fff;
  font-size:1.1em;
}

#mod1 .moduletable h3,#mod2 .moduletable h3,
#mod3 .moduletable h3,#mod4 .moduletable h3{
  text-align:left;
  padding-left:5px;
  color:#ff6600;
  font-size:1.3em;

}

Commenti

B

i

u

Quote

Code

List

List item

URL

Nome *
Email (per verifiche & Rrisposte)
URL
Codice   
ChronoComments by Joomla Professional Solutions

Invia Commento