Come la maggior parte dei lettori sapranno, in MDPro esiste la possibilità di gestire i template grafici attraverso un utilissimo strumento chiamato Autotheme Lite. Tale strumento consente di creare una visualizzazione personalizzata per ogni sezione del sito garantendo così un totale controllo su uno degli aspetti fondamentali da tenere in conto quando si pubblica un sito internet: il layout grafico.

Prima di iniziare a trattare in modo approfondito il funzionamento di Autotheme Lite definiamo un po' di notazione tanto per iniziare a parlare la stessa lingua e non trovarci a confonderci in ogni spiegazione (troppo spesso nelle richieste di aiuto gli utenti alle prime armi chiamano gli oggetti di un CMS con il nome sbagliato :D ndr )

Gli oggetti principali da conoscere sono:
	Blocco		Area della pagina contenente un particolare oggetto (spesso può contenere il risultato dell'elaborazione di un Modulo)
	Modulo		Può essere definito come una vera e propria applicazioncina Web in grado di fornire nuove funzionalità avanzate al vostro portale
	Template       Modulo		Pagina html contenente le definizioni delle aree di visualizzazione dei blocchi e dei moduli
	Template       Blocco		Pagina html contenente unicamente le informazioni di visualizzazione di un singolo blocco

Per semplicità di trattazione indicherò nell'immagine seguente le varie entità presentate.

Iniziamo ora a capire come impostare un template modulo generale e un template blocco generale e passeremo solo in seguito alla personalizzazione di ogni modulo e blocco presente sul nostro portale. [pagebreak]

Template
  Modulo Generale (theme.html)

La prima cosa da fare per realizzare un template modulo generale per il nostro sito, è quella di realizzare una pagina html che abbia l'aspetto che desideriamo visualizzare come layout generale. Vediamo step by step come fare a creare il nostro tema personalizzato:

  

• Andiamo nella cartella themes di MDPro e duplichiamo una delle cartelle presenti, ad esempio MDPro.
    
  
• Rinominiamo la nuova cartella con il nome che vogliamo dare al nostro tema (d'ora innanzi MioTema)
    
  
• Entriamo nella cartella MioTema e settiamo il CHMOD del file theme.cfg a 666.
    
  
• Apriamo il file theme.html con un editor html.
  

A questo punto date sfogo alla vostra creatività tenendo presente che all'interno di questo file sono presenti una serie di commenti che NON VANNO ASSOLUTAMENTE ELIMINATI. Ma vediamo di capire a cosa servono questi commenti e perchè non vanno eliminati.

	<­TABLE       WIDTH="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">       <­TR>       <­TD WIDTH="3"><­IMG SRC="{image-path}spacer.gif"       WIDTH="3" HEIGHT="1"><­/TD>       <­TD VALIGN="TOP">       <­!-- [left-blocks] -->        <­/TD>       <­TD WIDTH="100%" ALIGN="CENTER" VALIGN="TOP">              <­TABLE WIDTH="98%" BORDER="0" CELLSPACING="0"       CELLPADDING="0">       <­TR>       <­TD ALIGN="CENTER">       <­!-- [center-blocks] -->        <­BR>       <­!-- [modules] -->        <­/TD>       <­/TR>       <­/TABLE>       <­/TD>       <­TD VALIGN="TOP">       <­!-- [right-blocks] -->        <­/TD>       <­TD WIDTH="3" ALIGN="RIGHT"><­IMG SRC="{image-path}spacer.gif"       WIDTH="3" HEIGHT="1"><­/TD>       <­/TR>       <­/TABLE>

Come è possibile vedere i commenti hanno dei nomi familiari che potete ritrovare nell'immagine precedente. E' intuitivo a questo punto capire a cosa corrispondono e non dovrebbe essere difficile capire che lo spostamento di uno di questi commenti farà spostare l'area blocchi relativa nella visualizzazione della vostra pagina.

N.B.

  I commenti vanno inseriti facendo particolare attenzione agli spazi.Autotheme infatti non è in grado di interpretare commenti che non contengano gli spazi al posto giusto (e voi rischiate di impazzire perchè non riuscite a visualizzare nulla :)).

Esempio:

<­!-- [right-blocks] -->
Correttamente interpretato da Autotheme

<­!--[right-blocks]-->
Non correttamente interpretato da Autotheme [pagebreak]

Template Blocco Generale (leftblock.html, rightblock.html, centerblock.html)

Una volta definito il Template Modulo Generale passiamo a capire come funzionano i Template Blocchi e a cosa servono.

Come primo passo mostreremo come creare un template blocco personalizzato e successivamente spiegheremo più approfonditamente come realizzare e applicare dei template personalizzati ad ogni blocco.

Incominciamo con andare a vedere i file presenti all'interno della nostra cartella MioTema che abbiamo precedentemente creato e troveremo i seguenti file:

leftblock.html

  rightblock.html

  centerblock.html

Apriamo ad esempio leftblock.html (gli altri funzionano allo stesso identico modo) e vediamo che cosa possiamo modificare e come.

	<­TABLE       WIDTH="160" BORDER="0" CELLSPACING="0" CELLPADDING="0">       <­TR>       <­TD HEIGHT="28" ALIGN="CENTER" VALIGN="TOP"       BACKGROUND="{image-path}mdpro_block_top.gif">        <­!-- [block-title] -->       <­/TD>       <­/TR>       <­TR>       <­TD>       <­TABLE WIDTH="100%" BORDER="0" CELLSPACING="0"       CELLPADDING="0">       <­TR>       <­TD WIDTH="1" BGCOLOR="#25323B"><­IMG SRC="{image-path}spacer.gif"       WIDTH="1" HEIGHT="1"><­/TD>       <­TD>       <­TABLE WIDTH="100%" BORDER="0" CELLPADDING="0"       CELLSPACING="4">       <­TR>       <­TD HEIGHT="20">        <­!-- [block-content] -->       <­/TD>       <­/TR>       <­/TABLE>       <­/TD>       <­TD WIDTH="1" ALIGN="RIGHT" BGCOLOR="#25323B"><­IMG       SRC="{image-path}spacer.gif" WIDTH="1" HEIGHT="1"><­/TD>       <­/TR>       <­/TABLE>       <­/TD>       <­/TR>       <­TR>       <­TD><­IMG SRC="{image-path}mdpro_block_bot.gif" WIDTH="160"       HEIGHT="14"><­/TD>       <­/TR>       <­/TABLE>       <­TABLE WIDTH="160" BORDER="0" CELLSPACING="0"       CELLPADDING="0">       <­TR>       <­TD HEIGHT="7"><­IMG SRC="{image-path}spacer.gif"       WIDTH="1" HEIGHT="7"><­/TD>       <­/TR>       <­/TABLE>

Come è facilmente intuibile i commenti rappresentano rispettivamente la posizione del titolo del blocco e la posizione del contenuto del blocco all'interno del template.
Per modificare il template è sufficiente che ricreiate la pagina a vostro piacimento inserendo gli elementi grafici che più gradite e posizionando i commenti nelle posizioni dove volete che appaiano il titolo e il contenuto del blocco.

N.B.

nel tema di default molti titoli dei blocchi sono associati a delle immagini perciò verrà visualizzata l'immagine corrispondente in quel tema piuttosto che il titolo. Se avete modificato i colori e la grafica del vostro template probabilmente vi troverete ad avere un'immagine al posto del titolo che non c'entra nulla con la vostra grafica, per ovviare a ciò eseguire le seguenti operazioni (a seconda che vogliate proprio eliminare l'immagine o semplicemente modificarla inserendo quella che preferite al posto del titolo)

