Come realizzare un template Joomla? (seconda parte)

Nella prima parte dell’articolo sulla creazione di template per Joomla, ci siamo lasciati con una bozza di template. Abbiamo visto come impostare il lavoro e come creare e posizionare i moduli. Ora andremo ad agire sul foglio di stile per modellare il nostro template.

Alla fine di questo articolo sarai in grado di creare da zero il template per il tuo sito gestito con Joomla.

Uno sguardo alla sicurezza: index.html nelle cartelle

Prima di iniziare mi sono accorto di una cosa che avrei dovuto spiegare nell’articolo precedente. E’ semplice ma importante. In ogni cartella del template (e non solo) è prassi inserire un file vuoto chiamato index.html. In questo modo, qualunque sia la configurazione del server e dei chmod, non sarà possibile leggere il contenuto della cartella.

Infatti quando ci posizioniamo in una cartella Apache per default carica il file index.html o index.php. Se questi file non sono presenti, potrebbe essere mostrato il contenuto della directory. Dico potrebbe in quanto si può rendere impossibile la visualizzazione diretta del contenuto della cartella con un file .htaccess (un tipo di file che viene utilizzato per modificare le impostazioni di Apache, credo che in futuro scriverò un articolo sui numerosi possibili utilizzi di questo importantissimo file).

Oppure é possibile impostare i giusti chmod. Per chi non lo sapesse, sono dei codici numerici che possiamo assegnare ai file ed alle cartelle tramite client ftp e che ne determinano i diritti di lettura/scrittura/esecuzione. Queste sarebbero le procedure più sicure, ma visto che Joomla é utilizzato anche da molte persone che non hanno le competenze per operare questo genere di configurazione, la presenza di un file index.html rappresenta una base di difesa, anche se minima.

Ora possiamo iniziare.

1. Come impostare l’header del nostro tema?

Iniziamo con l’inserire un immagine di background all’header (960 x 250) e rimuovendo il bordo che ora non serve più.


#header{
    width: 960px;
    height: 250px;
    margin-bottom: 5px;
    background-image: url(../images/header_bg.png);
    background-repeat: no-repeat;
}

Ora nel file index.php possiamo inserire un titolo o anche prendere direttamente il titolo impostato nella configurazione globale del CMS utilizzando il metodo getCfg e passando come parametro sitename in questo modo:


<div id="header">
    <div id="title">
    <h1><?php echo $mainframe->getCfg('sitename'); ?></h1>
    </div>
</div>

Il metodo getCfg fa parte della classe JApplication e può restituirci il valore dei parametri di configurazione di Joomla (configurazione globale). Nella documentazione trovi la lista dei parametri che possono essere passati a questo metodo. Dunque se ad esempio volessimo sapere con si chiama il database che contiene le tabelle di Joomla procederemo come segue:


echo $mainframe->getCfg('db');

definiamo ora il titolo nel foglio di stile:


#title h1{
    padding-left: 30px;
    padding-top: 50px;
    font-size: 25px;
    float: left;
}

Come aggiungere un modulo di ricerca?

Ora facciamo un’altra cosa, inseriamo un modulo di ricerca nel nostro sito e, come spesso si vede, posizioniamolo nell’header.

Come prima cosa inseriamo un nuovo elemento nell’header; ti ricordi della posizione “user1” che fino ad ora non abbiamo utilizzato? Servirà per questo.


<div id="header">
    <div id="title">
    <h1><?php echo $mainframe->getCfg('sitename'); ?></h1>
    </div>

    <div id="input_search">
    <jdoc:include type="modules" name="user1" style="" />
    </div>
</div>

Come puoi vedere all’interno del nuovo elemento abbiamo dichiarato il tag per includere i moduli posizionati in user1.

Dunque andiamo ad implementare il modulo di ricerca. Nel pannello amministrativo basterà andare in Estensioni -> Gestione moduli -> nuovo e quindi selezionare il modulo “cerca“.

Nella successiva schermata di configurazione inseriamo il titolo e posizioniamo in user1 il modulo.

