Creare temi semplici ¶

Indice

Creare temi semplici

Regola ¶

It is possible to create themes for all maps of a repository or for a single map within a repository.

La regola è:

the directory media contains a directory named themes
the directory themes contains a default directory for the theme of all the maps of the repository
the directory themes may contain too one directory per project, for the themes specific for each project

-- 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.
The media directory. Read how to use Media folder in Lizmap.

Configurazione del plugin ¶

Avvertimento

The web browser has some caching mechanism. Do not forget to refresh and force the cache with Ctrl+F5.

In order to simplify the creation of a theme for a repository or a map, Lizmap allows you to obtain the default theme from the application, through the request: index.php/view/media/getDefaultTheme.

The request returns a zipfile containing the default theme, with the following structure:

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

The files and directories must be readable (755:644)

Suggerimento

To preview your results without deploying it in production, you can add your theme in the lizmap/www/themes. Add &theme=yourtheme at the end of your URL (e.g. https://your.lizmap.instance/index.php/view/map/?repository=montpellier&project=montpellier&theme=yourtheme).

Once your theme is ready, you can just publish it copying it in the directory media.

Esempio ¶

We want to change the logo and the navigation bar background color (e.g. blue) only in a specific project called roads and we want to keep the default theme from the Lizmap instance:

We don’t need the media/themes/default folder.
Create media/themes/roads.
Extract the css/ directory from the zip file inside.
Change the file css/img/logo.png

This would work. But you still have a lot of CSS which is the same from the Lizmap main instance. So we can make our style smaller:

Remove all images which are the same as Lizmap instance
Search in the css folder where logo.png is used.
Remove every files *.css except css/main.css and css/map.css and keep only:

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

for css/main.css and:

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

for css/map.css

By following these steps, we keep our custom theme as small as possible.

Creare temi semplici¶

Regola¶

Prerequisiti¶

Configurazione del plugin¶

Esempio¶