1.

Almost every element in a Fabl story contains all of the functionality to manage styling including font-family, font-weight and background effects. These settings can be found in “Options” under each element. Please see the below examples:

However, in some cases when you need to implement custom styling, you will need to access the “CSS Class Name” field contained in almost any of the element settings.

To find this field you should:

  1. Click on the element button.
  2. Choose “Options”.
  3. In the expanded right sidebar, under the “Style” tab, “CSS Class Names” will appear below (as shown in the picture on the left).

Here you’ll find help-text on how to create a correct CSS class name.

Now, let’s go over some of the general best practices on setting CSS names:

  1. If the name consists of two or more words, please type them with the dash as a delimiter instead of spaces.
  2. Use only lower case.

For example:

text-with-custom-border

2.

In this step you should use a code block or Theme Editor.

If you want to add custom styles to the element in story, after giving it a CSS class, you’ll then need to add a Code Block to the Story.

Open the Code Block and add the style snippet with the desired style rules.

<style>
    .text-with-custom-border p {
        border: 2px solid #5c5d61;
        color: #876b35;
        font-size: 35px;
        font-weight: 700;
    }
</style>

Example shown below:

This example is adding a custom style to the text element.

3.

To add styles in the account theme, select the Themes tab.

Choose the theme you would like to update. Scroll down to the bottom and you’ll find four Code blocks for the following:

  1. The stories with the Theme.
  2. The entire account (if the Theme is set as a default).
  3. The Header Navigation bar.
  4. And the Footer.

Choose the respective Code block.
Please note that if you need to update the elements in a story you should use, “Click here to add custom styles to all stories with this theme”

Open this Code block and add the style snippet with the desired rules you would like to implement, and then Save Theme.

4.

To update color for some words or phrases of Text element in Story:

  1. wrap up this words with <span> … </span> tags.
  2. add inside first tag “style” notation, like so: <span style=""> … </span>.
  3. add any style rule to span.

**Example: **
Lorem ipsum <span style=“color: green”>dolor</span> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.