Styling with CSS Selectors

WordPress and Waymark add meaningful Class names to certain HTML elements.

This enables very granular control over how Maps , Collections , Shortcodes and even specific Markers are displayed with CSS.

Map Details

Maps in Waymark use the waymark_map custom post type . In WordPress every post has a unique ID, for example this page has an ID of 4089. We can target this page only by writing a CSS selector that uses one of many helpful class names that WordPress adds to the HTML <body> element:

/* Target Map Details page of a specific Map by ID */
body.postid-4089 {
  border: 10px solid red;
}

You can also target by post type, for example to style the Map Details page we can style using the WordPress custom post type of waymark_map :

/* Target the Waymark Map on *every* Map Details page */
body.single-waymark_map .waymark-map {
  /* Your rules... */
}

Shortcodes

Maps

Waymark adds some helpful class names to the Shortcode and Map Container. When embedding a Map for example:

<!-- Waymark creates a Hash unless one is provided using map_hash -->
<div id="waymark-shortcode-d21a75" data-shortcode_hash="d21a75" class="waymark-shortcode waymark-container">
  <!-- Map -->
  <div id="waymark-map-d21a75" class="waymark-map waymark-map-id-4028 waymark-map-container waymark-has-cluster waymark-has-gallery">
    <!-- Leaflet ... -->
  </div>

  <!-- Elevation -->
  <div id="waymark-elevation-d21a75" class="waymark-elevation">
    <!-- Leaflet Elevation ... -->
  </div>
</div>

Waymark adds a class name containing the Map ID to all Shortcodes, so to target all Maps of a certain Map by ID:

Waymark map_id="4028"

/* Every Shortcode of a particular Map */
.waymark-map.waymark-map-id-4028 {
  border: 10px solid blue;
}

More details on styling the Elevation profile can be found here .

Collections

WordPress adds the tax-waymark_collection class name to the Collection archive page , so to target a particular Map when shown on the Collection archive page only:

/* A particular Map on the Collection archive page */
body.tax-waymark_collection .waymark-map-id-4071 {
  /* Your rules... */
}

When embedded using the Shortcode, the Map has a class name containing the Collection ID. For example:

<!-- There's that map_hash again! -->
<div id="waymark-shortcode-de2540" class="waymark-shortcode waymark-container">
  <!-- Map -->
  <div id="waymark-map-de2540" class="waymark-map waymark-collection-id-27 waymark-map-container">
    <!-- Leaflet... -->
  </div>
</div>

This can be used to style a specific Collection by it’s ID:

Waymark collection_id="27"

/* A particular Collection Shortcode */
.waymark-map.waymark-collection-id-27 {
  border: 10px solid green;
}

Map Hash

You can pass a unique map_hash Shortcode parameter , which will be added to the Shortcode container (as an ID, instead of a class name):

Waymark map_id="4028" map_hash="pink_me"

/* Target using a unique Map Hash provided through the Shortcode */
#waymark-shortcode-pink_me {
  border: 10px solid pink;
}

Markers

Every Marker Type has a unique key (derived from it’s Title). Each time it is displayed on the Map, this key is added to the HTML for the Marker like this:

<!-- Not just beer... waymark-marker-[your_type_key] -->
<div class="waymark-marker waymark-marker-beer waymark-marker-marker waymark-marker-medium">
  <div class="waymark-marker-background" style="background:#fbfbfb;"></div>

  <!-- Using the "beer" Ionic Font Icon -->
  <i style="color:#754423;" class="waymark-marker-icon waymark-icon-icon ion ion-beer"></i>
</div>

Waymark collection_id="27" map_hash="beer_markers"