Themes
Get full control of how your flows look and feel by customizing your themes and stylesheets.
Editing the stylesheet
Customize the look and feel of your 3STORY flows using the stylesheet. If you are unsure about editing CSS, we recommend you check out the W3Schools website. There's a fantastic tutorial and all the information you need to get started.
Learn CSS with W3SchoolsStyle Selectors
We have a library of selectors that you can style, so you can quickly and easily get started with making changes to the theme of your flows.
For example, styling a flow step title to use a text color of blue, text-centered horizontally, in bold font:
.threeStorytitle { color: blue; font-weight: bold; text-align: center; } Style Variants
To create a style variant, you must first find the base style selector you wish to create a variant of, from which you can append your style name to.
For example, to create a style variant of a Flow Button, you take the base selector of .threeStoryButton and add your variant name to the end. Some button style variants could be: .threeStoryButtonBlue, .threeStoryButtonRed, and .threeStoryButtonYellow.
Once you have created your style variants and saved the theme. You will be able to select these style variants from the Flow Step editor when you add a Button to a step. You will see "Style" options such as "Default", "Blue", "Red" and "Yellow". This allows you to have multiple button styles on the same Step, Scene, and Flow.
Supported Selectors
| .threeStoryBack | The back button which takes the user to the previous step. |
|---|---|
| .threeStoryBgImg | The scene background image. |
| .threeStoryBody | The body text on a flow step. |
| .threeStoryBtnImage | An image within a button on a flow step. |
| .threeStoryButton | A button on a flow step. |
| .threeStoryCanvas | The canvas area that the Presenter is rendered. |
| .threeStoryCharacter | The Presenter button which toggles the display of the Presenter canvas (mobile only). |
| .threeStoryChatbot | The top-level class for scenes using the Chatbot layout. |
| .threeStoryContent | The container of all content after the Presenter. |
| .threeStoryEmbed | The embedded website on a flow step. |
| .threeStoryFooter | The scene footer element. |
| .threeStoryHistory | The container of historic steps in the Chatbot scene layout. |
| .threeStoryHome | The home button which takes the user to the URL defined in the flow settings. |
| .threeStoryImage | The image on a flow step. |
| .threeStoryInput | An input field on a flow step. |
| .threeStoryInvalidInput | An input field on a flow step that is invalid. |
| .threeStoryLoadingSpeech | The loading indicator for speech on a flow step. |
| .threeStoryOneColumn | The top-level class for scenes using the One Column layout. |
| .threeStoryPastButton | A button on historic flow steps in the Chatbot scene layout. |
| .threeStoryPastInput | An input field on historic flow steps in the Chatbot scene layout. |
| .threeStoryPastSpeech | The speech bubble on historic flow steps in the Chatbot scene layout. |
| .threeStoryPlaySpeech | iOS devices only. The play icon in the speech bubble which plays the audio. |
| .threeStoryPrivacyPolicy | The organization privacy policy link shown in the scene footer. |
| .threeStoryScene | The container of the flow step. |
| .threeStorySpeech | The speech bubble on a flow step. |
| .threeStoryTitle | The title text on a flow step. |
| .threeStoryTwoColumns | The top-level class for scenes using the Two Columns layout. |
| .threeStoryVideoEmbed | The embedded video on a flow step. |
| .threeStoryVolume | The volume button which toggles the Presenter speech. |