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.

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

* Note: If using your own fonts, they must be hosted at a publicly available location.

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