Skip to content Skip to main navigation Skip to footer

Elevation Profile Colours

You can adjust the elevation profile colours with CSS.

Ensure the elevation profile is set to display; either in Settings, or through the Shortcode:

Waymark map_id="1647" show_elevation="1"

The following CSS illustrates how to target different elements:

div.waymark-container .elevation-control.elevation .axis text {
  fill: red !important;
div.waymark-container .elevation-control.elevation .axis path,
div.waymark-container .elevation-control.elevation .axis line {
  stroke: green !important;
div.waymark-container .elevation-control.elevation .grid .tick line {
  stroke: blue !important;
div.waymark-container .elevation-control.elevation .background {
  background-color: pink !important;
div.waymark-container .waymark-elevation .elevation-control.elevation .area {
  fill: purple !important

Lines with active Elevation Profiles have a white border around them, this is white by default and can be changed like so:

div.waymark-container .elevation-polyline {
filter: drop-shadow(1px 1px 0 orange) drop-shadow(-1px -1px 0 orange) drop-shadow(1px -1px 0 orange) drop-shadow(-1px 1px 0 orange);
Route Map
Journal Entry

This is a journal entry. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Distance (km)
More Details

The information displayed here can be configured in Waymark > Settings > Meta.

More Details