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.