Creare temi semplici¶
Regola¶
È possibile creare temi per tutte le mappe di un repository o per una singola mappa all’interno di un repository.
La regola è:
- la directory
media
contiene una directory chiamatathemes
. - la directory
themes
contiene una directorydefault
per il tema di tutte le mappe del repository - la directory
themes
può contenere anche una directory per progetto, per i temi specifici di ogni progetto
-- media
|-- themes
|-- default
|-- map_project_file_name1
|-- map_project_file_name2
|-- etc
Prerequisiti¶
- Questa funzione deve essere attivata dall’amministratore dell’istanza Lizmap.
- La cartella
media
. Leggi come usare la cartella Media in Lizmap.
Configurazione del plugin¶
Avvertimento
Il browser web ha un meccanismo di cache. Non dimenticare di aggiornare e forzare la cache con Ctrl+F5.
Per semplificare la creazione di un tema per un repository o una mappa, Lizmap permette di ottenere il tema predefinito dall’applicazione, attraverso la richiesta: index.php/view/media/getDefaultTheme
.
La richiesta restituisce un file zip contenente il tema predefinito, con la seguente struttura:
-- lizmapWebClient_default_theme.zip
|-- default
|-- css
|-- main.css
|-- map.css
|-- media.css
|-- img
|-- loading.gif
|-- etc
|-- images
|-- sprite_20.png
|-- etc
Una volta scaricato il file zip, è possibile:
- sostituisci le immagini
- modifica il file CSS
Avvertimento
I file e le directory devono essere leggibili (755:644)
Suggerimento
Per vedere in anteprima i tuoi risultati senza distribuirlo in produzione, puoi aggiungere il tuo tema nel lizmap/www/themes
. Aggiungi &theme=yourtheme
alla fine del tuo URL (ad esempio https://your.lizmap.instance/index.php/view/map/?repository=montpellier&project=montpellier&theme=yourtheme
).
Una volta che il tuo tema è pronto, puoi semplicemente pubblicarlo copiandolo nella directory media
.
Esempio¶
Vogliamo cambiare il logo e il colore dello sfondo della barra di navigazione (per esempio blu) solo in un progetto specifico chiamato roads
e vogliamo mantenere il tema predefinito della instanza Lizmap:
- Non abbiamo bisogno della cartella
media/themes/default
. - Crea
media/themes/roads
. - Estrarre la directory
css/
dal file zip all’interno. - Modificare il file
css/img/logo.png
Questo funzionerebbe. Ma hai ancora un sacco di CSS che è lo stesso dell’istanza principale di Lizmap. Quindi possiamo rendere il nostro stile più piccolo:
- Rimuovere tutte le immagini che sono uguali all’istanza Lizmap
- Cerca nella cartella
css
dove viene usatologo.png
. - Rimuovi tutti i file
*.css
trannecss/main.css
ecss/map.css
e tieni solo:
#logo {
background : url(img/logo.png) no-repeat;
background-size:contain;
}
per css/main.css
e:
#navbar button.btn {
background-color : blue;
}
per css/map.css
Seguendo questi passi, manteniamo il nostro tema personalizzato il più piccolo possibile.