VUFIND – Tutorial 6 – Personalizzare il tema

Dopo aver creato le istanze multiple di VUFIND adesso è il momento di renderle graficamente diverse. Per far ciò occorre generare un nuovo tema e richiamarlo dalla nuova istanza.

Cosa è una tema ? Un tema è l’insieme dei template e dei css responsabili dell’aspetto grafico di una istanza. Si presentano come directory sotto la cartella themes della directory di installazione di VUFIND.

Ogni tema ha una struttura dati prestabilita, presenta la seguente struttura dati:

  • una cartella css contenente tutti i file css usati
  • una cartella images contenente tutti le immagini usate
  • una cartella js contenente tutti i file javascript necesessari
  • una cartella templates contenente tutti i file php template responsabili della renderizzazione delle pagine
  • un file theme.config.php che gestisce la configurazione del tema

VUFIND mette a disposizione alcuni temi già configurati e mette a disposizione un meccanismo di ereditarietà che ci permette di creare agevolmente nuovi temi con il minimo sforzo.

Nell’articolo precedente abbiamo creato due istanze VUFIND, site1 e site2, entrambi che utilizzano lo stesso tema.

Creiamo un nuovo tema site1 da agganciare alla prima istanza. Per far ciò è sufficiente creare una cartella site1 all’interno della cartella themes contenente solo il file di configurazione theme.config.php. Tale file va modificato per indicare il tema da cui ereditare le caratteristiche, nell’esempio che segue sto ereditando da blueprint.

e modifichiamo il file config.ini dell’istanza site1 per agganciare il nuovo tema tramite il comando

Lanciando la prima istanza non noteremo differenze, questo perchè il tema site1 eredita blueprint.

site1

Adesso introduciamo delle modifiche all’aspetto grafico. Creiamo all’interno del nostro tema la cartella css e la cartella images dove inserire il file style.css e il nuovo logo. All’interno del file css modifichiamo il tipo searchHomeForm in questo modo

e aggiungiamo il nuovo logo, ottenendo questo effetto

site1Modificato

A questo punto possiamo modificare il template grafico, in particolare modifichiamo il footer per rimuovere una sezione. Per fare questo creiamo la cartella templates all’interno del nostro tema e copiamo il file footer.phtml dal tema blueprint. Modifichiamo il file rimuovendo una parte del footer

 e ottenendo l’effetto grafico seguente

site1Modificato2