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

Creating a new Style by creating a Style package was the method used before the new Style Editor was introduced. Because the new Style Editor works in a different way compared to uploading a Style package, you would now use this method only to update Stories for which you uploaded a style before the Style Editor was introduced.

How do I know which method to use?

Simply try using the Style Editor each time you want to edit a style. If the Style cannot be edited by using the Style Editor, a message will be shown. Only then do you need to upload a separate Style package.

How it works

Info: Using this method requires knowledge of SCSS.

In this method, a style is added to Inception by uploading a package consisting of a custom CSS file and related assets.

Packages can be created by modifying a default template that is made available by WoodWing (see below). Once the new template is uploaded, it can be assigned to a Story.

System setup

In order to work with the provided template, NodesJS should be installed.

Install it by visiting https://nodejs.org/ and following the install instructions.

Creating a new template

Step 1. Download the latest template and extract it:

custom-style-618-2.zip (March 2016, 4.6MB)

Step 2. Navigate to the unpacked zip location within your Terminal or Command line.

Example: cd /users/xxxxxxx/Download/custom-template

Step 3. Build the style project:

• Mac OS X: sudo npm install -g grunt-cli
• Windows: npm install -g grunt-cli

Step 4. Install all npm dependencies:

npm install

Step 5. Customize your project.

@import "compass/css3";

@include font-face(
        "tungsten-medium",
        inline-font-files(
                'tungsten-medium/tungsten-medium.otf', opentype,
                'tungsten-medium/tungsten-medium.woff', woff,
                'tungsten-medium/tungsten-medium.ttf', truetype,
                'tungsten-medium/tungsten-medium.svg', svg
        ),
        'tungsten-medium/tungsten-medium.eot',
        normal, // font-weight
        normal  // font-style
);

@include font-face(
        "tungsten-light",
        inline-font-files(
                'tungsten-light/tungsten-light.otf', opentype,
                'tungsten-light/tungsten-light.woff', woff,
                'tungsten-light/tungsten-light.ttf', truetype,
                'tungsten-light/tungsten-light.svg', svg
        ),
        'tungsten-light/tungsten-light.eot',
        normal, // font-weight
        normal  // font-style
);

{
  "name": "default-style",
  "componentOverrides": {
  	"body": {
	"properties": {
	   "style": {
	       "label": "Shapes",
	       "options": [
	  		   {"caption": "Circle"},
	  		   {"caption": "Square"},
			   {"caption": "Triangle"},
			   {"caption": "Rectangle"}
	  		  ]
	  	}
	  }
      }
   }
}

Step 6. Preview the custom template by running the grunt task serve command from the Terminal or Command line:

grunt serve

This will start a local Web server with a sample article, containing all available components.

When you make changes to the src/design.scss file, the article will be directly updated with your changes.

Step 7. Produce a ZIP file in the ‘dist’ folder with the name of the template that is defined in the manifest:

grunt build

Note: The zip contains stylesheets and related assets such as the design.cssfile, the manifest.json file and related images.

Uploading the template

Step 1. In Inception, open the Look and Feel panel of a Story by clicking the Look and Feel button in the toolbar on the right.

Step 2. Click Upload and upload the template that was created as described above.

Once the upload is completed, the template is added to the list as a style.

Updating or deleting a template

Templates that have been uploaded can be updated with a new version or they can be deleted.

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

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 Upload or Delete button.

Note about deleting templates that have been applying to Stories: When deleting a template that is applied to Stories, these Stories will have the default style applied. However, they keep the unique name of the style that was deleted, meaning that when another style is uploaded with that name these Stories will have that template applied.

Sample project updates

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.

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.