Apportare una personalizzazione alla pagina offline di Joomla! è un'operazione molto semplice se si vuole apporre il proprio logo alla pagina in oggetto, cambiare dimensioni del form ecc. Vediamo come fare in pochi passaggi.
Mettere il sito offline
Per mettere un sito Joomla! offline, ci si deve loggare da amministratore, andare in:
Sistema ⇒ Configurazione Globale ⇒ Impostazioni Sito ⇒ Sito offline SI
Il file offline.php
Il file in questione, offline.php, una volta installato Joomla!, si trova nella cartella /templates/system/offline.php. Va spostato nella cartella del template che si sta utilizzando: templates/Template-Attivo/offline.php. In questo modo possiamo apportare qualsiasi override desideriamo. Al file nativo del "core" non succederà assolutamente nulla.
Modificare il file offline.php
Se apriamo il file offline.php in vista codice, indicativamente al rigo 80 troviamo codice php che consente di apportare modifiche CSS attraverso la creazione di un file personalizzato. Il codice è il seguente:
// Check for a custom CSS file
$userCss = JPATH_SITE . '/templates/' . $this->template . '/css/user.css';
if (file_exists($userCss) && filesize($userCss) > 0)
{
$doc->addStyleSheetVersion($this->baseurl . '/templates/' . $this->template . '/css/user.css');
}
Invece di andare a sovrascrivere i due file CSS nativi della pagina, possiamo tranquillamente creare user.css e scriverci dentro.
Si desidera avere una immagine di background a tutta pagina? Si deve agire sull'elemento .outer
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
background:url(images/immagine.jpg);
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-ms-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
Cambiare il colore del font con cui è scritto il titolo ed nome del sito.
.header h1 {
padding:10px 0 0 0;
color:#fff;
}
.header p {
margin:0 ;
padding:0 0 15px;
color:#fff;
}
Individuare gli elementi della pagina
Per individuare tutti gli elementi che compongono la pagina offline.php, aiutarsi con l'inspector di Google Chrome. In quel caso è molto semplice scrivere codice CSS personalizzato in base al tema ed ai colori del proprio sito.