Créer des thèmes simples 

Principe 

Il est possible de créer des thèmes pour toutes les cartes d’un répertoire ou pour une seule carte au sein d’un répertoire.

Le principe est le suivant :

le répertoire media contient un répertoire nommé themes
le répertoire themes contient un répertoire default pour le thème de toutes les cartes du répertoire
le répertoire themes peut contenir aussi un répertoire par projet, pour les thèmes spécifiques à chaque projet

-- media
  |-- themes
    |-- default
    |-- map_project_file_name1
    |-- map_project_file_name2
    |-- etc

Pré-requis 

Cette fonction doit être activée par l’administrateur de l’instance Lizmap.
Le dossier media. Lire comment utiliser le dossier Média dans Lizmap.

Configurer l’outil 

Avertissement

Le navigateur Web a un mécanisme de mise en cache. N’oubliez pas de rafraîchir et de forcer le cache avec Ctrl+F5.

Afin de simplifier la création d’un thème pour un référentiel ou une carte, Lizmap permet d’obtenir le thème par défaut de l’application, via la requête : index.php/view/media/getDefaultTheme.

Cette requête renvois un fichier zip contenant le theme par défaut avec la structure suivantes :

-- lizmapWebClient_default_theme.zip
  |-- default
    |-- css
      |-- main.css
      |-- map.css
      |-- media.css
      |-- img
        |-- loading.gif
        |-- etc
      |-- images
        |-- sprite_20.png
        |-- etc

Une fois que vous avez récupéré le contenu du thème par défaut, vous pouvez :

remplacer les images
modifier les fichiers CSS

Avertissement

Les fichiers et les dossiers doivent avoir la permission d’écriture (755:644)

Astuce

Pour afficher votre résultat sans déployer en production, vous pouvez ajouter votre thème dans lizmap/www/themes. Ajoutez &theme=votretheme à la fin de l’URL (https://your.lizmap.instance/index.php/view/map/?repository=montpellier&project=montpellier&theme=votretheme).

Une fois que votre thème est prêt, il vous suffit de le publier avec le dossier media et les projets.

Exemple 

Nous voulons changer le logo et la couleur d’arrière-plan de la barre de navigation (p. ex. le bleu) uniquement dans un projet spécifique appelé roads et nous voulons conserver le thème par défaut de l”instance de Lizmap :

Nous n’avons pas besoin du dossier media/themes/default.
Créer media/themes/routes.
Extrayez le répertoire css/ du fichier zip à l’intérieur.
Changer le fichier css/img/logo.png

Cela va fonctionner. Mais nous avons toujours beaucoup de CSS pour la même instance Lizmap. Nous pouvons rendre notre style plus petit :

Supprimer toutes les images qui sont dans identiques que dans l’instance Lizmap
Chercher dans le dossier css où le fichier logo.png est utilisé.
Supprimez tous les fichiers *.css sauf css/main.css et css/map.css et ne conservez que :

#logo {
  background : url(img/logo.png) no-repeat;
  background-size:contain;
}

pour css/main.css et :

#navbar button.btn {
  background-color : blue;
}

pour css/map.css

En suivant ces étapes, nous gardons notre thème personnalisé le plus petit possible.

Créer des thèmes simples

Principe

Pré-requis

Configurer l’outil

Exemple