A beginner's guide to styling a Story in Inception

To change the color we click the color tool, choose a color from the color palette and apply the color by clicking anywhere outside of the color palette.

Note that we can also use the color palette to change the background color of the text and to save a used color as a swatch for re-use.

To change the font we click on the font list (it will probably show 'Default font') and choose a font from the list.

To change the size of the text we select the text and click the '+' icon to increase the size or the '-' icon to decrease the size.

To display the CSS code for the background of the Story, we click anywhere outside of a component in the Story itself, or we select 'Common' from the list at the top of the Style Editor.

Figure: We can change the color of the background by choosing 'Common' from the list to show the code that we need. The color of the background is defined in line 2.

The color of the background is defined by a property named $bodyBackground and we can simply change its value to any color we want. We do this by replacing the current value '#ffffff' (which represents white) by the value of the color that we want. This new value could simply be the name of the color such as 'red' or 'blue' or a specific value such as '#FFFF00' for yellow.

Tip: For more information about color values, see w3schools.com - Web colors.

Here, we change the color to 'azure'.

$bodyBackground: azure;

After waiting for a few seconds, the change is automatically applied and we can see the color of the background change in our Story.

In this example we will clearly see the strength of making changes to the CSS code: by making one change we can see the result in multiple places in the Story.

In our Story we have multiple body components that use a dropcap:

We want to change the color of the dropcap to orange but when checking the code in the Style Editor (by clicking in the text in the Story or by selecting 'Body Component' in the Style Editor) we see that no property exists yet for setting the color of the dropcap:

/* Body component style */
.body {
    font-weight: 400;
    font-size: 18px;
    font-style: normal;
    line-height: 1.6;
    color: #606060;
    margin: 12px auto;

    /* class style for the DropCap property of the body component */
    &._drop-cap {
        &:not(.doc-empty) {
            &:not(.doc-component-highlight) {
                min-height: 80px;
                &::first-letter {
                    font-size: 300%;
                    text-transform: uppercase;
                    line-height: 0.8;
                    float: left;
                    margin: 4px 6px 0 -2px;
                }
            }
        }
    }
    /*
     * media query
     * $screen-sm-max constant is defined in the global style file (_common.scss)
     */
    @media (max-width: $screen-sm-max) {
        font-size: 17px;
        line-height: 28px;
    }
}

We therefore need to add the color ourselves by adding the following line:

color: orange;

/* Body component style */
.body {
    font-weight: 400;
    font-size: 18px;
    font-style: normal;
    line-height: 1.6;
    color: #606060;
    margin: 12px auto;

    /* class style for the DropCap property of the body component */
    &._drop-cap {
        &:not(.doc-empty) {
            &:not(.doc-component-highlight) {
                min-height: 80px;
                &::first-letter {
                    font-size: 300%;
                    text-transform: uppercase;
                    line-height: 0.8;
                    float: left;
                    margin: 4px 6px 0 -2px;
                    color: orange;
                }
            }
        }
    }
    /*
     * media query
     * $screen-sm-max constant is defined in the global style file (_common.scss)
     */
    @media (max-width: $screen-sm-max) {
        font-size: 17px;
        line-height: 28px;
    }
}

Tip: For more information about color values, see w3schools.com - Web colors.

And this is the result: all dropcaps are now orange:

Choosing the right fonts for your Story is probably the most important decision to make when deciding how your story should look. When using the Style Editor, changing a font is very straightforward.

Choosing your font

Whatever font you choose, it is important that whoever will read your story also has access to the same fonts. On the Web this is made easy by for example making use of Google fonts. These fonts are available online and are automatically downloaded by the Web browser on the system of the person who reads your story. You therefore don't have to worry about distributing fonts: this is all taken care of by (in this case) Google.

Changing our font

In this example we will change the font for the whole Story.

The current font in our story is the default Inception font named 'Lato' and we want to change that to a font named 'Indie Flower' (just for the sake of showing a clear difference here between the font styles).

This is how our Story currently looks:

This is how we want our Story to look:

For our example therefore, we visit Google Fonts, look up the Indie Flower font, and click the Quick-use icon.

On the page that appears we scroll down to step 3 Add this code to your website and click the @import tab:

We copy the text that is shown:

@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

We return to the Style Editor in Inception and make sure that 'Common' is selected in the list so that the code for the Story itself is shown.

We make 2 changes:

1. In line 4 for we change the name of the font style:

$fontName: "Indie Flower";

2. In line 23 we replace the "@import" reference by the text that we have copied.

/* Constants */
$bodyBackground: #ffffff;
$textColor: #000000;
$fontName: "Indie Flower";
$defaultFontSize: 14px;
$defaultFontWeight: 300;
$screen-sm-max: 991px;
$speed: 0.2s;
$img-dir: 'img/';

/* Mixin's helpers, more info: http://sass-lang.com/guide#topic-6*/
@mixin display-flex() {
    display: -webkit-flex;
    display: flex;
}
@mixin webkit-prefix($property, $value) {
    -webkit-#{$property}: $value;
    #{$property}: $value;
}

/* Font embeds, examples see: https://www.google.com/fonts */
/* Imports the style from the google fonts cdn */
@import url(https://fonts.googleapis.com/css?family=Indie+Flower);

And that is all we need to do: after a few seconds we see the font of our Story change.