Personalizzare la pagina "offline" di Joomla!

Innanzitutto la pagina in oggetto prende il nome di offline.php. Collegandoci con un programma FTP nella directory in cui è installato Joomla!, portiamoci nella seguente cartella:

/templates/system/offline.php

Trasferiamo la pagina sul nostro desktop. Aprendola in vista codice, troviamo tutto il codice PHP ed HTML che ci stampa a video il logo, il nome del sito, un breve testo ed il form per il login.

Sinceramente tutto quel codice per così pochi elementi mi pare abbastanza eccessivo. Inoltre ci sono anche dei richiami a files CSS che non servono a molto. Per il mio sito ne ho creato uno effettuando una pulizia notevole a livello di codice. I files e le cartelle che ci interessano si trovano ai seguenti percorsi:

/templates/system/css/offline.css
/templates/system/images/

Il file "offline.css", (ma non solo quello) si occupa della formattazione della pagina. Nella cartella /templates/system/images/ possiamo trasferire, per esempio, il logo del nostro sito.

Premesso che sarebbe bene effettuare una copia di backup di tutti i files, apriamo "offline.php" in vista codice. Come prima cosa da fare, ci sarebbe da eliminare i link ai files .css che ci sono; quindi le righe:

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

<?php if($this->direction == 'rtl') : ?>

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

<?php endif; ?>

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

possiamo cancellarle. Creiamo un nostro file .css personalizzato che chiameremo "myoffline.css" e lo trasferiamo nella cartella "css", esattamente al percorso visto sopra. Adesso si deve creare il link al file "myoffline.css", in questo modo:

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

Subito dopo lo snippet <jdoc:include type="message" />, possiamo cominciare con l'apertura del div contenitore:

<div id="container">
<div class="title"> </div>
<h1><?php echo $mainframe->getCfg('sitename'); ?></h1>
<p><?php echo $mainframe->getCfg('offline_message'); ?></p>

Molto più chiaro e pulito rispetto al codice attualmente presente nella pagina. Continuando abbiamo:

<?php if(JPluginHelper::isEnabled('authentication', 'openid')) : ?>
<?php JHTML::_('script', 'openid.js'); ?>
<?php endif; ?>

Dopo queste 3 righe di codice PHP, che NON devono essere assolutamente toccate, abbiamo il form che contiene i due campi di testo:

<form action="http://www.extrowebsite.com/" method="post" name="login" id="form-login">
Qui tutto il codice HTML e PHP per i campi
</form>

Anche in questo caso, fare attenzione a non modificare nulla del codice esistente. Ovviamente subito dopo la chiusura del form, non dimentichiamo di chiudere anche il </div>, riferito al "div container" aperto all' inizio.

Se è stata prestata attenzione a quanto scritto nel primo blocco di codice (immediatamente dopo "<div id="container">"), si sarà notato l' eliminazione del tag "<img />", sostituendolo con un <div class="title"></div>. Nel codice CSS è stato formattato in maniera tale da far apparire il logo, inscrivendolo in un elemento di blocco, div, appunto. Cosa cambia dall' inserire l'immagine direttamente? Nulla. E' stata solo una preferenza verso questo modo di presentare il logo.

Il titolo del sito (<h1><?php echo $mainframe->getCfg('sitename'); ?></h1>) è stato inserito in un tag <h1>, giusto per rispettare la semantica di una pagina web. Ovviamente, anche in questo caso, il titolo lo possiamo formattare da CSS per dare un aspetto omogeneo con tutto il resto del sito.

In ultimo abbiamo il testo che leggeremo quando metteremo il sito offline, racchiuso in un paragrafo: ( <p><?php echo $mainframe->getCfg('offline_message'); ?></p> ).

Segue il form che possiamo presentarlo anch' esso come meglio desideriamo, via CSS.

Direi che questo è tutto quello che ci interessa per la pagina in oggetto. Di seguito una screen della mia "offline page":

Screen della pagina offline Joomla! modificata
Screen della pagina offline di Joomla! modificata

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati