How to style scrolly captions created in story editor

NOTE: It isn't currently possible to customize the styling of scrollies inside the story editor. This will be something we will be introducing in the future.

This article will assist with styling the scrolly captions that you have created in the story editor using CSS. Find out how to create a scrolly using our story editor here.

Adding styles to your scrolly

    1
    Create your scrolly using the Flourish story editor.
    2
    Copy the script embed code and place it on the page where you want your scrolly.
    3
    On the page where you are embedding your scrolly, add a style section. This should look something like this, depending on how your CMS/website is organized:

    4
    Customize your scrolly captions using the options below. You can target scrolly captions using the following selectors:
    • .fl-scrolly-caption > div targets the caption container
    • .fl-scrolly-caption p targets the text within the caption
    • .fl-scrolly-caption targets the whole container.

Different editing options for scrolly captions

NOTE: The following code should be placed within the style tags as displayed above. Always ensure to add !important after every setting you have added to override the default styles.

To place your captions to the right of your scrolly add doing the following styles:

You can also place the captions to the left of your scrolly by simply switching around the margin-right and margin-left.

Change the background color of the captions using the following code:

Change the style of the caption text using the following code:

Change or remove the shadow and radius of the caption boxes using the following code:

You can find out more about box-shadow styling in this external help documentation.

If you would like to add more customization to your Flourish scrolly, please refer to your full HTML-code scrolly documentation or reach out to priority support for these resources.

Related Articles