Personalizzare i template di YOOtheme

I template di YOOtheme possono essere facilmente personalizzati tramite override, con in più la possibilità di parametrizzare le modifiche, rendendole disponibili immediatamente nella gestione del template dalla pagina di amministrazione.

Riporto un esempio di personalizzazione del template del mio sito basato sul framework Warp di YOOtheme.

Lo scopo è ottenere box con colore di sfondo scelto dall'utente, vedi l'esempio in Home. Si procede in questo modo:

1. Creare una sottocartella nel percorso

   /templates/<%nome del template%>/styles

   p.e. custom

2. Creare nella sottocartella le cartelle css, js, layouts: la situazione è quella di figura per il mio sito:

   

   Le cartelle sono vuote inizialmente.

3. Creare nelle cartelle corrispondenti i file personalizzati in base alle esigenze. Si possono anche copiare dagli originali del template per modificarli in seguito. Nell'esempio, per creare box con colore di sfondo personalizzato, si deve creare il file /templates/<%nome del template%>/styles/custom/css/modules.css ed inserirvi questo contenuto (per brevità inserisco il codice per aggiungere due soli colori di sfondo):

   			@import url(../../../css/modules.css);
   
   			.mod-box-black {
   				background: #434343;
   				color: #fff;
   			}
   
   			.mod-box-blue {
   				background: #68B1D5;
   				color: #fff;
   			}
   		

Il significato dei due selettori CSS è ovvio. L'istruzione import all'inizio del file va a caricare il css "nativo" del template, che si trova in /templates/<%nome del template%>/css. In questo modo sono mantenute tutte le impostazioni del template ed è sufficiente aggiungere solo le modifiche desiderate nel file appena creato.

Il CSS per questo esempio è già finito. Volendo personalizzare altri componenti (moduli, javascript, etc.) si creano (o copiano e poi modificano) i file relativi nelle cartelle corrispondenti in /templates/<%nome del template%>/styles/personal.

Quasi finito. Rimane da applicare il nuovo stile nelle impostazioni del template master usato nel mio sito. Aprire l'interfaccia di amministrazione di Joomla 2.5 e selezionare Estensioni-Gestione Template; fare clic su yoo_master - Predefinito e quindi sulla scheda Profiles a destra. Selezionare Add ed inserire un nome per il nuovo profilo, poi confermare con Ok. Ora selezionare il nuovo profilo dalla casella a discesa e abilitare tutte le caselle di controllo sottostanti. Nella casella a discesa Style selezionare il nuovo profilo creato. Fare clic su Salva e quindi spostarsi nella scheda General. Selezionare il nuovo profilo nella casella a discesa Default Profile.

Ora è disponibile una nuova classe per i moduli. Creare un nuovo modulo e impostare la classe CSS in Suffisso classe CSS modulo, inserendo un nome per la classe nel formato color-<%nome colore in modules.css%>.

Ad esempio, la classe color-black imposta il colore di sfondo a nero.

Voilà.