Adesso, tramite il foglio di stile, posizioniamo il motore di ricerca in basso a destra del nostro header:

#input_search{
    float: right;
    width:200px;
    margin-right: 10px;
    margin-top: 220px;
}

Ed ora diamo un po’ di forma al campo di input:

#input_search input{
    width: 200px;
    border: 1px solid navy;
    color: gray;
    background-color: #F2FFFF;
}

A questo punto il risultato sarà più o meno questo:

Come puoi vedere, in pochi passaggi abbiamo implementato un modulo di ricerca.

2. Come impostare la navigazione?

Ora andiamo a strutturare la navigazione. E’ molto importate a questo punto andare a visualizzare l’html prodotto per acquisire le informazioni necessarie. Vediamo allora come Joomla ha popolato il nostro div navigation:

<div id="navigation">
    <ul>
        <li id="current" class="active item11"><a href="http://localhost/cms/"><span>HOME</span></a></li>
        <li><a href="/cms/index.php/pagina-1"><span>Pagina 1</span></a></li>
        <li><a href="/cms/index.php/pagina-2"><span>Pagina 2</span></a></li>
        <li><a href="/cms/index.php/pagina-3"><span>Pagina 3</span></a></li>
    </ul>
</div>

Per rappresentare il menù viene generata una lista. Noterai anche che alla pagina corrente è aggiunta la classe “active” che utilizzeremo per contrassegnare nella navigazione la pagina attualmente visualizzata.

Miglioriamo l’aspetto estetico della nostra navigazione

Per prima cosa eliminiamo i puntini dalla lista e diamo un padding minore a quello impostato di default per le liste.

#navigation ul{
    list-style-type: none;
    padding-left: 5px;
}

Ed ora andiamo a modificare l’aspetto delle voci di menù. Gli daremo uno sfondo grigio e le separeremo con una linea tratteggiata:

#navigation li a:link, #navigation li a:visited{
    padding: 10px;
    display: block;
    color: #523F36;
    font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    width:150px;
    background-color: #E2DEE0;
    border-bottom: 1px dashed gray;
    text-decoration: none;
}

Quindi l’effetto hover, con un grigio più chiaro:

#navigation li a:hover{
    background-color: #E6E6E6;
}

In seguito assegniamo alla pagina attiva il medesimo sfondo dell’effetto hover, utilizzando la classe active che abbiamo visto in precedenza:

#navigation li.active a{
    background-color: #E6E6E6;
}

Ultimi ritocchi alla navigazione

Il bordo tratteggiato lo abbiamo richiesto nel bottom degli elementi. Ora però, perché sia corretto, vorremmo che il primo elemento della lista, oltre che avere il bordo sul bottom, lo abbia anche sul top. Utilizzeremo la classe item11 che viene assegnata al primo elemento di un menù (come è possibile vedere nell’html prodotto), dunque:

#navigation li.item11 a{
    border-top: 1px dashed gray;
}

Rimuoviamo ora il bordo dell’elemento navigation.

Ed ecco il risultato:

3. Come impostare l’area dei contenuti?

Passiamo ora alla sezione relativa al contenuto. Iniziamo con il ridefinire lo stile del contenuto eliminando il bordo e modificando il carattere ed il colore:

#content{
    width: 746px;
    margin-left: 10px;
    font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: gray;
    float: right;
    margin-bottom: 5px;
}

Andiamo ora nel pannello amministrativo e rimuoviamo le icone di stampa, pdf e mail, come pure i dettagli della pubblicazione (autore, data di pubblicazione, eccetera) e manteniamo solo il titolo.

Per farlo ci basterà andare in “gestione articoli” e cliccare su “preferenze“. Qui possiamo settare le preferenze globali, valide per tutti gli articoli se non altrimenti specificato.

Diamo ora al titolo un altro stile. Per farlo andiamo ancora a vedere nel codice generato come viene rappresentato il titolo.

