Comprendere, Configurare e Modificare un Template di Joomla

jarod1981® · 20-08-2008, 11.22.05

Premessa

Questa guida fa riferimento ai template di Joomla fino alla versione 1.0.13. Scopo di questa guida è dare le informazioni di base necessarie a chi si avvicina per la prima volta a Joomla e vuole personalizzare il proprio template. La guida si baserà su un modello di template già pronto spiegandone le varie componenti e le possibili soluzioni per la sua personalizzazione.

Scarichiamo il template.

Per cominciare scarichiamo il template jt_simplicity_green. Ne ho scelto uno relativamente semplice e con una grafica essenziale.

Cosa serve per lavorare.

Per lavorare con tranquillità avremo bisogno dei seguenti strumenti:

un editor php, meglio se uno che consenta di vedere la struttura della pagina prima di visualizzarla nel browser;
un editor css che abbia come caratteristica la possibilità di vedere in anteprima le modifiche apportate al file di stile;
un programma di grafica e fotoritocco è importante se si vuole modificare la grafica (che però non tratteremo in questa guida).
se usiamo Firefox come browser (consiglio di usare sia IE che Firefox in fase di sviluppo del template per confrontare i risultati) possiamo scaricare l’estensione Web Developer Toolbar che ci tornerà molto utile in fase di sviluppo della pagina.

Struttura dei template

I template di Joomla sono un insieme di tag html e codice php che, quando eseguito all’interno di Joomla, danno come risultato la pagina web del sito. I contenuti della pagina sono memorizzati in un database MySQL e letti quando richiesti. Sostanzialmente quindi esiste una sola pagina sulla quale intervenire per modificare l’aspetto del sito.
I files che compongono il template si trovano in:
[Solo gli utenti registrati possono visualizzare tutti i links]

Il file index.php contiene il codice del template. Tutti i template hanno la stessa struttura di cartelle e gli stessi file. Quello che può cambiare solo nel immagini usate per la grafica e qualche file css in più.

Elementi base di PHP e HTML

Per modificare e personalizzare i template è necessario conoscere il php e l’html. Chiaramente non potremo fare una trattazione completa, ma esistono sul web centinaia di guide e manuali sull’argomento. Mi limiterò a indicare le istruzioni php e i tag html utili a comprendere il funzionamento del template. Ricordate che il prodotto finale dell’esecuzione di una pagina scritta in php è sempre una pagina che contiene tag html. I browser non “conoscono” il php ma solo l’html.

Struttura di una pagina web

Prima di analizzare la pagina del template rinfreschiamo la memoria su come è fatta una pagina web. Le pagine visualizzate in un browser contengono codice html. L’html non è un linguaggio ma un sistema a marcatori per il posizionamento di testo, immagini ed altri oggetti all’interno di un documento. La struttura base di una pagina web è la seguente:

<HTML>
<HEAD>
<TITLE>Titolo della pagina</TITLE>
</HEAD>
<BODY>
Testo della pagina
</BODY>
</HTML> Altri tag html che ci serviranno in seguito sono:
<TABLE> </TABLE>

Apre e chiude una tabella Una tabella è strutturata in righe, composte da celle. Le celle possono contenere immagini, collegamenti, testi; la dimensione delle stesse, viene gestita automaticamente a seconda della dimensione dei suoi contenuti, oppure impostando attraverso degli appropriati attributi i valori per la grandezza e l’altezza delle celle.

<TR></TR> Apre e chiude una riga
<TD></TD> Apre e chiude una colonna Ecco un esempio di tabella:

Ognuno dei tag sopra indicati per la creazione delle tabelle possiede una serie di attributi che ne modificano l’aspetto grafico. Le più importanti sono:
Solo per il tag TABLE: border dimensione del bordo in pixel (px) cellspacing spaziatura tra le celle cellpadding margine dentro le celle

Comuni a tutti:

width larghezza espressa in pixel (px) o percentuale (%)
height altezza espressa in pixel (px) o percentuale (%)
valign allineamento verticale (top, middle, bottom)
align allineamento orizzontale (left, center, right, …)
background colore o immagine di sfondo
class formatta l’elemento secondo gli attributi specificati in una classe dichiarata nel foglio di stile
id specifica un identificativo univoco per quell’elemento i cui attributi sono dichiarati nel foglio di stile
<p>paragrafo </p> Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura.
<div>Blocco di testo</div> Il blocco di testo va a capo, ma a differenza del paragrafo non lascia spazi prima e dopo la sua apertura.
<span>contenitore</span> Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include.

Le differenze tra <P>, <DIV> e <SPAN> sono quindi che:

<P> lascia spazio prima e dopo la propria chiusura
<DIV> non lascia spazio prima e dopo la propria chiusura, ma essendo un elemento di blocco va a capo
<SPAN> essendo un elemento inline - non va a capo

Un po’ di codice PHP

