Pagina login amministrazione Joomla!
Pagina login amministrazione Joomla!
Extrowebsite

Smanettando nel codice 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:

Pagina personalizzata login amministrativo Joomla!
Pagina personalizzata login amministrazione Joomla

Siccome il file login.php è un file del core, sarebbe consigliabile fare una copia perchè, se qualcosa non dovesse andare per il verso giusto, si può sempre tornare indietro ed avere il file originale.