Joomla Show

28-02-2008 18:00

Scritto da Bigham

Questo articolo è la traduzione dell'articolo "Collapse modules tutorial for joomla" pubblicato su You Joomla

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.

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

<div id="<? echo $maincontent; ?>">
    <div id="<? echo $content; ?>">
    <?php mosMainBody(); ?>
    <?php if (mosCountModules('left')) {?>
        <div id="modleft">
            <div class="inside">
                <?php mosLoadModules('left',-2);?>
            </div>
        </div>
    <?php } ?>
    </div>
    <?php if (mosCountModules('right')) { ?>
    <div id="modright">
        <div class="inside">
            <?php mosLoadModules('right',-2);?>
        </div>
    </div>
    <?php } ?>
</div>

Come vedete al posto di scrivere:

<div id="nome_classe">
    <div id="nome_classe">
        contenuto
    </div>
</div>

Abbiamo usato la variabile $maincontent in questo modo.

<div id="<? echo $maincontent; ?>">

 

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 */

Ora non ci resta che giocare con i moduli provando a pubblicare/sospendere i moduli nelle posizioni "left" e "right" e vedendo cosa succede. Potete anche ad esempio fare in modo che i moduli di destra non vengano caricati in una certa pagina (funzionalità di assegnamento disponibili nella pagina di amministrazione dei singoli moduli sulla destra) facendo in modo che solo quella pagina abbia un'aspetto diverso dalle altre.

E questo è tutto.

Commenti utenti  

Visualizza 4 di 4 commenti

Aggiungi il tuo commento