Customize the story player

Flourish comes with some built-in styles for slide navigation. You can swap between these from the Navigation menu in the story editor, or remove all slide navigation:

Choose navigation style

Customers with a Business account can also add custom styling to the story player, such as custom fonts, colours and logos. The rest of this page describes how.

Add your own styling

Choose the “Custom…” option from the Navigation menu if you want to further customize the styles. This will open a text entry box where you can set your own fonts, colours and styling.

You can customize these using CSS. If you’re not familiar with CSS, we recommend this free intro lesson from CodeSchool to get you started.

The examples below explain common tasks. Or use the HTML Reference section for a full list of options.

Examples

Change the text and background colour

To use white text on a black background:

nav { background-color: black; color: white; }

By default, colours are inherited by buttons inside the nav.

Changing button icons

Buttons can use free icons from FontAwesome added using ::before pseudo-selectors. You can override these with different icons from the same set.

nav button.next::before { content: "\f061"; }
nav button.previous::before { content: "\f060"; }

Using text labels on buttons

If you want to use text labels instead, you will need to specify a different font for the buttons:

nav button.last {
display: inline-block;
}
nav button.last::before {
font-family: Helvetica, sans-serif;
content: "Last slide";
border: 1px solid #ccc;
padding: 4px 8px;
}

You can use background images in CSS by specifying the full URL of your logo :

nav { background-image:url(https://flourish.studio/images/poster.jpg); }

Your images need to be hosted at a publicly available location.

Use your own fonts

To use a standard font (use CSS Font Stack to check which fonts are widely supported):

nav { font-family: "Gill Sans", Helvetica, sans-serif; }

You can use custom fonts with an @import rule. For example, to use the Montserrat Google font:

@import url('https://fonts.googleapis.com/css?family=Montserrat');
nav { font-family: 'Montserrat', sans-serif; }

If using your own fonts, they will need to be hosted at a publicly available location.

Change styling on mobile devices

Your CSS can include @media rules to change styling on narrower screens:

nav { font-size: 16px; }
@media (min-width: 620px) {
nav { font-size: 18px; }
}

HTML reference

You will add CSS rules to style the HTML that makes up the navigation. The basic HTML markup for the story player navigation looks like this.

<nav>
<div class="steppers">
<button class="next"></button>
<button class="previous"></button>
</div>
<div class="count">
<span class="current">1</span><span class="total">3</span>
</div>
<div class="caption"><p>Slide caption goes here</p></div>
<div class="progress"><span></span></div>
</nav>

To ensure your rules are applied over top of any default styling, we recommend you prefix each rule with nav, as in this example:

nav button.next { color: teal; }

CSS selector Description
nav Main container for all navigation elements.
button Any navigation button.
button.next Button for navigating to next slide.
button.previous Button for navigating to previous slide.
button.first Button for navigating to first slide. display:none by default.
button.last Button for navigating to last slide. display:none by default.
button[disabled] Buttons are disabled when are not relevant, e.g “next” button when already on last slide.
.progress Progress bar displayed across bottom of the nav by default.
.progress span Current progress displayed using percentage width.
.count Container for slide numbering.
.count .current Current slide number.
.count .total Total number of slides.
.total::before Override to specify a different separator between current slide number and total. The default is /.