Override output modulo login di Joomla!

Chi ha avuto modo di cominciare a cimentarsi con tale tecnica, mai come in questi giorni ha tratto un sospiro di sollievo in quanto è stata rilasciata la versione 1.5.10 di Joomla!, nome in codice Wohmamni,rispetto alla precedente 1.5.9. Se, per esempio, fosse stato modificato un file del Core di Joomla! e dopo aver effettuato l'aggiornamento ci si sarebbe resi conto dell'interessamento di tale file, non si sarebbe dovuto fare altro che ripetere tutte le operazioni. Questo vale per ogni file sovrascritto e per quante volte vengono rilasciati gli aggiornamenti. Detto in parole povere... non se ne esce più.

A partire dalla versione di Joomla! 1.5, è possibile sfruttare questa fantastica opportunità di poter personalizzare a piacimento un determinato pezzo di codice. La personalizzazione, il più delle volte, riguarda più che altro un aspetto grafico anche perchè sarebbe bene non sovrascrivere nulla dal punto di vista del codice PHP.

Entriamo nel vivo dell'articolo e cominciamo a vedere cosa serve per raggiungere il nostro obbiettivo. Se provassimo ad abilitare il modulo login di Joomla! (mod_login), avremmo una visualizzazione dell'output simile alla figura successiva:

Form area riservata
Form area riservata

Tale immagine è una capture effettuata in un mio sito. Si può notare come le label ed i due campi di testo risultano per niente formattate, oltre alle tre voci di elenco che superano la colonna nella quale il form è stato posizionato ed i punti elenco si sovrappongono al testo dei contenuti. Possiamo dire che non va proprio...

Individuare la cartella del modulo di login

Il file di default di Joomla!, sul quale andremo ad effettuare l'override, si trova al seguente percorso:

Path-di-Joomla/modules/mod_login/tmpl/default.php

Si crei una nuova cartella che nomineremo html e la si includa nel template attualmente attivo in Joomla! Con un programma FTP la si trasferisca in remoto, in maniera tale da trovarsi al seguente percorso:

Path-di-Joomla/templates/Nostro-Template/html

Sempre in locale, si crei una seconda cartella alla quale daremo il nome mod_login e la si trasferisca, sempre via FTP, nella cartella html; adesso avremo:

Path-di-Joomla/templates/Nostro-Template/html/mod_login

Il file del core di Joomla!, default.php, lo si deve copiare da quello originale e trasferire nella cartellamod_logindel nostro template. Al termine di tutti questi passaggi avremo:

Path-di-Joomla/templates/Nostro-Templates/html/mod_login/default.php

Cominceremo a lavorare sul file default.php; qualsiasi modifica verrà apportata al codice, anche se dovesse influire sulla visualizzazione del sito, non ci deve preoccupare più di tanto; potremo sempre trasferire il file default.php originale e metterlo nella cartella mod_login del template.

Il codice HTML e PHP da modificare

Piccolo passo indietro. Dopo aver visto, nell'immagine precedente, come viene presentato a video il form senza nessuna formattazione, vediamo adesso come diventerà il form dell'area riservata, riportato nell'immagine seguente:

Form area riservata formattato
"Override modulo login Joomla!

C'è una bella differenza!

Nel file default.php, all'incirca al rigo 34, dobbiamo individuare il codice:

<form action="<?php echo JRoute::_( 'index.php', true, $params->get('usesecure')); ?>" method="post" name="login" id="form-login">

Dopo qualche rigo abbiamo:

<p id="form-login-username">
<label for="modlgn_username"><?php echo JText::_('Username') ?></label><br />
<input id="modlgn_username" type="text" name="username" class="inputbox" alt="username" size="18" /> </p>

Se volessimo avere la label ed il campo di testo in linea, si deve eliminare il <br /> subito dopo il tag di chiusura </label>.

Stessa cosa vale per il campo password. Per fare in modo che label e campo di testo stiano sullo stesso rigo, è necessario intervenire attraverso i CSS. Sempre in riferimento ai due campi di testo, ho anche eliminato l'attributo size="18" in quanto possiamo controllare la lunghezza sempre con i fogli di stile.

Fatti questi pochi passaggi, possiamo dire di aver concluso con il file default.php.

Formattazione del form con il codice CSS

La formattazione del form, come sappiamo, avviene grazie all'utilizzo dei fogli di stile. Vedremo come poter fare per inserire le immagini di sfondo nei due campi per user e password. Il pulsante di INVIO ed il menu sono abbastanza semplici da abbellire; non differiscono per niente da un normalissimo elenco che normalmente inseriamo nei contenuti.

Background titolo modulo

Prima di passare alla formattazione del form, vediamo come impostare l'immagine di sfondo per il titolo. Ricordo che tale titolo viene visualizzato in quanto nella pagina di editing del Mod_login è stato indicato un titolo (in questo caso Area Riservata) oppure uno a scelta. E' stato scelto "SI" per visualizzarlo, è stata scelta la posizione ed in quali pagine deve essere visualizzato, attraverso l'assegnazione menu. Se volessimo aggiungere anche un suffisso alla classe CSS del modulo, nella colonna dei Parametri, in corrispondenza della label Suffisso classe CSS modulo, possiamo inserire -login.

div.moduletable-login  h3{
font-family:Georgia, serif;
font-size:22px;
padding:0 0 0 30px;
background:url(../images/my_image.png) no-repeat 0 0;
height:30px;
line-height:30px;
font-weight:normal;
} 

Per quanto riguarda, invece, il tag <fieldset></filedset>, possiamo non visualizzarlo in questo modo:

form#form-login fieldset{
padding:5px;
border:none;
} 

Veniamo adesso ai due campi di testo:

form#form-login input#modlgn_username , 
form#form-login input#modlgn_passwd {
border:1px solid #ccc;
height:17px;
font-size:12px;
padding:0 0 0 20px;
}

form#form-login input#modlgn_username {
background:url(../images/user.png) no-repeat 0 0;}
form#form-login input#modlgn_passwd {
background:url(../images/password.png) no-repeat 0 0;}

Questo codice, esclusivamente per il titolo del modulo e per i campi di testo, rende molto più gradevole la presentazione del form senza toccare minimamente il codice sorgente del modulo stesso. L' override dell'output di Joomla!, come si può vedere, rende la vita molto più semplice per quelle parti del sito in cui è necessaria una personalizzazione più accurata ed a tema con il sito da realizzare.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati