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.
|
1 2 3 4 |
<?php return array( 'extends' => 'blueprint', 'css' => array( |
e modifichiamo il file config.ini dell’istanza site1 per agganciare il nuovo tema tramite il comando
|
1 2 |
;theme = bootprint theme = site1 |
Lanciando la prima istanza non noteremo differenze, questo perchè il tema site1 eredita blueprint.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.searchHomeForm { background-color: #bbb; padding:2em; text-align:left; margin-top:.5em; font-size: 12pt; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border: 2px solid #C6D880; color: #264409; } |
e aggiungiamo il nuovo logo, ottenendo questo effetto
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div class="span-5"><p><strong><?=$this->transEsc('Search Options')?></strong></p> <ul> <li><a href="<?=$this->url('search-history')?>"><?=$this->transEsc('Search History')?></a></li> <li><a href="<?=$this->url('search-advanced')?>"><?=$this->transEsc('Advanced Search')?></a></li> </ul> </div> <div class="span-5"><p><strong><?=$this->transEsc('Find More')?></strong></p> <ul> <li><a href="<?=$this->url('browse-home')?>"><?=$this->transEsc('Browse the Catalog')?></a></li> <li><a href="<?=$this->url('alphabrowse-home')?>"><?=$this->transEsc('Browse Alphabetically')?></a></li> <li><a href="<?=$this->url('search-reserves')?>"><?=$this->transEsc('Course Reserves')?></a></li> <li><a href="<?=$this->url('search-newitem')?>"><?=$this->transEsc('New Items')?></a></li> </ul> </div> <!-- <div class="span-5 last"><p><strong><?=$this->transEsc('Need Help?')?></strong></p> <ul> <li><a href="<?=$this->url('help-home', array(), array('query' => array('topic' => 'search')))?>" class="searchHelp"><?=$this->transEsc('Search Tips')?></a></li> <li><a href="#"><?=$this->transEsc('Ask a Librarian')?></a></li> <li><a href="#"><?=$this->transEsc('FAQs')?></a></li> </ul> </div> --> <div class="clear"></div> |
e ottenendo l’effetto grafico seguente
