Customising fonts and colors in story navigation bars

Flourish stories have a navigation bar at the top for moving between slides. We designed the first one when stories were just a proof of concept, assuming we’d worry about design options later. Inevitably we then got busy with other things and the default style – a grey strip with chevron buttons – has now been used in thousands of stories.

In the meantime, some users have asked for more flexibility in styling their stories – to add a logo or house fonts, for example, or to make the navigation bar a seamless extension of the visualization below. We’ve now made all of this possible in the Flourish interface for business and newsroom users.

Here’s an example of a customized skin that adds a Google font, customizes sizes and colors, and hides the slide counter. Click the arrow to proceed!

How to customize story styles

The first version of this feature is simple and requires knowledge of CSS styling, so you’ll need to ask someone web-savvy for help if that’s outside your comfort zone.

First prepare your skin styles using the documentation here. Next create a story, choose “Custom” in the Nav Style dropdown, and paste in your CSS snippet. Hit “Custom” again to make changes.

Here’s another example, which adds a logo and makes the progress bar full-height.

In addition to styling the elements that are there, it’s also possible to reveal buttons for fast-forwarding to the start or end of the story.

Once you’re happy with your skin it’s easy to paste the same styling snippet into other stories. In the future we’d like to make this easier to do across all the stories for a user or company. We also plan to add a bunch of preset nav styles in the dropdown.

If you have any feedback on or questions about this new feature, or Flourish stories in general, please do let us know.