Caso I - Modifica dell'immagine del titolo per renderla compatibile con la vostra grafica

  

1. andate nella cartella MioTema/images/ita (ho messo ita ma per cambiare la visualizzazione anche nelle altre lingue è necessario applicare questa modifica a tutte le cartelle di lingua contenute sotto images)
     
   
2. cercate l'immagine del titolo del vostro blocco e sostituitela con la vostra (la cosa importante è che il nome dell'immagine sia lo stesso)
   

Caso II - Eliminazione dell'immagine del titolo per far posto al titolo in formato testo

  

1. andate nella cartella MioTema/images/ita (ho messo ita ma per cambiare la visualizzazione anche nelle altre lingue è necessario applicare questa modifica a tutte le cartelle di lingua contenute sotto MioTema/images)
     
   
2. cercate l'immagine del titolo del vostro blocco ed eliminatela.
   

Note

   Ciò che è necessario tenere presente è che tutti i blocchi che saranno posizionati a sinistra e per i quali non saranno stati creati dei template blocco personalizzati, verranno visualizzati utilizzando il template leftblock.html, così come la stessa cosa accadrà per i blocchi centrali e quelli di destra ( rispettivamente con centerblcok.html, e rightblock.html).
Tenete presente questo aspetto quando progettate la vostra pagina perchè è di fondamentale importanza sapere che ogni blocco che attiverete in una determinata posizione e per il quale non abbiate definito un template blocco personalizzato erediterà le impostazione del template blocco relativo alla sua posizione. [pagebreak]