Apriamo il file index.php del template con un edito e analizziamone il contenuto. Tutte le istruzioni in php iniziano con <?php e finiscono con ?>. Tra questi due marcatori viene inserito il codice php. La prima istruzione php che troviamo in tutte le pagine di Joomla è la seguente:
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); Questa istruzione deve essere sempre presente ed evita che una pagina php venga caricata fuori dall’ambiente di Joomla. Provate ad esempio a digitare nel browser l’indirizzo:

[Solo gli utenti registrati possono visualizzare tutti i links]
e vi verrà restituito il messaggio “’Direct Access to this location is not allowed.” invece della pagina.

La sezione HEAD della pagina

Questo è il contenuto della sezione della pagina compresa tra i tag
<HEAD> e </HEAD>

<head>
<?php
defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' );
$iso = split( '=', _ISO );
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<?php if ( $my->id ) initEditor(); ?>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/css/template_css.css" />
<link rel="shortcut icon" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/images/favicon.ico"/>

<?php
/* ###TEMPLATE CONFIGURATION### */

$x_footer = "1" ; /* show mambocopyright footer 1=on, 0=off */
$x_width = "100%" ; /* use "770px" for fixed width or "100%" for full width */

?>
</head> Questa sezione contiene il codice php che genererà la head (intestazione) della pagina html visualizzata nel browser. Vediamo le istruzioni più importanti:
Questa inizializza l’editor dichiarato nelle impostazioni generali del sito. Ricordate di inserirla sempre altrimenti non vi parte l’editor quanto andate a inserire i contenuti
<?php if ( $my->id ) initEditor(); ?> Questa istruzione richiama la funzione predefinita mosShowHead() di Joomla per inserire in quel punto il titolo della pagina e i tag meta necessari per l’indicizzazione del sito sui motori di ricerca. Le funzioni predefinite di Joomla sono tante e per la maggior parte sono contenute nel file includes/joomla.php
<?php mosShowHead(); ?> Questa istruzione collega il foglio di stile template_css.css alla pagina. Importanti sono le variabili globali $mosConfig_live_site e $cur_template.
<link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/css/template_css.css" /> Per definizione le variabili in php sono dei contenitori di dati, il fatto che siano globali significa che possono essere usate in qualunque pagina del sito per recuperare le stesse informazioni.

$mosConfig_live_site contiene l’URL del sito (es. [Solo gli utenti registrati possono visualizzare tutti i links]
o [Solo gli utenti registrati possono visualizzare tutti i links]
secondo come avete installato Joomla)

$cur_template contiene il nome del template che è stato dichiarato come predefinito nelle impostazioni del sito.

L’istruzione php echo serve per ‘stampare’ il contenuto della variabile all’interno della pagina. Quando la pagina verrà caricata dal browser al posto di echo $cur_template verrà sostituito il nome del template jt_simplicity_green.
Un altro modo di scrivere la stessa istruzione è il seguente:
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site; ?>/templates/ /<?php echo $cur_template; ?>/css/template_css.css" /> oppure
<link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site; ?>/templates/ jt_simplicity_green/css/template_css.css" /> Secondo il template che sceglierete potreste trovare più di una di queste istruzioni a seconda del numero di fogli di stile che il creatore del template ha scritto. Ma sicuramente troverete sempre il riferimento al foglio di stile template_css.css
Questa istruzione dichiara quale sarà l’icona che verrà visualizzata nella barra degli indirizzi del browser prima dell’indirizzo web del sito
<link rel="shortcut icon" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/images/favicon.ico"/> Una volta che la pagina verrà caricata nel browser questa sarà l’instestazione:
<head>
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Joomla - Home</title>
<meta name="description" content="Joomla - the dynamic portal engine and content management system" />
<meta name="keywords" content="Joomla, joomla" />
<meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2006 Open Source Matters. Tutti i diritti riservati." />
<meta name="robots" content="index, follow" />
<link rel="shortcut icon" href="http://www.miosito.it/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://www.miosito.it/templates/jt_simplicity_green/css/template_css.css" />
<link rel="shortcut icon" href="http://www.miosito/images/favicon.ico"/>
</head> Come vedete questi sono solo tag html e, dove nel codice php della pagina erano presenti istruzioni di echo di variabili globali è stato sostituito il contenuto della variabile.
Per ultimo analizziamo le due ultime istruzioni della head: queste sono due istruzioni che assegnano alle variabili $x_footer e $x_width due valori costanti. Sono proprie di questo template e non le troverete in altri.
La prima serve a stabilire se visualizzare (1) o meno (0) il copuright nel footer della pagina (il fondo della pagina). La seconda stabilisce la dimensione della pagina rispetto a quella della finestra del browser. Il valore 100% permette al template di “espandersi” per tutta la grandezza della finestra del browser ridimensionandosi con esso. Assegnando invece il valore 770px sarà possible rendere fissa la larghezza della pagina.
$x_footer = "1"; /* show mambocopyright footer 1=on, 0=off */
$x_width = "100%"; /* use "770px" for fixed width or "100%" for full width */
La sezione BODY della pagina

