WoodWing Help Center

Customizing the look and feel of an Inception Story

 

Controlling the look and feel of an Inception Story by using Styles

Creating a Story in Inception 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.

Inception has various default Styles to get you started, but you most likely will want to create your own Style and edit an existing Style at some point. Once a Style exists in Inception it can be assigned to any Story.

This article explains how to work with Styles in Inception.

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

Tip: Styles are especially effective when making use of Brands: a dedicated environment containing its own users, Stories, Story templates, styling and Publication Channels. For more information, see Setting up Brands in Inception.

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.

The Look and Feel button

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.

Another (more advanced but less user-friendly) method exists by creating a custom style package outside of Inception and uploading it.

Creating a new Style by duplicating an existing Style

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

The Look and Feel button

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

  • Create a new style based on the default style of Inception 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 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).

Creating a new Style by creating a Style package

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 in Inception instead.

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

The Style Editor

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

Note: Editing styles by using the Style Editor can only be done for Styles that have been created after the Style Editor was introduced (9 February 2016). When attempting to edit a Style that was created before that date, an error appears:

"Oops! Something went wrong and went wrong and we are unable to show the code for styling the Story."

Error: cannot show the code for styling the Story

To change the styling for Stories that have such an 'old' Style applied, create a new Style by creating a Style package.

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 Look and Feel button

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.

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:

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

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;
    }

Changing the Style variant names

To have a more descriptive name for each variant rather than the default names 'Option 1', 'Option 2' and so on, rename them as follows:

Step 1. Access the code for a component as described above in Editing a Style.

Step 2. In the header of the Style Editor, click Change variants.

The Change Variants button

The Change Variants window appears.

The Change Variants window

Step 3. Change the name of one or more variants. If you want to change more variants than are currently shown, click New Variant to display each subsequent variant.

Step 4. Click Apply.

Was this article helpful?
0 out of 0 found this helpful / Created: / Updated:
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.