Creating simple themes

Principle

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

The principle is:

• 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

Prerequisites

• This function needs to be activated by the administrator of the Lizmap instance.

• The media directory. Read how to use Media folder in Lizmap.

Configuring the tool

Попередження

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

Once downloaded the zipfile, you can:

• replace the images

• edit the CSS files

Попередження

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

Порада

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.

Example

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.

Additional CSS

In Server administration panel -> Theme, it’s possible to add some CSS without creating files like the step before. For instance, a quick tip to remove the title Projects from the header in the landing page :

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

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