Anzitutto partiamo dai “contenitori” che racchiudono l’intera struttura:
<body>
<div align="center">
<div style="width:<?php echo $x_width; ?>;">
………
………
</div>
</div>
</body> Come noterete il primo tag apre un contenitore div con allineamento centrato. Al suo interno viene annidato un altro contenitore per il quale viene impostato l’attributo width al valore contenuto nella variabile $x_width dichiarata all’inizio del template.
Questo permette alla pagina di restare sempre centrata nel browser (il primo div) e di essere dimensionata o per tutta la larghezza della finestra del browser (width=100%) o per una dimesione fissa (width=980px). Questo dipende dal valore che vogliamo assegnare alla variabile all’interno del file index.php del template.
All’interno del secondo contenitore si sviluppa la struttura vera e propria della pagina. Questa è difficile da intuire solo leggendo il codice php/html, per questo sarebbe meglio adottare degli editor che visualizzino la struttura della pagina (tabelle, contenitori, ecc) prima di vederne l’anteprima nel browser.
L’esperienza comunque aiuta a identificare gli elementi che compongono la pagina soprattutto se, chi ha scritto il template ha indentato (cioè ha scritto le righe spostandole con il tabulatore) le righe in modo da evidenziare l’inizio e la fine di una tabella o di un contenitore.
La struttura del template si presenta in questo modo:

A livello di tag html dobbiamo individuare le cinque tabelle principali che compongono la pagina (segnate in verde) e le tabelle annidate all’interno (segnate in rosso).
Adesso avremo dei riferimenti sicuri per riconoscere le varie zone del template. Ma come facciamo a riconoscere le zone del template?
Il metodo più semplice è individuare le funzioni php predefinite mosLoadModules() che consentono di caricare un modulo in una determinata zona. Ad esempio la funzione mosLoadModules(‘left’) visualizza nell’area della pagina (in genere la cella di una tabella) i moduli Joomla che nella configurazione del sito abbiamo dichiarato in quella posizione.
Se guardate il codice la penultima tabella contiene le funzioni di caricamento delle zone left, banner e right. Lo riporto di seguito:

<table width="100%" border="0" cellspacing="8" cellpadding="0">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr valign="top">
<?php if (mosCountModules( "left" )) { ?>
<td width="160"><?php mosLoadModules ( 'left' ); ?></td>
<?php } ?>
<td>
<div align="center">
<?php mosLoadModules( 'banner', -1 ); ?>
</div>
<?php mosMainBody(); ?></td>
<?php if (mosCountModules( "right" )) { ?>
<td width="160"><?php mosLoadModules ( 'right' ); ?></td>
<?php } ?>
</tr>
</table>
</td>
</tr>
</table>

Una particolarità del codice php per il caricamento dei moduli è l’uso dell’istruzione condizionale IF. Il codice <?php if (mosCountModules(“left”)) mosLoadModules(‘left’); ?> può essere tradotto in linguaggio “umano” in questo modo: se esistono moduli dichiarati nella zona left allora visualizza I moduli dichiarati nella zona left. La funzione mosCountModules() conta quanti moduli sono stati dichiarati nella zona left; se non ce ne sono viene restituito il valore 0. La funzione mosLoadModules() ha due parametri: il primo è la zona dei moduli da caricare il secondo è il metodo di caricamento dei moduli. Tale parametro può avere i seguenti valori: 0, 1, -1, -2, -3. Per un maggiore approfondimento di questo argomento visitate il link:
[Solo gli utenti registrati possono visualizzare tutti i links]
La funzione mosMainBody() carica nella cella della tabella il contenuto del corpo principale della pagina.

Modificare le dimensioni delle aree

Una volta che abbiamo individuato la posizione delle diverse aree della pagina come detto prima basta guardare in che cosa sono state inserite. Nel nostro caso l’area left è inserita in una cella di una tabella:

<?php if (mosCountModules( "left" )) { ?>
<td width="160"><?php mosLoadModules ( 'left' ); ?></td>
<?php } ?>
<td>

Basta dunque modificare il valore di width (che è impostato a 160) con quello che vogliamo dargli.
Se fate attenzione al codice riportato sopra noterete che solo le aree left e right hanno assegnata una larghezza, non la zona centrale dedicata a ricevere i contenuti.
Come modificare la dimensione della zona centrale? Semplicemente modificando i valori di larghezza delle zone left e right. La zona centrale si adatterà di conseguenza. Ricordiamoci che le dimensioni limite sono fissate dalla tabella in cui sono contenute le tre aree che, nel nostro caso, è impostata al 100% dell’area di pagina definita dal contenitore div principale:

<body>
<div align="center">
<div style="width:<?php echo $x_width; ?>;">
………
………
</div>
</div>
</body>
I Fogli di Stile

