Creare temi semplici ¶

Indice

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 chiamata themes.
la directory themes contiene una directory default 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 usato logo.png.
Rimuovi tutti i file *.css tranne css/main.css e css/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.

Creare temi semplici¶

Regola¶

Prerequisiti¶

Configurazione del plugin¶

Esempio¶