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 the Story should 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.

Figure: The Style Editor makes it possible 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.

Step 4. (Optional) When Custom styles are used, these are displayed in tabs. Choose the tab for which you want to edit the styling.

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

Step 5. 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.

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

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

Troubleshooting: I don't see my changes appear in the Story

Try placing your cursor in a different component.

Example: When you have your cursor placed in a Body component that has the Drop Cap option enabled, the drop cap won't show in that component until you select another component. This is done to make editing the text easier. When changing the style for the drop cap you will not see these changes when the cursor is placed within the Body component.

Examples

The following examples show how styling can be changed by using a specific method.

Example 1: 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.

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.

Example 2: 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:

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:

Example 3: 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 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 +Select this style.

In the panel that appears we select the @import option:

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:

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.

Example 4. Managing character styles

To make it easier for users to style sections of selected text using multiple styles, character styles can be defined.

Character styles are defined in the Style of a Component Set and consist of various parts:

1. A label which is shown in a list of styles in the editing tools for users to choose from.
2. An internal name for linking the label to the definition in the CSS code of the Component Set.
3. The definition in the code itself.

Figure: Character styles consist of labels shown in the editor (A), a Character styles panel to define the label and the internal name (B), and the definition of the styles in the CSS code of the Component Set (C).

Users can only use Character styles by applying them. Users cannot add, edit, or delete Character styles; this is all done by editing the Style in the Look and Feel panel.

When the Common component is selected in the list of components at the top of the Style code panel, the currently available number of Character styles is shown above it in the form of a button.

Managing Character styles is done in 2 places:

1. The name to show in the editing tools for users as well as the CSS name of the style defined in the code is managed in the Character styles panel.
2. The style itself is defined in the CSS code. The definition uses the same CSS name as the one that is set up for the label.

When a user chooses a style, the matching CSS names makes sure that the correct styling is applied.

Managing the CSS name and label

To add, edit, or remove CSS names and labels, choose Common from the list of components and click the button above it that indicates the number of currently available Character styles.

The Character styles panel appears showing all CSS name and label combinations.

• Add a new Character style reference by entering a CSS name and a label name in the empty fields at the bottom of the panel.
• Remove a Character style reference by hovering over an existing Label field and clicking the Trash Can icon that appears.

Note: This only removes the label. The definition of the style in the CSS code needs to be removed separately.

• Cancel any changes made to the CSS name or label name by pressing Escape.
• When editing a CSS name, also make sure to update its name in the CSS code and vice versa.

Defining the style

To define a style, do the following:

Step 1. In the CSS code, choose Common from the list and create a new definition with the name in the following format:

.cs-CSS name

Note the dot at the start.

.cs-emphasized {

{

Tip: Hover the mouse over the CSS name in the Character styles panel and click the copy icon that appears to copy the name in the required format.

Step 2. Add the definitions for the styling, such as for making the text bold, italic, changing its color, and so on.

.cs-emphasized {
    color: red;
    font-weight: 500;
    font-size: 14px;
}

The Look and Feel style versus Component Sets

A Look and Feel style is based on the default style of the Component Set. When a Look and Feel style is created, it is a copy of the default style from the Component Set.

Take note of the behavior of the Look and Feel style in relation to when a Component Set is updated.

• Unmodified files in the Look and Feel styles keep following the default style of the Component Set when the Component Set is updated.

• When a Look and Feel style of a component is modified, the Look and Feel style receives a copy of the component style and will no longer follow the default component style. Currently this action cannot be undone.

• When the Component Set is updated with a new component, all Look and Feel styles based on the Component Set are automatically updated to include the styling from the default component style.

Revisions

• 20 February 2023: Updated section 'Editing a Style' with information about custom styles.
• 20 February 2023: Removed section 'Creating Style variants for components'. All information is now part of Setting up Component Sets in Studio.