bloggers bloggers

Marco Napolitano
Messaggi: 68
Stelle: 0
Data: 15/11/17
Jader Jed Francia
Messaggi: 50
Stelle: 0
Data: 22/09/17
Ezio Lombardi
Messaggi: 9
Stelle: 0
Data: 23/06/17
Chiara Mambretti
Messaggi: 25
Stelle: 0
Data: 27/02/17
Serena Traversi
Messaggi: 3
Stelle: 0
Data: 21/07/16
Francesco Falanga
Messaggi: 8
Stelle: 0
Data: 14/06/16
Antonio Musarra
Messaggi: 2
Stelle: 0
Data: 18/11/13
Simone Celli Marchi
Messaggi: 6
Stelle: 0
Data: 09/07/13
marcello marangio
Messaggi: 4
Stelle: 0
Data: 05/07/13
Marco Mancini
Messaggi: 1
Stelle: 0
Data: 05/06/13
Indietro

Come creare i color schemes

“Ho un sito web realizzato con Liferay dove il colore principale è il blu. Il mio cliente vuole che nella pagina “Chi siamo” tutti gli elementi blu siamo virati in rosso. Come posso fare?”

Semplice, utilizza i color schemes!

Prima di tutto devi aprire il file liferay-look-and-feel.xml e, all’interno del tag <theme> inserisci:

 

<color-scheme id="01" name="Blue"> 
 <css-class>blue</css-class> <color-scheme-images-path>${images-path}/color_schemes/blue</color-scheme-images-path> </color-scheme>

<color-scheme id="02” name=“Red”> 
 <css-class>red</css-class>  <color-scheme-images-path>${images-path}/color_schemes/red</color-scheme-images-path> </color-scheme>

All’interno della cartella diffs/css crea la cartella "color_schemes" e, al suo interno, la cartella “blue” e “red”.All’interno della cartella “blue” aggiungi il file blue.css e all’interno della cartella “red” il file red.css.

In questi due file, le classi dovranno essere inserire all’interno del tag <body> con l’aggiunta della classe “red” o “blue”.

body.red { 
 h1 {color:#ff0000}}

body.blue { 
 h1 {color:#0000ff;}}

Questo perché quando una pagina ha un color schema associato, al tag <body> viene aggiunta la classe del color schema scelto.

A questo punto occorre importare i color schemes nel custom.css:

@import url(color_schemes/blue/blue.css);

@import url(color_schemes/red/red.css);

L’ultimo passo consiste nel creare le thumbnail per ogni color schema creato, immagini che andranno posizionate seguendo il <color-scheme-images-path> specificato nel liferay-look-and-feel.xml.Occorrerà quindi creare all’interno di diffs/images la cartella color_schemes, con all’interno la cartella “blue” e “red” con all’interno il file thumbnail.png relativo, avente le misure 87x70px.

Siamo giunti alla prova del 9: entra nella gestione pagine, seleziona la pagina “Chi siamo” e seleziona il color schema “Red”. Funziona? :-)

Precedente
Commenti
Nessun commento. Vuoi essere il primo.