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

  • This function needs to be activated by the administrator of the Lizmap instance, on the repository page.

  • 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.

CSS aggiuntivi

nel Pannello di amministrazione del server -> Tema, è possibile aggiungere alcuni CSS senza creare file come nel passaggio precedente. Ad esempio, un suggerimento rapido per rimuovere il titolo «Progetti» dall’intestazione nella pagina di destinazione:

#title h1 {
    text-indent: -9999px;
    display: block;
}

#title h1::before{
   content: 'Your new title';
    position: absolute;
    left: 9999px;
}