Il foglio di stile predefinito si chiama template_css.css. L’uso dei fogli di stile permette di rendere più pulito e leggibile il codice della pagina del template. Definendo infatti classi e identificativi si possono definire gli attributi da assegnare a determinate componenti della pagina (testo, paragrafi, tabelle, contenitori, ecc.). Per la trattazione completa dei fogli di stile rimandiamo ad un’altra miniguida. In questa evidenzieremo solo alcune particolarità dei css. Anzitutto come si usano le classi: una classe si può considerare come un nome a cui vengono assegnati una serie di attributi grafici. Se nel foglio di stile creiamo la classe small:

.small {
color: #274F00;
font-size: 9px;
font-weight: bold;
}

Stiamo assegnando al nome small un colore, una dimensione di carattere (9 pizel) e un aspetto del carattere (bold=grassetto). Per utilizzare questa classe useremo l’attributo class, ad esempio di un contenitore div:
<div align="right" class="small">
<?php echo mosCurrentDate(); ?>
</div> La funzione mosCurrentDate() serve per visualizzare la data corrente.
In questo modo il contenuto del contenitore div verrà formattato visivamente con il colore e il carattere che abbiamo dichiarato nella classe div.
Avremmo potuto anche scrivere:

<div align="right" style=”color:#274F00 font-size: 9px font-weight: bold” >
<?php echo mosCurrentDate(); ?>
</div>

E’ evidente la differenza! Inoltre se vogliamo modificare l’aspetto di visualizzazione della data corrente nel primo caso agiamo solo sul foglio di stile, nel secondo dobbiamo modificare il codice della pagina.
Alcune classi non hanno bisogno di essere assegnate esplicitamente ad un elemento della pagina. Ad esempio le classi a.mainlevel e a.sublevel sono implicitamente assegnate ai menù di Joomla.
Quando la funzione mosLoadModules(‘left’) carica i moduli dichiarati nella zona left, e quindi i menù che in essa abbiamo voluto posizionare, il risultato sarà il seguente codice html:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr align="left"><td><a href="index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&task=sectio n&id=4&Itemid=30" class="mainlevel" >Il mio Blog</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_content&task=sectio n&id=5&Itemid=31" class="mainlevel" >Miniguide Joomla</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_contact&Itemid=3" class="mainlevel" >Contattami</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_weblinks&Itemid=23" class="mainlevel" >Collegamenti web</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_search&Itemid=5" class="mainlevel" >Cerca</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_mediaslide&Itemid=2 6" class="mainlevel" >Galleria Immagini</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_easygb&Itemid=27" class="mainlevel" >Libro degli Ospiti</a></td></tr>
<tr align="left"><td><a href="index.php?option=com_joomap&Itemid=28" class="mainlevel" >Mappa Sito</a></td></tr>
</table> Come vedete a tutte le voci di menù è stata assegnata la classe mainlevel senza bisogno che noi la dichiarassimo esplicitamente.
Per approfondire le classi di default dei fogli di stile di Joomla visitare il link [Solo gli utenti registrati possono visualizzare tutti i links]
e scaricate il file pdf css_joomla-mambo.pdf

Modificare la grafica

Questo argomento andrebbe trattato separatamente soprattutto se si vuole affrontare l’arduo compito di stravolgere la grafica del template scaricato. Mi limiterò ad accennare alla semplice soluzione, quella di mantenere la medesima struttura grafica modificando le immagini già esistenti. Sostanzialmente basta non modificare le dimensioni delle immagini contenute nella cartella images del template ma soltanto i colori. Nel template preso in considerazione per questa guida le immagini che compongono l’header della pagina sono tre:

header_logo.png
header_right_corner.png
header_bg.png

Prima di modificarle fatene una copia e poi con un programma di fotoritocco o le modificate o ne create di nuove delle stesse dimensioni e usando gli originali come modello. Se volete cambiare completamente l’aspetto delle immagini ricordate che un’altra limitazione nelle dimensioni è data dalle dimensioni delle celle della tabella che contengono le immagini. Nel nostro caso, proprio all’inizio del body nel file index.php troviamo:
<td width="260"><img src="templates/<?php echo $cur_template; ?>/images/header_logo.png" width="260" height="102" /></td>

<td valign="bottom" background="templates/<?php echo $cur_template; ?>/images/header_bg.png"> Le dimensioni della prima cella sono impostate a 260 così come quelle dell’immagine header_logo.png. Se modifichiamo le dimensioni dell’immagine facendola più stretta o più larga dobbiamo modificare anche le dimensioni della cella che la accoglie.

[Solo gli utenti registrati possono visualizzare tutti i links]

