Styling a Story in the Digital editor of Studio by using Styles

Creating a Story in Studio is done by basing the Story on a template. This template contains a Style that controls the look and feel of how you want the Story to look.

Studio has a default Style to get you started, but you most likely will want to create your own Style and edit an existing Style at some point, for example to bring it in line with your house style. Once a Style exists in Studio it can be assigned to any Story.

This article explains how to work with Styles in Studio.

Note: To edit Styles, make sure to use a compatible Web browser.

Assigning a Style to a Story

Step 1. Open the Story to which you want to assign the Style.

Step 2. In the toolbar on the right, click Look and Feel to open the Look and Feel options.

Step 3. Choose a style from the list of available styles.

The changes are applied immediately.

Creating a new Style

Creating a new Style is typically done by duplicating an existing style and subsequently editing it.

Step 1. Open the Look and Feel panel of a Story by clicking the Look and Feel button in the toolbar on the right.

Step 2. Create the Style by doing one of the following:

Create a new style based on the default style of Studio by clicking New at the top of the panel.

A new Style will be created named 'Untitled'. If a Style named ‘Untitled’ already exists, a sequential number will be added: 'Untitled 1', 'Untitled 2' and so on.

Create a duplicate of an existing Style by hovering your mouse just below the name of the Style that you want to duplicate and clicking the Duplicate button.

The name of the Style will be the name of the original Style with a sequential number appended.

Example: Duplicating a Style named 'Travel' will result in new Style named 'Travel 1'.

Step 3. Edit the Style (see Editing a Style).

Editing a Style

Info: The information that follows is quite technical and aimed at Web developers with in-depth knowledge of CSS and SCSS. If your coding skills are limited, see A beginner's guide to styling a Story instead.

Editing a Style in Studio is done by modifying the CSS code in the Style Editor.

Editing a Style

Figure: The Style Editor allows you to edit the Style of a Story by modifying the CSS code.

Step 1. Open the Story that has the Style assigned that you want to edit.

Step 2. Open the Look and Feel panel by clicking the Look and Feel button in the toolbar on the right.

The Style that the Story currently has assigned is shown in green.

Step 3. Hover your mouse just below the name of the Style that you want to modify and click the Edit button.

Note: Instead of first opening the Story you can also click the Edit button of any Style, but doing so will automatically assign the Style to the Story that is currently open. That is why we advice to first open a Story to which the Style that you want to edit is already applied. Of course, if you want to assign a Style to a Story and immediately edit that Style, you can do so by just clicking the Edit button of that Style.

The Style Editor is opened.

The styling can be changed for each individual component (such as the Hero, the header, the body text or image) or for the background of the Story. The Style Editor only displays the code for a selected component or for the background of the Story.

Step 4. Display the code that you want to edit by doing one of the following:

Select the component or background from the list at the top of the Style Editor.
Click the component in the Story or click outside a component to show the code for the background.

Step 5. Edit the available CSS code or add additional code.

Examples:

Changing the background color of the Story

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.

Changing the background color

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.

Changing the color of all dropcaps

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:

Dropcap before styling

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:

After styling dropcaps

Changing the font

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 Studio 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:

Before changing the font

This is how we want our Story to look:

After changing the font

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

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:

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 Studio and make sure that 'Common' is selected in the list so that the code for the Story itself is shown.

We make 2 changes:

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

$fontName: "Indie Flower";

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.

Any changes you make are automatically saved. You can verify the result by checking the live view of the Story.

Creating Style variants for components

Note:s

Creating a Style variant can only be done when you have been given sufficient Access Rights (Digital Styling > Manage custom styles).

The options with which a component can be styled can be finely controlled. This could be as a Style variant as described below, and/or a completely different option.

Sometimes, one or more components in a Story need to be styled differently than other components of the same type in that same Story.

Example: You might want to style a 'quote' component in different ways to match the writing style of each author or the time period that the author is from.

To make this process as efficient as possible, up to 10 different Style variants can be made available for each component, each with predefined settings. (Together with the default style, this makes 11 different styles available.)

To apply a Style variant to a component, choose it from the Style Variant list in the Properties panel for that component.

Choosing a Style variant

Note: The number of options in the Style Variant list cannot be changed.

For each Style variant, add the following code to a component (where 'X' in 'optionX' is the option number: 1, 2, 3 and so on):

&._optionX {
       <add your definitions here>
    }

Example: Here, option 1 is defined to have red text, option 2 to have blue text and option 3 to have white text on a blue background .

&._option1 {
        color: blue;
    }

&._option2 {
        color: red;
    }

&._option3 {
        background-color: blue;
        color: white;
    }

Note: The code can be placed anywhere in the existing code, just make sure that it is placed before the final curly bracket '}'/

Changing the Style variant names

Changing the names of Style variants is done by configuring the Component Set.

Assigning a Style to a Story

Creating a new Style

Editing a Style

Creating Style variants for components

Changing the Style variant names

Comments

In this article

Other articles in this section

Assigning a Style to a Story

Creating a new Style

Editing a Style

Choosing your font

Changing our font

Creating Style variants for components

Changing the Style variant names

In this article

Other articles in this section

Related articles