Personalizzare la pagina di login per il backend

InfoAvete presente la pagina che ottenete quando digitate nel vostro browser l'url http://nomesito/administrator ?
Questa pagina, come altre, si può modificare e personalizzare a nostro piacimento.
Per farlo ci sono più strade.
Login Joomla
La strada più semplice consiste nell'installare un nuovo template per il lato amministrazione.
Di template per il backend ne esistono molti meno rispetto a quelli per il lato pubblico.
Per esempio prendiamo uno di quelli del sito http://www.joomlaos.de/, in particolare il "Control Backend Template versione 1.0".
Per installarlo si fa come qualsiasi altro template: dopo averlo scaricato, andiamo su estensioni, poi Installa/disinstalla, sfoglia ed infine carica file & instTemplate alternativoalla.
Una volta installato basta andare su Gestione template, scegliere la scheda Amministrazione e mettere come predefinito il template scelto.
Ovviamente un template di questo tipo deve soddisfare i requisiti di accessibilità e usabilità come qualsiasi altra grafica, cosa non pienamente fatta da "Control Backend Template".
Anche il pannello di amministrazione fa parte del template ed un'alternativa all'installazione è quella di modificare direttamente il codice del template di default (khepri).

I file relativi a quella pagina sono i seguenti:
  • .../administrator/templates/khepri/login.php
  • .../administrator/templates/khepri/css/login.css
  • .../administrator/language/it-IT/it-IT.ini
Come possiamo ben vedere sono tutti file che riguardano il template e il linguaggio del backend (cioè del pannello di amministrazione).

Passiamo a modificare i singoli pezzi.
Per fare questo scaricate con un client FTP i tre file sopra elencati, modificateli e poi ricaricateli nel sito sempre con un client FTP.
Prima di modificare i file facciamo una copia di backup di essi, per poterli così ripristinare in ogni momento.
Come primo esempio modifichiamo la frase "Login pannello amministratore Joomla!"
Nel file login.php esso corrisponde alla riga di codice seguente: 
Login modificato 1Andiamo sul file it-IT.ini e cerchiamo la frase "Joomla! Administration Login". Troveremo la traduzione di essa. Modifichiamo questa traduzione.
Io per esempio l'ho cambiata in "Login per ventus85".

In modo del tutto analogo facciamo la stessa cosa per la scritta "Torna alla Home Page del sito": nel file login.php è la seguente riga:
Essa rappresenta un collegamento e se non vogliamo il collegamento basta togliere il tag cioè i pezzi di codice

Login modificato 2Nel mio esempio ho modificato la traduzione di "Return to site Home Page" (nel file it-IT.ini) con la scritta "Torna al sito http://ventus85.ilbello.com/".

Se voglio modificare la scritta "Nome utente e password non coincidono" quando un utente inserisce dei dati sbagliati, basta modificare nel file della lingua la scritta E_LOGIN_AUTHENTICATE.
Nell'esempio ho inserito al posto della frase standard la frase "Riprova! Sarai più fortunato!", come è possibile vedere in figura.

Con lo stesso procedimento possiamo modificare anche le altre scritte presenti.

Ora passiamo a modificare altre cose.
Per esempio se vogliamo cambiare il colore del bordo andiamo su questa riga:

Sostituiamo green con red.

Osservazione: questa cosa possiamo farla anche direttamente dal backend (vedi dopo).

Ora invece cambiamo l'immagine. Quella di default è un lucchetto ed è contenuta in administrator/templates/khepri/images.
Troviamo il riferimento a questa immagine nel file css del login (.../administrator/templates/khepri/css/login.css):
#lock  {
    background: url('/../images/j_login_lock.jpg') 50% 0 no-repeat;
    width: 150px;
    height: 137px;
}

Login modificato 3
Quindi basta caricare nel nostro sito (possibilmente nella medesima cartella) l'immagine che desideriamo e cambiare le proprietà del css.
Io carico il mio avatar. Si può caricare attraverso il client ftp oppure passargli direttamente l'url dell'immagine (se è presente nel web).

Se vogliamo cambiare il disegno del bottone Login bisogna ricordare che esso è composto da più immagini, per esempio il file administrator/templates/khepri/images/j_button1_next.png rappresenta solo la parte a destra della parola Login, cioè la parte con la freccia verde.
Io per esempio ho tolto proprio quel file e al suo posto ho caricato un'immagine 26x26 pixel (cioè della stessa dimensione del precedente) con una scritta Go su un pallino rosso, come possiamo vedere dalla figura.Login modificato 4

Se invece non vogliamo mettere mani nel codice possiamo in parte personalizzare lo stessso la nostra pagina. Infatti entrando nel backend e andando su Gestione template > Amministrazione e selezionando il nostro template possiamo impostare tre proprietà:Login modificato 5Parametri template amministrativo
  • utilizza angoli arrotondati;
  • mostra nome del sito;
  • header color;
Ovviamente queste proprietà riguardano tutto il template lato amministratore e non solo la pagina del login.

Una cosa molto importante da ricordare: avendo modificato dei file presenti nel pacchetto del core di Joomla, ad ogni aggiornamento di Joomla dobbiamo ricordarci di controllare se tra i file lingua e gli altri file aggiornati ci sono anche quelli che sono stati modificati. Nel caso ci siano, è necessario controllare le modifiche apportate ai file e integrarle.

Scritto da ventus85

CommentaCommenta questo articolo sul forum