Brand your digital magazine with your corporate identity: tutorial
Branding is a method of identifying and differentiating your product from others. It represents a strategy that gives you an edge in an increasingly competitive market. In digital publishing branding refers to customizing your publications in ways that promote your overall brand. This is important because it builds the trust and loyalty of your customers. So, how do you do it?
Edition Digital is an HTML5 based system and as such fully supports custom styling. Most changes can easily be done with our built-in options, while others merely require changing the CSS. For those unfamiliar with CSS the processes here are easy to understand, and after following a simple set of steps you too can become quite the designer.
Custom branding is done by overriding our default styles with styles of your own. To help you grasp the structure and names of the styles we have published all the templates on Codepen. Codepen is completely free and allows you to save any of our projects to your personal account, where you can play around and see how it works.
Custom branding is done by overriding our default styles with styles of your own.
What is a CSS
CSS styles, i.e. Cascading Style Sheets, are styles which give design properties to your headings, subtitles, quotes and other paragraphs of text. In most cases they describe font family, font size, colours and paddings. They work the same as styles within InDesign or any other DTP program.
Where can I edit CSS styles?
CSS styles can be edited in any text editor. Just find this icon 
which brings up a style panel. The style panel is empty by default, like an empty canvas for you to draw on.
This image shows that a style icon can be found in "Custom HTML & CSS" element.
What is the difference between the Mobile Editor, Article Editor and Text Editor within the Design tool?
The major difference is the way each of these tools treats a text-block.
The text editor most closely resembles your average text editor, such as Word. This means the appearance of a paragraph can be customised by simply changing its style from, for instance, a heading to a subtitle.
On the other hand, the Mobile and Article editors more closely resemble an editor such as InDesign or Dreamweaver, in that they treat text as just another element, like an image or a video. This allows you to more easily and precisely position elements on a page and is well-suited for creating media-heavy publications or mobile pages.
The major difference is the way each of these tools treats a text-block.
Built-in branding
The Edition Digital system allows you to customise colour schemes, including background and toolbar colours. Most of the built-in features are available within the workflow in the appearance tab.
Choosing an appealing palette of colours can make your content more visible and easy to reach.
In order to ensure a truly complete experience I suggest using the same colour for your background and page content. If you find yourself unsatisfied with the outcome you may replace any of our CSS styles with your own.
Also keep in mind that visual changes for individual components like galleries, shapes, text-blocks can additionally be done through the properties panel of the corresponding component.
In order to ensure a consistent user experience on all devices, make sure your mobile and desktop digital edition have a similar look and feel to them.
I am not happy with a heading style. I would like to change it.
Changing basics such as colour, opacity and alignment can be done through the Text Editor, without the need for additional styles.
If you would like to change other properties however, you can use the editor to override the heading style. Modifying the heading is always done using the h1 tag. To change it, simply enter the following text, which gives the heading a dark red background:
h1 { background-color: #990000; }
»background-color« is a CSS declaration and »#990000« is a hexadecimal colour number. Yes, this is one of those weird numbers you can find in any colour picker, from Photoshop to InDesign.
To change the subtitle, use the »h2« tag, to change the intro use »h3«, etc.
For any other style, open one of our Codepen templates (login required) and find the appropriate tag there.
If this is the first time you’ve done a custom CSS branding applaud yourself. You’ve just completed your first custom branding!
I really like Google fonts. How can I include one?
A Google font or any other third party font can be included using an “@import” url-path within any text block, mobile page, article or folio. Please consider that we offer this service in good faith and expect users to ensure their file sizes remain reasonable. One font family (regular, italic, strong and oblique) may be up to 1MB in file size. You can also find Google fonts in our Clipart library.
- Open fonts.google.com in a new tab (figure 1)
- Find a font you are interested in and click the Select this font (figure 2)
- Choose your styles (figure 3)
- Choose the character sets. For European characters, please also choose Latin Extended (figure 4)
- Copy the @import style and include it in the CSS editor. Make sure to write down “font-family” (figure 5)
- Example (figure 6):
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic&subset=latin,latin-ext);
p,ul,ol,h1,h2,h3,h4,h5,h6 { font-family: 'Merriweather', serif; }
Bespoke Articles
Articles are based on templates and colour schemes. Another very powerful design element is a proper background image. I suggest that you always use a background image or at least an appealing colour gradient. Check out our content hub.
Don’t be afraid of solid colours as a background. Vivid colours can bring the content out, but make sure to keep the centre column a neutral white.
All our templates use centre alignment. To align the entire column to the right side, add a “Custom HTML & CSS” element to the article and paste the following CSS:
article { margin-left: auto !important; margin-right: 24px !important; }
For left side alignment use the following:
article { margin-left: 24px !important; margin-right: auto !important; }
To change a font size for all styles you may set a font size to the article tag like this:
article { font-size: 16px !important; }
There are endless possibilities to what you can do with CSS styles, so feel free to try them out in the sandbox environment (login required).
Bespoke Mobile page
The background image is not visible within mobile pages. Built-in options do however allow you to change the article’s background colour and to choose an appropriate colour scheme.
Once again make sure the contrast between the article’s background and the content is good enough to be visible on all mobile screens. Article templates and Mobile templates share the same tags for all headings and paragraph styles.
Some useful CSS examples you may want to use include the following styles that you can paste into a “Custom HTML & CSS” element:
Change font size:
article { font-size: 16px !important; }
Change background heading:
h1 { background-color: #990000 !important; }
Change heading paddings:
h1 { padding-top: 64px !important; padding-bottom: 64px !important; }
Create a rounded heading:
h1 { border-radius: 50%; background-color: #990000 !important; }
Add a border to a left side:
article { border-left: 8px solid #333333; }
Here you can find a sandbox environment for testing your styles.
Brand your publication to match corporate identity
The Toolbar’s built-in options allow you to change its colours.
But if you want even more control over the design of your edition, try our API (application interface) with full support for CSS and JavaScript. Changing CSS style allows you to customise your edition’s design, but the inclusion of JavaScript brings making your edition truly yours to a completely new level.
Have you ever changed JavaScript?
No?
Why don’t you start by copying the CSS and JavaScript from our example on Codepen to the API fields?
Please keep in mind that the improper use of JavaScript may cause errors and render some of the built-in features non-functional. Edition Digital cannot be held responsible for any issues caused by improper use of JavaScript.
Here you can find (login required) the sandbox environment for testing your toolbar before inserting it into your edition.
How to navigate our developers centre
Our developers centre demonstrates the structure of templates and the names of the styles. This will help you find out the exact name of the style or tag you are looking for.
You are more than welcome to keep checking on the Developers centre in the future as we constantly update it with new templates and toolbar examples.
Please bear in mind that some of the aforementioned features such as API may not be available unless you purchase a plan that includes custom branding.