Smanettando tra i files del core di Joomla! mi sono reso conto che è possibile personalizzare la pagina di login, la quale dà accesso a tutta l'area amministrativa.
Potrebbe non piacere lo sfondo monocromatico di default ed in questo tutorial vedremo come fare per avere una immagine personalizzata di background.
Recuperare i files del templates amministrativo "Isis"
Il template amministrativo di Joomla!, al momento della installazione, è "Isis". Noi vorremmo cambiare e personalizzare lo sfondo della pagina di login.
Affinchè la personalizzazione vada a buon fine, ci si deve procurare i files del template. Essi sono:
- login.php
- template.css
Il primo si trova al seguente percorso:
/administrator/templates/isis/login.php
il secondo:
/administrator/templates/isis/css/template.css
Accedere via FTP alla cartella nella quale è installato Joomla! per individuare i suddetti files e trasferirli sul desktop.
Il div contenitore al quale possiamo cambiare il colore di background, oppure inserire una immagine di sfondo, si chiama .view-login.
Aprire il file template.css ed individuare la classe .view-login. Troviamo:
.view-login {
background: #17568c;
padding-top: 0;
}
Per vedere la modifica del solo colore di sfondo, è possibile cambiare il solo colore esadecimale. Il codice diventerà:
.view-login{
background-color: brown;
padding-top: 0;
}
Salvare il file ed uplodarlo sul server. Raggiungere la pagina di amministrazione Joomla!
www.nomesito.it/administrator
Adesso il colore della pagina risulterà di colore maroon. Vuol dire che tutto sta procedendo come dovrebbe. Ovviamente per chi volesse avere solo un colore di sfondo diverso da quello di default, non deve fare altro che scrivere un colore più simpatico.
Impostare una immagine di background alla pagina login.php di Joomla!
Se volessimo avere una immagine di background, la si deve prima creare e poi trasferirla nella cartella images al percorso:
/administrator/templates/isis/images
Sempre nel file template.css, invece del colore brown scriveremo:
.view-login{
padding:0;
background: url(../images/nome-immagine-background.jpg);
background-repeat:no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
}
Volendo spingerci ancora più in là, possiamo anche modificare il logo posto sul form di login di Joomla!, con uno a nostra scelta.
Anche in questo caso si crei il logo e lo si trasferisca sempre via FTP nella cartella
/administrator/templates/isis/images
Si apra il file login.php in vista codice ed indicativamente al rigo 110 comincia la parte di codice HTML e PHP che ci interessa.
Individuare il seguente rigo:
<div id="element-box" class="login well">
poi è presente una condizione PHP
<?php else: ?>
e poi abbiamo:
<img src="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/joomla.png" alt="<?php echo $sitename; ?>" />
Non dovremo fare altro che cambiare il nome dell'immagine presente joomla.png con quella creata da noi.
<img src="/<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/images/NOME-IMMAGINE-PERSONALIZZATA.png" alt="<?php echo $sitename; ?>" />
Dopo aver cambiato il nome dell'immagine, salvare il file e trasferirlo via FTP sul server.
La mia demo di esempio mi ha portato a questo risultato:
Una alternativa alla sostituzione del logo del pannello amministrativo, potrebbe essere la seguente:
- Loggarsi come amministratore
- Selezionare: Estensioni ⇒ templates ⇒ scegliere dalla select lato amministrazione ⇒ Isis
- Avanzate
- Logo
- Logo Login
- caricare l'immagine precedentemente uplodata sul server
N.B. Il file login.php è un file del "core di Joomla!". Potrebbe succedere che i futuri aggiornamenti possano interessare anche la pagina di login per l'amministrazione e sovrascrivere quanto modificato da noi.
Come si potrebbe ovviare a questo inconveniente? Sarebbe bene, una volta che l'override fatto da noi sia andato a buon fine, farsi una copia del nostro login.php e rinominarlo, per esempio, my_login.php e trasferirlo sempre nella cartella del core. Il file si troverà al percorso:
/administrator/templates/isis/my_login.php
In questo modo, se dovessimo "perdere" la nostra modifica, si rinominerà my_login.php in login.php direttamente sul server, via FTP.