Personalizzazione Template Modulo

Fino ad ora abbiamo trattato gli aspetti più semplici della personalizzazione del vostro portale. E' arrivato il momento di capire come fare a personalizzare ogni singolo elemento del nostro sito.

Autotheme ci consente di visualizzare ogni singolo modulo usando un template differente, così ad esempio potremo avere un template per la visualizzazione dell'homepage e potremo visualizzare invece ad esempio la pagina contenuti (subjects) in modo totalmente diverso.

Le operazioni da eseguire sono piuttosto semplici:

  

1. Creiamo il nuovo template modulo (che chiameremo per comodità contenuti.html e inseriremo nella cartella moduli che avremo precedentemente creato dentro la cartella MioTema)
     
   
2. Posizioniamo i commenti relativi alle aree blocchi e moduli (<­!-- [left-blocks] -->... etc...)che vogliamo nella nostra pagina (potremo ad esempio visualizzare le varie aree blocchi in posizioni diverse da quelle che avevamo impostato nel template modulo generale "theme.html")
     
   
3. Andiamo sul nostro portale e clicchiamo su amministra nel menù amministrazione e poi clicchiamo su Autotheme.
     
   
4. Selezioniamo il nostro tema (MioTema).
     
   
5. Comparirà una schermata simile a questa:
   
       
       
     
   
6. Clicchiamo sul link subjects e visualizzeremo la seguente schermata:
   
       
   
       
       
     
   
7. Alla voce Templates Principale andiamo a sostituire theme.html con moduli/contenuti.html
     
   
8. Settiamo a 1 i blocchi da mostrare nella nostra pagina (in realtà potrebbero essere settati tutti a 1 tanto se non li avete previsti nel vostro template contenuti.html non saranno mai visualizzati, ma è buona norma settare a 1 solo quelli che sono presenti nel template)
     
   
9. Salviamo
   

Il gioco è fatto! Andiamo a vedere il risultato e potremo goderci il nostro template modulo personalizzato per il modulo Contenuti (subjects). [pagebreak]

Personalizzazione Template Blocco

Questa caratteristica di Autotheme risulta essere quella più interessante e utile poichè ci permette di visualizzare ogni blocco del nostro sito con un template personalizzato.
Supponiamo di voler modificare la visualizzazione del blocco Sondaggio modificando i colori del blocco a nostro piacimento. Vediamo come fare:

  

1. Creiamo una pagina html con il nuovo template blocco che chiameremo per comodità sondaggio.html e inseriremo nella cartella blocchi che avremo precedentemente creato nella cartella MioTema.
     
   
2. Definiamo dove inserire i commenti (<­!-- [block-title] -->,<­!-- [block-content] -->) all'interno del nostro template
     
   
3. Clicchiamo su amministra nel menu' amministrazione di MDpro e poi su Autotheme
     
   
4. Selezioniamo il nostro tema da modificare
     
   
5. In basso avremo una casella vuota dove inserire il nome del blocco da personalizzare. Inseriamo il nome del blocco da personalizzare (in questo caso Sondaggio) facendo attenzione ad usare esattamente il nome preciso del blocco (attenzione a maiuscole e minuscole) e clicchiamo su Aggiungi.
   
       
       
     
   
6. Nella nuova schermata che apparirà avremo la nuova voce Sondaggio tra i blocchi personalizzati con accanto una casella di testo vuota.
     
   
7. Inseriamo il percorso del nostro template blocco precedentemente creato (blocchi/sondaggio.html) e salviamo.
   
       
       
   

Ebbene il gioco è fatto! Semplice no?!

Con questo si conclude la prima parte di Autotheme for dummies. Nella speranza di essere d'aiuto a tutti i neofiti che si avvicinano a MDPro e di essere stato sufficientemente chiaro nella spiegazione vi saluto e vi rimando al prossimo tutorial.

Whix