Skip to content

Customization

You can override default settings, colors, CSS, HTML and translations in your own customization folder.

See the general presentation (french) for an overview of the application.

Main sections

  • Introduction

    Server files overview and instructions to restart the Docker container after each customization change.

    Getting started

  • Customization of settings

    Detailed explanations for configuration files (global.json, header.json, home.json, etc.) with examples of overriding default values.

    Customization of settings

  • Themes and styles

    Detailed instructions on modifying colors, CSS, and menu structure, including specific classes (custo-*).

    Themes and styles

  • Icons

    Detailed instructions on modifying icons.

    Icons

  • Translation

    Explanation of translation files, overriding texts, and managing languages.

    Translation

  • HTML pages and scripts

    Detailed instructions on using HTML templates and custom scripts.

    HTML pages and scripts

  • GDPR

    Specific documentation on setting up Google Analytics, including alerts and data privacy management.

    GDPR

  • Media and manifest management

    Explanation on managing images, favicons, splash screens, and configuring the manifest.json file.

    Media and manifest management

Server files overview

The customization of the Rando application is done through the customization folder located on the server. This folder includes four main subdirectories:

  • config
  • html
  • theme
  • translations

config

The config folder allows you to override the default configuration files of the Rando application.

Each .json file targets a specific part of the application:

  • global.json : defines global settings such as:

    • the application name
    • portals to display (to filter content by portal)
    • activation of specific modules (e.g. sensitive areas, outdoor module, etc.)
    • default images to display when no image is defined for an object

    🔍 Tip: images, pictograms, and videos used should be stored in the media folder.

  • header.json : configures the header of the Geotrek-rando interface, including the logo, available languages and default language.

  • home.json : configures the homepage content, including highlighted or suggested items.
  • details.json : controls the display of sections on detail pages (like trek, touristic content, or outdoor sites), allowing you to define their name, visibility, anchor link presence, and display order.
  • footer.json : defines the content of the website footer, including social media links, organizational contact details, and custom links or flatpages.
  • filter.json : configures which filters are displayed in the search interface, their order, and labels.
  • map.json : configures the basemaps, map center, zoom levels, and available map layers (classic, satellite, offline) for the Geotrek-rando interface.
  • resultCard.json : customizes the content displayed on trek result cards, allowing you to show or hide elements like location, themes, and selected informational keywords such as difficulty, duration, or distance.
  • redirect.json : defines URL redirection rules, allowing you to forward old or outdated URLs to new ones, with support for wildcards, variables, and permanent or temporary redirects.

👉 Find details about files and settings to update on the Settings section

html

This folder contains custom HTML templates that can be used to add specific elements not handled by the default configuration.

Examples:

  • add a custom activity bar
  • integrate personalized blocks (clickable maps, interactive content, etc.)

Useful details:

  • scriptHeader.html: contains the tracking code if Matomo analytics is enabled.
  • details/: contains HTML templates for widgets displayed in the detail pages (e.g. air quality via Atmos, weather block, etc.)

👉 Find details about HTML templates and scripts on the HTML and scripts section

theme

This folder contains the site's visual customization files:

  • colors.json: defines or overrides default color variables used in the interface.
  • custom.css: allows you to override or adjust the site’s CSS styles (e.g. title size/color, logo placement, etc.)

👉 Find details about colors and CSS on the Theme and styles section

translations

This folder allows you to override the default translations used in the interface.

You can:

  • rename interface elements (e.g. filter names, section titles, etc.)
  • provide custom translations for other languages (e.g. en.json, es.json, it.json, etc.)

👉 Find details about customizing translations on the Translation section

Apply changes

After each customization changes, you'll have to restart the Docker container by running : docker compose restart.

Production

To set environnement variables such as Sentry configuration, build and run the application see the Installation documentation.