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:
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:
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:
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:
Subito dopo lo snippet <jdoc:include type="message" />, possiamo cominciare con l'apertura del div contenitore:
Molto più chiaro e pulito rispetto al codice attualmente presente nella pagina. Continuando abbiamo:
Dopo queste 3 righe di codice PHP, che NON devono essere assolutamente toccate, abbiamo il form che contiene i due campi di testo:
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 si è fatta 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 "offline page":
Buon lavoro
Fonte:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Subito dopo lo snippet <jdoc:include type="message" />, possiamo cominciare con l'apertura del div contenitore:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Molto più chiaro e pulito rispetto al codice attualmente presente nella pagina. Continuando abbiamo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Dopo queste 3 righe di codice PHP, che NON devono essere assolutamente toccate, abbiamo il form che contiene i due campi di testo:
HTML:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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 si è fatta 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 "offline page":
Buon lavoro
Fonte: Perfavore,
Entra
oppure
Registrati
per vedere i Link!
