|Documentation

Themes

What a theme is

A theme is a style sheet (CSS) that changes how your Lizmap portal looks: colors, contrasts, spacing. The gallery is in the Marketplace, Customization section, Lizmap themes card.

The page offers a single action: Copy the CSS, which puts the style sheet in your clipboard. Nothing is applied to your instances: you put the file on your portal yourself, as explained in Using a theme. We never add or change any style sheet on your portal.

The Themes page: the filters, then one card per theme with its preview, rating, variant, copies and its Copy the CSS button.

Each card shows a preview of the portal in the theme's colors, with its palette at the bottom. Then come its name, the Official mark for themes made by LizPack, its price (Free or Paid), its description, its rating, its variant (Light, Dark or Light & Dark), its number of copies and its tags.

Browsing and filtering themes

Above the gallery, a filter bar narrows the list; the theme count shown under the title follows the selection.

  • Mode: All, Light or Dark. A Light & Dark theme appears in both.
  • Price: All prices, Free or Paid.
  • Tags: All tags or a specific tag, with a search box in the list.
  • Sorting: Default puts featured themes first, then the newest; Most popular ranks by number of copies; Top rated, Newest and Alphabetical do what they say.

Choose the variant according to your projects' base map: a dark theme on a light background, or the other way round, makes the whole thing hard to read.

A Paid theme can only be copied once it has been granted to you; it cannot be bought from this page. To get one, write to support.

Using a theme

Lizmap loads a custom style sheet on two conditions: the file sits in the right place in your projects' folder, and the Lizmap administration allows themes for that folder.

  1. Click Copy the CSS. The button shows CSS copied once the sheet is in your clipboard.
  2. In your instance's Lizmap administration, edit the repository that holds your projects and tick the option that allows themes and JavaScript code for that repository.
  3. In a text editor, paste the content into a file named main.css.
  4. With Files, upload that file to your projects' folder, under media/themes/default/css/ for every project in the folder, or under media/themes/project-name/css/ for a single project.
  5. Reload the map in your browser.

To go back to the original look, delete or rename the file: Lizmap returns to its default style. Neither the copy nor the upload changes anything else.

Adapting a theme

Once uploaded, the theme is an ordinary CSS file, and it is yours: adjust it to match your branding, then reload the map to see the result. Change one color at a time: a palette goes off quickly.

An upgrade of your instance does not touch this file: it lives in your folders, not in the software. A new Lizmap version may however change the structure of its pages; if part of the theme stops applying after an upgrade, that is where to look.

Keep a copy of your adjusted version. Copying the theme again from the gallery and overwriting the file would lose your changes.

Rating a theme

Under each theme's description, five stars give its average rating and, in brackets, the number of votes. Click a star to give your rating, from 1 to 5; a new click replaces it, you only vote once per theme. Your stars stay marked on the card.

The Top rated sort relies on these ratings, Most popular on the number of copies. That counter goes up with every click on Copy the CSS, including when you copy a theme you already copied.