Criação de temas simples

Princípio

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

O princípio é:

• 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

Pré-requisitos

• 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

Aviso

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.

O pedido referido retorna um ficheiro zip contendo o tema padrão, com a seguinte estrutura:

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

Uma vez descarregado o ficheiro zip, pode:

• substitua as imagens

• edite os ficheiros CSS

Aviso

Os ficheiros e os diretórios devem ter permissões de leitura (755:644)

Dica

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

A partir do momento em que o tema esteja pronto, pode publicá-lo, copiando-o para o diretório media.

Exemplo

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