<div id="content">
    <table class="contentpaneopen">
         <tbody>
             <tr>
                 <td class="contentheading" width="100%">
                 Contenuto 1
                 </td>
             </tr>
        </tbody>
    </table>

Come vedi è una cella con classe contentheading.

Dunque andiamo a definirne lo stile:

#content td.contentheading{
    font-size: 20px;
    font-weight: bold;
}

E questo è il risultato:

4. Come impostare il footer?

Ora passiamo al footer. Possiamo decidere, siccome si tratta di un contenuto statico, di scrivere direttamente il testo nel file del template (index.php) oppure inserirvi un modulo “HTML personalizzato” in modo da poterlo modificare dal pannello amministrativo. Non fa differenza. In questo esempio lo scriveremo direttamente nel template.

Rimuoviamo ora dal footer il bordo e l’altezza e definiamolo nello stile in questo modo:

#footer{
    width: 960px;
    background-color: #4682B4;
    clear: both;
    text-align: center;
    color: White;
    font-size: 10px;
    padding: 10px;
}

Il risultato sarà quello mostrato nella seguente immagine:

5. Gli ultimi ritocchi

Diamo qualche rifinitura. Eliminiamo i margini dal body e diamo un colore azzurro molto chiaro in modo da far risaltare l’area centrale; modifichiamo anche il container con background bianco e riportiamo la larghezza a 960px.

body{
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin:0px;
    background-color: #ECF3F9;
}

#container{
    margin: 0px auto;
    width: 960px;
    background-color: white;
}

Ora facciamo in modo che la navigazione sia allineata orizzontalmente con il testo dei contenuti:

#navigation{
    padding-top:80px;
    width: 200px;
    float: left;
}

Ed ecco il risultato finale:

Niente di speciale (anzi!), l’importante era capire il meccanismo e spero che che tu lo abbia compreso. Ora chiaramente rimane ancora del lavoro da fare. Per esempio, abbiamo implementato il modulo di ricerca ma se provi a fare una ricerca ti accorgerai che i risultati non avranno uno stile in linea con il sito. Andando ad analizzare il sorgente generato, non avrai difficoltà ad individuare le classi sulle quali agire nel foglio di stile per rendere il risultato corretto.

Anche se a questo punto dovresti essere in grado di farlo, ho previsto un articolo supplementare dove mostrerò come “importare” un layout XHTML esistente in Joomla. Nello specifico utilizzerò il layout disegnato da Sara nel suo recente articolo “Come realizzare un sito in stile corporate/business?“.

Alla fine, YIW rilascerà il template Joomla corporate/businness come risorsa gratuita pronto per l’installazione.

Conclusioni

Siamo così giunti alla conclusione di questi due articoli che ti forniscono le basi per poter lavorare sui template di Joomla. Resta un dubbio, quando conviene utilizzare un CMS? Solo per siti di una certa dimensione? Se sì, quando inizia a diventare interessante l’utilizzo di un CMS per gestire un sito?

Personalmente, ed è una mia opinione, appena è possibile (dunque se non ho problemi di spazio o di prestazioni)  preferisco gestire il sito tramite un CMS. La realizzazione del layout, come abbiamo visto, richiede uno sforzo solo leggermente maggiore ed è ampiamente compensata dagli innumerevoli vantaggi di utilizzare una piattaforma strutturata.

E tu cosa ne pensi? Che esperienze hai avuto in proposito?

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
Tag: ,

L'autore

Maurizio è sposato con la triade PHP - MySql - Apache e, non pago, ha un'amante chiamata jQuery. Ha un blog dove cerca di descrivere nei minimi particolari sia la moglie che l'amante. La sua vera specialità è la realizzazione di gestionali complessi anche se non rifiuta mai un sito web. +

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

64 commenti

  1. Davide
  2. Antonio
    • Luca
  3. iteand
  4. Dario Bi
  5. gain
  6. Giovanni
  7. Andrea
  8. carlo
  9. Andrea
  10. Alex
  11. Claudio
  12. Claudio
  13. Antonio

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo

Lascia un Commento

Current day month ye@r *