Scrollable Map Sidebar

Scrollable Map Sidebar en

Salvatos 5 0

Modifies the map Explore sidebar to optimize space and keep some information and buttons on-screen at all times. Only applies to desktop view.

This theme modifies the default scrolling behaviour in three ways:

  1. Optimizes the wasted space at the top and bottom and uses a thin scrollbar rather than a wide one (customizable).
  2. For the initial sidebar (showing the map entity’s entry and list of markers), scrolling behaviour remains the same (full height).
  3. For marker details (showing the entry of a specific marker), the title at the top and the action buttons at the bottom remain visible at all times, with a scrollbar only for the middle area (the actual entry content).

Note that depending on your browser and OS settings, the scrollbar may be more or less invisible at first. Whether or not this is the case, you can customize the scrollbar’s colours by adding the following rules to your campaign’s CSS (the first property sets the track, or gutter, and the second sets the slider, or handle):

.main-sidebar {
--map-sidedar-scrollbar-track-color: slategrey;
--map-sidedar-scrollbar-slider-color: whitesmoke; }

You can do the same for the scrollbar’s width (thin or auto) using the following properties:

.main-sidebar {
--map-sidedar-scrollbar-width: thin; }

However, this property is only supported on Firefox and derivatives as of summer 2021.

More sidebar goodness

This theme can be used alongside either of Scrollable Main Sidebar or Pop-Out Sidebar.

Latest version: 1 View Content
Released 1 month ago Split from Scrollable Sidebar; no change in functionality.