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 supported 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.
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.
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 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
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.
If you do not want users to use a particular component in the template, use the CSS "visibility" option to hide it.
Custom fonts can be used when they are embedded as base64 in the CSS file.
Use the following syntax to embed a font in the design.scss file:
@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
);
For more information see GitHub Gist.
Note: The fonts have to be stored in the src/fonts folder. If you would like to use another folder please change fontsDir value in gruntfile.js (line 70).
Each Story component can have different style variants. This can be used for instance to create different kinds of titles. Per component you can create 4 variants, called _option1, _option2, _option3 and _option4 in the scss.
The display names of the style variants can be configured in the manifest.json.
Example:
|
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.
Example: Change the background color to yellow by opening the src/design.scss file and changing the following line at the top: from: $bodyBackground: #ffffff; to: $bodyBackground: yellow; |
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
Version | Date | Remarks |
---|---|---|
b577 | 4 August 2015 |
|
b572 | 23 July 2015 |
|
b571 | 9 July 2015 |
|
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.
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." 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 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:
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:
- 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.
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.
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.
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 .
|
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 window appears.
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.
Document history
- 27 June 2019: Changed the title from 'Customizing the look and feel of an Inception Story'.
- 27 June 2019: Updated section 'Creating a new template' by restoring the link for downloading the template.
Comments
Do you have corrections or additional information about this article? Leave a comment!
Do you have a question about what is described in this article? Please contact support here.
0 comments
Please sign in to leave a comment.