In the Branding section, you can change the look and feel of the annotation box by changing various cosmetic aspects.
Branding
Fable comes with deep customization capability which will allow you to have a high degree of control over how your interactive demo looks and feels. You can change every aspect of the annotation box to match it with your brand. The following interactive demo shows you the various customization options and how you can utilize them to match the demo’s theme to your brand.
- Primary color: This is the color of the main button of the annotation box. By default, the ‘Next’ button is set to this color but it can be modified as well.
- Background color: This is the color of the background of the annotation box.
- Border color: This is the color of the border of the annotation box.
- Font color: This is the color of the text inside the annotation box.
- Selection color: This is the color of the highlighter which focuses the attention on the element of the page on which the annotation message is focussed on.
- Font family: This is the font of the text inside the annotation box. By default, Fable tries to match the font of the annotation message to the font of your web page/application.
- Button layout: This sets the width of the button.
- Selection shape: This pertains to the highlighter which focusses the attention on the element of the page on which the annotation message is focussed on. It has two options:
- Box: The highlighter is in the shape of a box that encompasses the element of focus.
- Pulse: The highlighter is in the shape of a pulsating point that is close to the element of focus.
- Padding: This sets the padding the text gets within the annotation box.
- Border radius: This sets the border radius of both the annotation box as well as the buttons inside it.
Barring the Selection color and Selection shape, all other settings once applied in a particular screen of the demo, applies it across the entire demo. Both Selection color and Selection shape can be different across different screens of the demo.
After you have matched the look and feel of the demo to that of your brand, we will then take a look at the buttons that are present through out the demo in the annotation box. Head over the CTAs page to know more about this.
