Posted by on Feb 28, 2014 in How To

One of the new features made available in the latest update to our apps is Story Stream. It allows seamless reading for your publication’s subscribers.

How Does Story Stream Work?

When a reader gets to the end of an article in your app, rather than navigating to the next article via the menu, a reader simply swipes up to continue reading or swipes down to go back to the previous article. Readers can preview the next article’s title by swiping up and holding. Of course, the menu is always available, but your readers can have a uninterrupted experience using Story Stream. Best of all, each app built using TypeEngine has Story Stream available with default settings.

How Do I Customize Story Stream for My Publication?

In the Publication section of the web console, click onto App Styling to access your app’s JSON settings.

Here are the properties you will need to edit and what they effect:

‘scrollNavigation’ settingsStory Stream JSON Mapping Image

1  Modifies font

  "fonts": {
    "scrollNavigation”: {
       "name": “HelveticaNeue",
       "size": 22 }

2  ‘scrollNavigationBackground’ – Modifies color and opacity of the background
‘scrollNavigationText’ – Modifies the color and opacity of text

  "colors": {
    "scrollNavigationBackground": [0, 0, 0, 1],
    "scrollNavigationText": [255, 255, 255, 1] }

3  ‘scrollNavigationTextPadding’ — Modifies padding around the text
Follows the format: Top, Right, Bottom, Left

  "padding": {
    “scrollNavigationTextPadding": [0, 0, 0, 1]}

4  ‘scrollNavigationTextAlignment’ — Sets text alignment
Follows the format: Left (0), Center (1), Right (2)

  "positions": {
    "scrollNavigationTextAlignment": 1}