20-08-2008, 11.22.05	#1
jarod1981® Admin 1,618034 Data registrazione: 21-12-2005 Residenza: Dove il mare luccica ;-) Messaggi: 12,300	Comprendere, Configurare e Modificare un Template di Joomla Premessa Questa guida fa riferimento ai template di Joomla fino alla versione 1.0.13. Scopo di questa guida è dare le informazioni di base necessarie a chi si avvicina per la prima volta a Joomla e vuole personalizzare il proprio template. La guida si baserà su un modello di template già pronto spiegandone le varie componenti e le possibili soluzioni per la sua personalizzazione. Scarichiamo il template. Per cominciare scarichiamo il template jt_simplicity_green. Ne ho scelto uno relativamente semplice e con una grafica essenziale. Cosa serve per lavorare. Per lavorare con tranquillità avremo bisogno dei seguenti strumenti: un editor php, meglio se uno che consenta di vedere la struttura della pagina prima di visualizzarla nel browser; un editor css che abbia come caratteristica la possibilità di vedere in anteprima le modifiche apportate al file di stile; un programma di grafica e fotoritocco è importante se si vuole modificare la grafica (che però non tratteremo in questa guida). se usiamo Firefox come browser (consiglio di usare sia IE che Firefox in fase di sviluppo del template per confrontare i risultati) possiamo scaricare l’estensione Web Developer Toolbar che ci tornerà molto utile in fase di sviluppo della pagina. Struttura dei template I template di Joomla sono un insieme di tag html e codice php che, quando eseguito all’interno di Joomla, danno come risultato la pagina web del sito. I contenuti della pagina sono memorizzati in un database MySQL e letti quando richiesti. Sostanzialmente quindi esiste una sola pagina sulla quale intervenire per modificare l’aspetto del sito. I files che compongono il template si trovano in: [Solo gli utenti registrati possono visualizzare tutti i links] Il file index.php contiene il codice del template. Tutti i template hanno la stessa struttura di cartelle e gli stessi file. Quello che può cambiare solo nel immagini usate per la grafica e qualche file css in più. Elementi base di PHP e HTML Per modificare e personalizzare i template è necessario conoscere il php e l’html. Chiaramente non potremo fare una trattazione completa, ma esistono sul web centinaia di guide e manuali sull’argomento. Mi limiterò a indicare le istruzioni php e i tag html utili a comprendere il funzionamento del template. Ricordate che il prodotto finale dell’esecuzione di una pagina scritta in php è sempre una pagina che contiene tag html. I browser non “conoscono” il php ma solo l’html. Struttura di una pagina web Prima di analizzare la pagina del template rinfreschiamo la memoria su come è fatta una pagina web. Le pagine visualizzate in un browser contengono codice html. L’html non è un linguaggio ma un sistema a marcatori per il posizionamento di testo, immagini ed altri oggetti all’interno di un documento. La struttura base di una pagina web è la seguente: <HTML> <HEAD> <TITLE>Titolo della pagina</TITLE> </HEAD> <BODY> Testo della pagina </BODY> </HTML> Altri tag html che ci serviranno in seguito sono: <TABLE> </TABLE> Apre e chiude una tabella Una tabella è strutturata in righe, composte da celle. Le celle possono contenere immagini, collegamenti, testi; la dimensione delle stesse, viene gestita automaticamente a seconda della dimensione dei suoi contenuti, oppure impostando attraverso degli appropriati attributi i valori per la grandezza e l’altezza delle celle. <TR></TR> Apre e chiude una riga <TD></TD> Apre e chiude una colonna Ecco un esempio di tabella: Ognuno dei tag sopra indicati per la creazione delle tabelle possiede una serie di attributi che ne modificano l’aspetto grafico. Le più importanti sono: Solo per il tag TABLE: border dimensione del bordo in pixel (px) cellspacing spaziatura tra le celle cellpadding margine dentro le celle Comuni a tutti: width larghezza espressa in pixel (px) o percentuale (%) height altezza espressa in pixel (px) o percentuale (%) valign allineamento verticale (top, middle, bottom) align allineamento orizzontale (left, center, right, …) background colore o immagine di sfondo class formatta l’elemento secondo gli attributi specificati in una classe dichiarata nel foglio di stile id specifica un identificativo univoco per quell’elemento i cui attributi sono dichiarati nel foglio di stile <p>paragrafo </p> Il paragrafo è l’unità di base entro cui suddividere un testo. Il tag <P> lascia una riga vuota prima della sua apertura e dopo la sua chiusura. <div>Blocco di testo</div> Il blocco di testo va a capo, ma a differenza del paragrafo non lascia spazi prima e dopo la sua apertura. <span>contenitore</span> Lo span è un contenitore generico che può essere annidato (ad esempio) all’interno dei DIV. Si tratta di un elemento inline, che cioè non va a capo e continua sulla stessa linea del tag che lo include. Le differenze tra <P>, <DIV> e <SPAN> sono quindi che: <P> lascia spazio prima e dopo la propria chiusura <DIV> non lascia spazio prima e dopo la propria chiusura, ma essendo un elemento di blocco va a capo <SPAN> essendo un elemento inline - non va a capo Un po’ di codice PHP Apriamo il file index.php del template con un edito e analizziamone il contenuto. Tutte le istruzioni in php iniziano con <?php e finiscono con ?>. Tra questi due marcatori viene inserito il codice php. La prima istruzione php che troviamo in tutte le pagine di Joomla è la seguente: defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); Questa istruzione deve essere sempre presente ed evita che una pagina php venga caricata fuori dall’ambiente di Joomla. Provate ad esempio a digitare nel browser l’indirizzo: [Solo gli utenti registrati possono visualizzare tutti i links] e vi verrà restituito il messaggio “’Direct Access to this location is not allowed.” invece della pagina. La sezione HEAD della pagina Questo è il contenuto della sezione della pagina compresa tra i tag <HEAD> e </HEAD> <head> <?php defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.' ); $iso = split( '=', _ISO ); echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>'; ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <?php if ( $my->id ) initEditor(); ?> <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" /> <?php mosShowHead(); ?> <link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/css/template_css.css" /> <link rel="shortcut icon" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/images/favicon.ico"/> <?php /* ###TEMPLATE CONFIGURATION### / $x_footer = "1" ; / show mambocopyright footer 1=on, 0=off / $x_width = "100%" ; / use "770px" for fixed width or "100%" for full width / ?> </head> Questa sezione contiene il codice php che genererà la head (intestazione) della pagina html visualizzata nel browser. Vediamo le istruzioni più importanti: Questa inizializza l’editor dichiarato nelle impostazioni generali del sito. Ricordate di inserirla sempre altrimenti non vi parte l’editor quanto andate a inserire i contenuti* <?php if ( $my->id ) initEditor(); ?> Questa istruzione richiama la funzione predefinita mosShowHead() di Joomla per inserire in quel punto il titolo della pagina e i tag meta necessari per l’indicizzazione del sito sui motori di ricerca. Le funzioni predefinite di Joomla sono tante e per la maggior parte sono contenute nel file includes/joomla.php <?php mosShowHead(); ?> Questa istruzione collega il foglio di stile template_css.css alla pagina. Importanti sono le variabili globali $mosConfig_live_site e $cur_template. <link rel="stylesheet" type="text/css" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/templates/<?php echo $cur_template; ?>/css/template_css.css" /> Per definizione le variabili in php sono dei contenitori di dati, il fatto che siano globali significa che possono essere usate in qualunque pagina del sito per recuperare le stesse informazioni. $mosConfig_live_site contiene l’URL del sito (es. [Solo gli utenti registrati possono visualizzare tutti i links] o [Solo gli utenti registrati possono visualizzare tutti i links] secondo come avete installato Joomla) $cur_template contiene il nome del template che è stato dichiarato come predefinito nelle impostazioni del sito. L’istruzione php echo serve per ‘stampare’ il contenuto della variabile all’interno della pagina. Quando la pagina verrà caricata dal browser al posto di echo $cur_template verrà sostituito il nome del template jt_simplicity_green. Un altro modo di scrivere la stessa istruzione è il seguente: <link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site; ?>/templates/ /<?php echo $cur_template; ?>/css/template_css.css" /> oppure <link rel="stylesheet" type="text/css" href="<?php echo $mosConfig_live_site; ?>/templates/ jt_simplicity_green/css/template_css.css" /> Secondo il template che sceglierete potreste trovare più di una di queste istruzioni a seconda del numero di fogli di stile che il creatore del template ha scritto. Ma sicuramente troverete sempre il riferimento al foglio di stile template_css.css Questa istruzione dichiara quale sarà l’icona che verrà visualizzata nella barra degli indirizzi del browser prima dell’indirizzo web del sito <link rel="shortcut icon" href="<?php echo $GLOBALS['mosConfig_live_site']; ?>/images/favicon.ico"/> Una volta che la pagina verrà caricata nel browser questa sarà l’instestazione: <head> <?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Joomla - Home</title> <meta name="description" content="Joomla - the dynamic portal engine and content management system" /> <meta name="keywords" content="Joomla, joomla" /> <meta name="Generator" content="Joomla! - Copyright (C) 2005 - 2006 Open Source Matters. Tutti i diritti riservati." /> <meta name="robots" content="index, follow" /> <link rel="shortcut icon" href="http://www.miosito.it/images/favicon.ico" /> <link rel="stylesheet" type="text/css" href="http://www.miosito.it/templates/jt_simplicity_green/css/template_css.css" /> <link rel="shortcut icon" href="http://www.miosito/images/favicon.ico"/> </head> Come vedete questi sono solo tag html e, dove nel codice php della pagina erano presenti istruzioni di echo di variabili globali è stato sostituito il contenuto della variabile. Per ultimo analizziamo le due ultime istruzioni della head: queste sono due istruzioni che assegnano alle variabili $x_footer e $x_width due valori costanti. Sono proprie di questo template e non le troverete in altri. La prima serve a stabilire se visualizzare (1) o meno (0) il copuright nel footer della pagina (il fondo della pagina). La seconda stabilisce la dimensione della pagina rispetto a quella della finestra del browser. Il valore 100% permette al template di “espandersi” per tutta la grandezza della finestra del browser ridimensionandosi con esso. Assegnando invece il valore 770px sarà possible rendere fissa la larghezza della pagina. $x_footer = "1"; /* show mambocopyright footer 1=on, 0=off / $x_width = "100%"; / use "770px" for fixed width or "100%" for full width / La sezione BODY della pagina* Anzitutto partiamo dai “contenitori” che racchiudono l’intera struttura: <body> <div align="center"> <div style="width:<?php echo $x_width; ?>;"> ……… ……… </div> </div> </body> Come noterete il primo tag apre un contenitore div con allineamento centrato. Al suo interno viene annidato un altro contenitore per il quale viene impostato l’attributo width al valore contenuto nella variabile $x_width dichiarata all’inizio del template. Questo permette alla pagina di restare sempre centrata nel browser (il primo div) e di essere dimensionata o per tutta la larghezza della finestra del browser (width=100%) o per una dimesione fissa (width=980px). Questo dipende dal valore che vogliamo assegnare alla variabile all’interno del file index.php del template. All’interno del secondo contenitore si sviluppa la struttura vera e propria della pagina. Questa è difficile da intuire solo leggendo il codice php/html, per questo sarebbe meglio adottare degli editor che visualizzino la struttura della pagina (tabelle, contenitori, ecc) prima di vederne l’anteprima nel browser. L’esperienza comunque aiuta a identificare gli elementi che compongono la pagina soprattutto se, chi ha scritto il template ha indentato (cioè ha scritto le righe spostandole con il tabulatore) le righe in modo da evidenziare l’inizio e la fine di una tabella o di un contenitore. La struttura del template si presenta in questo modo: A livello di tag html dobbiamo individuare le cinque tabelle principali che compongono la pagina (segnate in verde) e le tabelle annidate all’interno (segnate in rosso). Adesso avremo dei riferimenti sicuri per riconoscere le varie zone del template. Ma come facciamo a riconoscere le zone del template? Il metodo più semplice è individuare le funzioni php predefinite mosLoadModules() che consentono di caricare un modulo in una determinata zona. Ad esempio la funzione mosLoadModules(‘left’) visualizza nell’area della pagina (in genere la cella di una tabella) i moduli Joomla che nella configurazione del sito abbiamo dichiarato in quella posizione. Se guardate il codice la penultima tabella contiene le funzioni di caricamento delle zone left, banner e right. Lo riporto di seguito: <table width="100%" border="0" cellspacing="8" cellpadding="0"> <tr> <td> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr valign="top"> <?php if (mosCountModules( "left" )) { ?> <td width="160"><?php mosLoadModules ( 'left' ); ?></td> <?php } ?> <td> <div align="center"> <?php mosLoadModules( 'banner', -1 ); ?> </div> <?php mosMainBody(); ?></td> <?php if (mosCountModules( "right" )) { ?> <td width="160"><?php mosLoadModules ( 'right' ); ?></td> <?php } ?> </tr> </table> </td> </tr> </table> Una particolarità del codice php per il caricamento dei moduli è l’uso dell’istruzione condizionale IF. Il codice <?php if (mosCountModules(“left”)) mosLoadModules(‘left’); ?> può essere tradotto in linguaggio “umano” in questo modo: se esistono moduli dichiarati nella zona left allora visualizza I moduli dichiarati nella zona left. La funzione mosCountModules() conta quanti moduli sono stati dichiarati nella zona left; se non ce ne sono viene restituito il valore 0. La funzione mosLoadModules() ha due parametri: il primo è la zona dei moduli da caricare il secondo è il metodo di caricamento dei moduli. Tale parametro può avere i seguenti valori: 0, 1, -1, -2, -3. Per un maggiore approfondimento di questo argomento visitate il link: [Solo gli utenti registrati possono visualizzare tutti i links] La funzione mosMainBody() carica nella cella della tabella il contenuto del corpo principale della pagina. Modificare le dimensioni delle aree Una volta che abbiamo individuato la posizione delle diverse aree della pagina come detto prima basta guardare in che cosa sono state inserite. Nel nostro caso l’area left è inserita in una cella di una tabella: <?php if (mosCountModules( "left" )) { ?> <td width="160"><?php mosLoadModules ( 'left' ); ?></td> <?php } ?> <td> Basta dunque modificare il valore di width (che è impostato a 160) con quello che vogliamo dargli. Se fate attenzione al codice riportato sopra noterete che solo le aree left e right hanno assegnata una larghezza, non la zona centrale dedicata a ricevere i contenuti. Come modificare la dimensione della zona centrale? Semplicemente modificando i valori di larghezza delle zone left e right. La zona centrale si adatterà di conseguenza. Ricordiamoci che le dimensioni limite sono fissate dalla tabella in cui sono contenute le tre aree che, nel nostro caso, è impostata al 100% dell’area di pagina definita dal contenitore div principale: <body> <div align="center"> <div style="width:<?php echo $x_width; ?>;"> ……… ……… </div> </div> </body> I Fogli di Stile Il foglio di stile predefinito si chiama template_css.css. L’uso dei fogli di stile permette di rendere più pulito e leggibile il codice della pagina del template. Definendo infatti classi e identificativi si possono definire gli attributi da assegnare a determinate componenti della pagina (testo, paragrafi, tabelle, contenitori, ecc.). Per la trattazione completa dei fogli di stile rimandiamo ad un’altra miniguida. In questa evidenzieremo solo alcune particolarità dei css. Anzitutto come si usano le classi: una classe si può considerare come un nome a cui vengono assegnati una serie di attributi grafici. Se nel foglio di stile creiamo la classe small: .small { color: #274F00; font-size: 9px; font-weight: bold; } Stiamo assegnando al nome small un colore, una dimensione di carattere (9 pizel) e un aspetto del carattere (bold=grassetto). Per utilizzare questa classe useremo l’attributo class, ad esempio di un contenitore div: <div align="right" class="small"> <?php echo mosCurrentDate(); ?> </div> La funzione mosCurrentDate() serve per visualizzare la data corrente. In questo modo il contenuto del contenitore div verrà formattato visivamente con il colore e il carattere che abbiamo dichiarato nella classe div. Avremmo potuto anche scrivere: <div align="right" style=”color:#274F00 font-size: 9px font-weight: bold” > <?php echo mosCurrentDate(); ?> </div> E’ evidente la differenza! Inoltre se vogliamo modificare l’aspetto di visualizzazione della data corrente nel primo caso agiamo solo sul foglio di stile, nel secondo dobbiamo modificare il codice della pagina. Alcune classi non hanno bisogno di essere assegnate esplicitamente ad un elemento della pagina. Ad esempio le classi a.mainlevel e a.sublevel sono implicitamente assegnate ai menù di Joomla. Quando la funzione mosLoadModules(‘left’) carica i moduli dichiarati nella zona left, e quindi i menù che in essa abbiamo voluto posizionare, il risultato sarà il seguente codice html: <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr align="left"><td><a href="index.php?option=com_frontpage&Itemid=1" class="mainlevel" id="active_menu">Home</a></td></tr> <tr align="left"><td><a href="index.php?option=com_content&task=sectio n&id=4&Itemid=30" class="mainlevel" >Il mio Blog</a></td></tr> <tr align="left"><td><a href="index.php?option=com_content&task=sectio n&id=5&Itemid=31" class="mainlevel" >Miniguide Joomla</a></td></tr> <tr align="left"><td><a href="index.php?option=com_contact&Itemid=3" class="mainlevel" >Contattami</a></td></tr> <tr align="left"><td><a href="index.php?option=com_weblinks&Itemid=23" class="mainlevel" >Collegamenti web</a></td></tr> <tr align="left"><td><a href="index.php?option=com_search&Itemid=5" class="mainlevel" >Cerca</a></td></tr> <tr align="left"><td><a href="index.php?option=com_mediaslide&Itemid=2 6" class="mainlevel" >Galleria Immagini</a></td></tr> <tr align="left"><td><a href="index.php?option=com_easygb&Itemid=27" class="mainlevel" >Libro degli Ospiti</a></td></tr> <tr align="left"><td><a href="index.php?option=com_joomap&Itemid=28" class="mainlevel" >Mappa Sito</a></td></tr> </table> Come vedete a tutte le voci di menù è stata assegnata la classe mainlevel senza bisogno che noi la dichiarassimo esplicitamente. Per approfondire le classi di default dei fogli di stile di Joomla visitare il link [Solo gli utenti registrati possono visualizzare tutti i links] e scaricate il file pdf css_joomla-mambo.pdf Modificare la grafica Questo argomento andrebbe trattato separatamente soprattutto se si vuole affrontare l’arduo compito di stravolgere la grafica del template scaricato. Mi limiterò ad accennare alla semplice soluzione, quella di mantenere la medesima struttura grafica modificando le immagini già esistenti. Sostanzialmente basta non modificare le dimensioni delle immagini contenute nella cartella images del template ma soltanto i colori. Nel template preso in considerazione per questa guida le immagini che compongono l’header della pagina sono tre: header_logo.png header_right_corner.png header_bg.png Prima di modificarle fatene una copia e poi con un programma di fotoritocco o le modificate o ne create di nuove delle stesse dimensioni e usando gli originali come modello. Se volete cambiare completamente l’aspetto delle immagini ricordate che un’altra limitazione nelle dimensioni è data dalle dimensioni delle celle della tabella che contengono le immagini. Nel nostro caso, proprio all’inizio del body nel file index.php troviamo: <td width="260"><img src="templates/<?php echo $cur_template; ?>/images/header_logo.png" width="260" height="102" /></td> <td valign="bottom" background="templates/<?php echo $cur_template; ?>/images/header_bg.png"> Le dimensioni della prima cella sono impostate a 260 così come quelle dell’immagine header_logo.png. Se modifichiamo le dimensioni dell’immagine facendola più stretta o più larga dobbiamo modificare anche le dimensioni della cella che la accoglie. [Solo gli utenti registrati possono visualizzare tutti i links] __________________

Strumenti discussione
Visualizza versione stampabile Invia questa pagina via e-mail
Modalità visualizzazione
Modalità lineare Modalità ibrida Modalità elencata