“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? :-)