Avete 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.
override del file offline.php
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. Inoltre, nel file c’è principalmente del codice php, 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>) 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 in grassetto è 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
Uno script per nascondere il form di login
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");