A beginner's guide to styling a Story in Inception
As a designer, you might want to make quick and simple changes to the way a Story looks by changing the color or size of a font, the color of the background, and so on.
Web developers can create Styles, but for general users who want to make simple changes this process may come across as technical and complex.
This beginner's guide is aimed to show you how simple changes can be made quickly and easily.
Ways of styling a Story
Before we start it is important to understand that style changes can be made in the following ways:
- You can select some text in the Story and change the styling for it, such as applying a 'bold' style to a word. This is a quick and simple way of making a small change in a single Story.
By selecting text, you can change the following:
- Drop shadow
- Bold
- Italic
- Strikethrough
- Underlined
- Uppercase
- Lowercase
- Text color
- Text background color
- Font style
- Font size
- You can change the properties of a component to change the styling for that whole component.
Depending on the type of component, you can change the following:
- Text alignment (left, center or right)
- Drop cap
- Character spacing
- Line spacing
- You can choose a Style variant with predefined styles. Instead of manually applying the same styling, apply a Style variant in which this styling is already set.
- You can adjust a style by editing the CSS code. Any text that uses that style (in any Story) will be automatically updated. Even when you have never edited CSS code before, making small changes is a relatively simple process.
Styling and Brands
Inception can be set up to work with Brands: an environment for a publication or project in which dedicated fonts, Styles and Style variants are made available.
This makes sure that a Story for a particular Brand or project is styled correctly.
Depending on which Brand you work in, you might therefore see differences in the available fonts, Styles and Style variants.
For more information, see Working with Brands in Inception.
Styling by selecting text
Using this method, we will make some simple changes to the way a Hero component looks by doing the following:
- Changing the color of the title
- Changing the font of the subtitle
- Changing the text size of the Author
This is how the Hero component looks before making the changes:
This is how the Hero component looks after making the changes:
To make these changes, we simply select the text that we want to change. As soon as we do that, the editing tools appear.
To change the color we click the color tool, choose a color from the color palette and apply the color by clicking anywhere outside of the color palette.
Note that we can also use the color palette to change the background color of the text and to save a used color as a swatch for re-use.
To change the font we click on the font list (it will probably show 'Default font') and choose a font from the list.
In order for fonts to appear in the Editing toolbar, they need to be uploaded to Inception first.
Styling by changing properties
Certain styling applies to the whole text in a Story component such as how the text should be aligned, what the character or line spacing should be or if the text should start with a drop cap.
Such general style settings are applied through the Properties panel of a component.
Simply select a component, open the Component Properties panel and make the changes you want.
Note: The properties that are available depends on the selected component.
Styling by choosing a Style variant
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, simply choose it from the Style Variant list in the Properties panel for that component.
Styling by editing the CSS code
|
Note: Editing CSS code is done by using the Style Editor. Only Styles that have been created after the Style Editor was introduced (9 February 2016) can be edited this way. 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. |
Styling a Story by editing the CSS code is much more efficient than making local style changes. Instead of selecting text, you define how each part of an Inception component should look such as a title, a body text, a quote and so on.
This way you only have to define these style settings once and they will be applied each time such a component is used.
Before you start
Before you start though, realize that all these settings are part of a 'Style' which is not only applied to the current Story that you are working on but it may also be applied to other Stories. This means that any changes you make can also affect other Stories. If you only want to make the changes for the current Story it is best to first create a separate Style for it.
Also make sure to use a compatible Web browser.
Do I need programming skills?
Even when you have never changed styling by editing CSS code before, the process is relatively straightforward and simple changes can be easily made without in-depth knowledge of working with CSS code. Still, some basic knowledge of CSS will come in handy (actually, Inception makes use of SCSS, an extension of CSS).
Accessing the Style Editor
Step 1. Open the Look and Feel panel of the Story 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 2. Hover your mouse just below the name of the Style that you want to modify and click the Edit button.
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 code that is shown in the Style Editor is only the code for the selected component or for the background of the Story. This way you don't have to scroll through sections of code that are not relevant to what you want to change.
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.
Document history
- 4 April 2017: Renamed 'Properties panel' to 'Component Properties panel'
0 Comments