Personalizzare pagina offline joomla
Personalizzare pagina offline Joomla!
Extrowebsite

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

Sito Joomla! offline
Sito Joomla! offline

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.