Colonne collassabili
Come per i moduli collassabili anche in questo caso vedremo quali sono i principi con i quali possiamo
far collassare, in un template a tre colonne, una o ambedue le colonne di destra e sinistra.
Le colonne di destra e sinistra altro non sono che due zone blocchi modulo. In genere sono indicate
con i nomi left e right.
Vediamo come realizzare il codice php del template.
L'articolo è la traduzione di quello riportato su You Joomla
Il principio che il codice php che andremo a scrivere segue questa logica:
"Se il modulo destro e il modulo sinistro sono pubblicati imposta la larghezza dei container al valore X,
altrimenti se solo il modulo destro è pubblicato imposta la larghezza del contenitore al valore Y,
altrimenti se nessuno dei moduli destro e sinistro sono pubblicati allarga la dimensione del contenitore
per i contenuti alla larghezza massima."
Inseriamo nel file index.php, prima di definire la struttura della pagina, il seguente codice:
//Inizio moduli collassabili
$left = mosCountModules( 'left' ); //Modulo di sinistra
$right = mosCountModules( 'right' );// Modulo di destra
 if ( $left && $right ) { // se tutti e due i moduli sono pubblicati
    $maincontent = 'main-body'; // usa il div main-body
    $content = 'content'; // e usa il div content per i contenuti
 } elseif ( $left ) { // altrimenti se solo il modulo sinistro è pubblicato
    $maincontent = 'main-body-left'; // usa il div main-body-left
    $content = 'content-left'; // e usa il div content-left per i contenuti
 } elseif ( $right ) { //altrimenti se solo il modulo destro è pubblicato
    $maincontent = 'main-body-right'; // usa il div main-body-right
    $content = 'content-right'; // e usa il div content-right per i contenuti
 } else { // altrimenti (non è pubblicato nessun modulo
    $maincontent = 'main-body-full'; // usa il div main-body-full
    $content = 'content-full'; // e usa il div content-full
}// Fine Moduli Collassabili
Abbiamo così creato due variabili: la variabile $maincontent che conterrà il nome della classe del foglio di stile da utilizzare per dimensionare e formattare graficamente il container div usato per il main-body e la variabile $content che conterrà il nome della classe del foglio di stile che verrà utilizzata per il container div per i contenuti.
Adesso vediamo in che modo utilizzare queste due variabili
Il codice che segue è un esempio di come definire i container div utilizzando le due variabili create dal codice precedente all'interno del template di joomla
<!--START MAIN BODY-->
<div id="">
<div id="">
     <div id="modleft">
         <div class="inside">
     <div id="modright">
       <div class="inside">
             <?php mosLoadModules('right',-2);?>
      Â
</div>
     </div>
  <?php } ?>
</div> <!--END CONTAINER-->
Come vedete al posto di scrivere
Abbiamo usato la variabile $maincontent per sostituire il nome della classe. Tale nome viene devinito nel codice php che abbiamo messo sopra
<div id="">
Â
Definiamo adesso il foglio di stile del template
/*------------------------------------------------------------------------
# COLLAPSE MODULES TUTORIAL BY YOUJOOMLA.COM
# ------------------------------------------------------------------------
#Copyright (C) 2006-2007 Youjoomla.com, All Rights Reserved.
-------------------------------------------------------------------------*/
body {
text-align:center;
background:#999;
}
#topmenu{
margin:0 auto;
width:80%;
text-align: left;
}
#wrap{
text-align: left;
background:#CCCCCC;/*like already said,just to add some color*/
float:left;
padding: 20px 5px 20px 5px;
}
#container {
width:100%; /*center hack*//*THIS IS THE MAIN CONTAINER FOR ALL DIVS*/
margin:0 auto; /*center hack*/
text-align:left;
background: #cccccc;
}
#modright { /*THIS IS MODULE RIGHT*/
background:#800040;
color:#fff;
float:right;
width:17%;
overflow:hidden;
margin-left:-3px;
}
#modleft { /*THIS IS MODULE LEFT*/
background:#0099FF;
color:#fff;
float:left;
width:19%;
overflow:hidden;
margin-right:-3px;
}
.inside { /*THIS IS CLASS TO PUSH THE MODULE TABLE OF THE EDGES A BIT*/
padding:7px;
}
/*COLAPSE MODULES FUNCTIONS */
/*LEFT AND RIGHT MODULES VISIBLE */
#main-body { /*THIS IS MAIN DIV HOLDS THE CONTENT DIV*/
float:left;
width:83%;
}
#content { /*THIS IS CONTENT DIV AND YOUR MAINBODY IS INSIDE OF IT*/
text-align:left;
float:right;
width:80%;
}
/*COLAPSE LEFT MODULE ONLY*/
#main-body-right {
float:left;
width:80%;
}
#content-right {
text-align:left;
float:left;
width:100%;
}
/*COLAPSE RIGHT MODULE ONLY*/
#main-body-left {
float:left;
width:100%;
padding-right:10px;
}
#content-left {
text-align:left;
float:right;
width:80%;
overflow:hidden;
}
/*COLAPSE RIGHT AND LEFT MODULE */
#main-body-full {
float:left;
width:100%;
}
#content-full {
margin:0 auto;
text-align:left;
width:90%;
}
/*END COLAPSE MODULES FUNCTIONS */
E questo è tutto
|
Commenti