Modificare la pagina offline di Joomla!

 

modificare la pagina offline di joomlaAvete mai pensato di personalizzare la pagina offline di Joomla! ? Magari non vi piace com’è fatta oppure non desiderate che presenti ai visitatori il form di login. Se volete sapere come modificarla leggete questo articolo, Illustrerò alcuni semplici istruzioni per modificarla, inserendo un’immagine come sfondo e nascondendo il modulo di login.

Innanzitutto per effettuare le modifiche vi suggerisco di procedere con l’override del file offline.php. Copiamo questo file nella directory del nostro template, per esempio:

/templates/mio_template/

Il file offline.php del core di Joomla! si trova nella directory /templates/system/

Apporteremo tutte le modifiche sulla copia di questo file, non modificheremo l’originale. Nel file c’è principalmente del codice php, noi aggiungeremo uno script javascript che nasconda il login.

Apriamo il nostro offline.php con un editor di testo e cerchiamo nelle prime righe dell’head (per l’appunto la parte racchiusa tra i tag <head><⁄head>) quelle che fanno riferimento al foglio di stile css che viene utilizzato per la pagina offline.php, troveremo una riga molto simile alla seguente:

<link rel="stylesheet" href="/<?php echo $this->baseurl; ?>/templates/system/css/offline.css" type="text/css" />

La parte che vedete evidenziata è il percorso dove si trova appunto il file offline.css, vi consiglio di copiare anche questo file nella directory del vostro template, così da fare le successive modifiche direttamente su questa copia.
Per esempio la potrete copiare in:

/templates/mio_template/css/offline.css

Quindi variamo il percorso in grassetto per fare riferimento a questa copia del file offline.css

Adesso inseriamo, prima della dichiarazione DOCTYPE, lo script che nasconderà il nostro form di login. Lo script è il seguente:

<script> 
 function nascondi-form() { 
 var element=document.getElementById("form-login"); 
 if (element.style.display == 'none') 
 element.style.display="block"; 
 else 
 element.style.display="none"; 
 } 
 </script> 

Proseguendo nel file cerchiamo la stringa che visualizza il form e cambiamo la parte style come segue:

<form action="<?php echo JRoute::_('index.php', true); ?>" method="post" id="form-login" style="display:none">

Con questa modifica il form di login non viene più visualizzato. 

Infine scegliamo un elemento, per esempio un’immagine, su cui dovremo fare clic per visualizzare il form di login.

<img src="/images/target-offline.png" onClick="nascondi-form()" />

Nell’esempio sopra abbiamo scelto il tag html img che visualizza l’immagine target-offline.png. Aggiungendo il comando in grassetto facendo click su questa immagine verrà richiamato lo script. Il codice javascript, se avete compreso il funzionamento, cambia lo stato del form da invisibile a visibile, e se clicchiamo nuovamente nasconderà ancora il form.

Infine, personalizzando anche la copia del file offline.css, potremo abbellire un pochino la pagina, magari semplicemente aggiungere un’immagine di sfondo centrata.
Il codice è il seguente:

background-position: center; 
background-repeat: no-repeat; 
background-image: url("/images/offline.jpg"); 



MILANO (MI), VIA CANNOBIO, 39 - MM MISSORI
RAVENNA (RA), Viale degli Ippocastani, 122

© 2021 alwaysun.it  all rights reserved

Hire Me

Web Designer
se mi vuoi contattare per una consulenza o una proposta di lavoro, puoi farlo qui:

Questo indirizzo email è protetto dagli spambots. È necessario abilitare JavaScript per vederlo.
Tel. +39 348 390 6888