Move or Style the Story Action <BACK button in Map Journal or Map Series

Story Actions are a useful feature of Map Journal and Map Series. They are links that can be configured in the narrative panel that let your reader interact with a map on the main stage. You can configure story actions to move the map, toggle layers on or off, display a pop-up, or any combination of these changes. Actions can also display a different map, image, video, or web page in the main stage or link to other sections of the story.

<BACK to Basics

When a reader activates a story action, a <BACK button appears at the top of the main stage that will return the main stage to its previous state. Readers use the <BACK button when they are finished exploring the story action’s media.

This button is somewhat large and prominently placed so readers don’t miss it. However, a negative consequence of the button’s appearance and location is that it can occasionally overlap something important. For example, if the main stage content is an infographic with a title close to the top of the page or an image with an important feature that extends to the top edge.

Read on to learn how to style the <BACK button to move it out of the way or change its appearance.

Before we get to the code, it’s worth mentioning that you should use this technique with caution — you don’t want to make the <BACK button difficult to find or confusing to use. A good time to use this technique is if you are using a story map for a presentation since you’ll be the main user of the story (and you know where you moved the <BACK button).

Style changes to the <BACK button will apply to all story actions in your story, so make sure your adjustments work in all cases.

If you don’t know how to use custom HTML in a Map Journal or Map Series, be sure to read this article first.

Using custom HTML in Map Journal and Map Series

Code samples

The image below shows an unaltered <BACK button. But suppose you don’t want that big pesky button spoiling this beautiful image of that interesting tree. What could you do?

Move the button along the top edge

One option is to move the <BACK button to the top left corner of the main stage. For example,

<style type="text/css">
.mediaBackContainer {
    margin-left: 0 !important;
    left: 0px !important;
  }
</style>

If you have a map shown by any actions in your story, you’ll need to leave a little space at the left for the map zoom controls. In that case, you could use 70px as the left distance to nudge the <BACK button a little ways away from the corner of the main stage.

<style type="text/css">
.mediaBackContainer {
    margin-left: 0 !important;
    left: 70px !important;
  }
</style>

You could also move the button to the top right of the main stage…

<style type="text/css">
  .mediaBackContainer {
    margin-right: 0 !important;
    right: 0px !important;
    text-align: right;
  }
</style>

Move the button to the bottom edge

This next code snippet will move the <BACK button to center of the bottom edge of the main stage (and remove the partial border since it doesn’t work well in this location):

<style type="text/css">
  .mediaBackContainer {
    top: unset;
    bottom: 0;
  }
  .backButton {
    border: none;
  }
</style>

Move and flash the button

Now let’s have a little fun…This last sample places the <BACK button at the bottom of the screen again and adds a subtle flash that lasts for a few seconds. The animation gets the attention of readers to let them know how to get back to the main media.

<style type="text/css">
.mediaBackContainer {
    top: unset;
    bottom: 0;
  }
  .backButton {
    background-color: white;
    animation-name: example;
    animation-duration: 1s;
    animation-iteration-count: 4;
    border: none;
  }
  @keyframes example {
    0% {background-color: white;}
    50% {background-color: #478AC3;}
    100% {background-color: white;}
  }
</style>

Code Challenge

If you’re familiar with CSS, go ahead and experiment with other combinations of the styling examples shared here or create your own styling by further customizing the mediaBackContainer and/or backButton classes. There are also backArrow and backLbl classes that you can experiment with.

How would you create a button like this?

Please share the code and screenshots of any styles you create in the comments!

More Information

Are you looking for more ways to customize your story maps? If so, check out this article about styling story action links to look and behave like buttons.

Create Buttons for Story Actions in Map Journal or Map Series

This article was updated in June 2018 to include Map Series.

Intro photo by Jakob Owens on Unsplash