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 de Lizmap, sur la page repository page.

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

CSS additionnel

Dans Panneau d’administration du serveur -> Thème, il est possible d’ajouter du CSS sans créer de fichiers comme à l’étape précédente. Par exemple, une astuce rapide pour enlever le titre Projets de l’en-tête de la page d’atterrissage :

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

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