Customizing the story player

Flourish stories comes with three different, built-in styles for slide navigation: Default, Old and None. While everyone can choose between these using the Navigation menu in the story editor, customers with a Business account can also add custom styling, like custom fonts, colors and logos. To access this menu, click the cog wheel next to the Slides option.

Adding your own styles

Choose the “Custom…” option from the Navigation menu. This will open the Custom styling menu – a text entry box where you can add custom CSS to set your own fonts, colors and styling. If you’re not familiar with CSS but want to learn the basics, we recommend this free introduction from CodeSchool.

Changing the text and background color

To use white text on a black background: 

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

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

Changing button icons

You can replace existing buttons with Font Awesome icons by using ::before pseudo-selectors and your preferred icon's Font Awesome code:

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 of icons, 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;
}

Adding a logo

You can use background images by specifying the full, publicly available URL of your logo:

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

Using your own fonts

To use a standard, web-safe font:

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

* Note: Use CSS Font Stack to check which fonts are widely supported.

To use custom fonts, like Montserrat from Google Fonts, with an @import rule:

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

Changing styling for mobile devices

Like normal CSS, you can include  @media rules to add specific styles for narrower screens:

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

HTML reference

The CSS rules you write in that Custom styling menu are used to directly style the story navigation HTML. For reference, it's useful to know that the basic markup of that navigation looks like this:

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

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; }