Ogni tanto capita di voler visualizzare, al posto del template predefinito del sito, una pagina introduttiva (Intropage) contenente ad esempio un'immagine cliccando sulla quale si accede al sito vero e proprio.
La soluzione che propongo in questo articolo prevede l'utilizzo di un secondo template vuoto e un articolo di Joomla contenente l'immagine da visualizzare nella Intropage.
Quello che ci occorre per creare una Intropage è:
- l'immagine da visualizzare nella Intropage
- un templete vuoto scaricabile da questo link
- un editor di testo con il quale modificheremo alcuni file del template vuoto (consiglio notepad++)
Ho testato il procedimento con Joomla 2.5 ma non vuol dire che non funzioni con le versioni precedenti e successive di Joomla.
Perchè un template vuoto?
In realtà potremmo usare il template predefinito del sito facendone una copia e modificandolo successivamente, ma questa soluzione prevede un grado di esperienza molto più elevato e preferisco fare le cose in modo più semplice.
Adesso procediamo come segue:
1) creiamo un nuovo articolo dal titolo "Intropagecontent" assegnandolo alla categoria "non categorizzato" o altra categoria appositamente creata.
2) nell'articolo inseriamo l'immagine da visualizzare nella Intropage. Sull'immagine creiamo un link alla voce di menu Home del sito. L'editor JCE aiuta molto visto che visualizza tutte le voci di menu del sito. In ogni caso il collegamento dovrebbe essere così formato:
index.php?option=com_content&view=featured&Itemid=101
dove l'Itemid 101 è il valore dell'id della voce di menu Home. Quando create il link sull'immagine fate copia e incolla del testo sopra riportato incollandolo nella casella URL e modificate solo il valore dell'ItemId con quello della vostra voce di menu Home.
Per vedere l'id della voce di menu Home andate in Gestione Menu e visualizzate il menu che contiene la voce Home (in genere il Menu principale).
3) da Gestione Menu creiamo un nuovo menu dal Titolo "IntropageMenu" e Tipo menu Intropage
e subito dopo una nuova voce di menu chiamata "GoIntropage" di tipo Singolo articolo collegata all'articolo IntropageContent precedentemente creato.
4) nella voce di menu "GoIntropage" modifichiamo le Opzioni Articolo per disattivare la visualizzazione del titolo dell'articolo, della data di creazione/modifica e delle icone di invio mail, stampa e di tutto quello che non va visualizzato. Nelle Opzioni visualizzazione pagina inseriamo il Titolo pagina Browser altrimenti verrà visualizzato il nome della voce di menu. Sempre nelle Opzioni visualizzazione pagina impostare a No l'opzione Mostra intestazione pagina.
5) installare il template "Blacktemplate"
6) Da Gestione template clicchiamo sul nome del template Blanktemplate e modifichiamo lo stile di questo template. Nella sezione Assegnazione menu spuntiamo la voce di menu GoIntropage del menu IntropageMenu.
7) nel file /templates/blanktemplate/css/template.css (il foglio di stile del Blanktemplate) modifichiamo la seguente classe di stile:
.div-centrato{
position:absolute;
top:50%;
left:50%;
margin-top:-300px; <-- metà dell'altezza dell'immagine
margin-left:-400px; <-- metà della larghezza dell'immagine
width:800px; <-- larghezza immagine
height:600px; <-- altezza immagine
}
le dimensioni indicate nelle proprietà margin-top e margin-left devono essere pari rispettivamente alla metà dell'altezza e alla metà della larghezza dell'immagine scelta e inserita nell'articolo Intropagecontent.
Questa classe dei stile permette di centrare nella pagina l'immagine contenuta nell'articolo.
Sempre nel foglio di stile template.css modificando il codice del colore nella proprietà background-color del tag body si può cambiare il colore di sfondo della pagina nel browser.
body {
background-color: #FFFFFF; /* colore di sfondo della pagina */
color: #000000;
}
8) torniamo alla Gestione menu e nel menu IntropageMenu selezionare la voce di menu GoIntropage come Home (cliccare sulla casella a sinistra della voce di menu GoIntropage e poi cliccare sul pulsante Home in alto a destra)
A questo punto visualizzando l'url del sito nel browser invece di vedere il template prefefinito vedremo l'immagine che abbiamo scelto come intro page,
cliccando sull'immagine vedremo comparire il template predefinito.
Thats all falk!
AUTORE: Cosimo Baviera