Customising the canvas
Overview
Customising the canvas style is likely something you'll want to do straight away when setting up a new brand. Major design choices such as choosing background colour as well as the article's padding are all set here. Think of the canvas as the page on which all your content sits on, essentially the foundation of a style, which is then expanded upon by customising the components themselves.
To customise the canvas
From 'Style Manager', click the style you wish to edit.
Click the
Style Canvas
icon (white brush in green circle) at the top right of the canvas. This will display a sidebar containing various options.- Make your style changes to the canvas, then click
Save
in the 'Menu Bar'.
Canvas Options
- Colour
- Canvas: Changes the background colour of the canvas all components sit upon.
- Background: Change the background colour of the body. This is only visible if publishing to the web or to HTML email. If publishing to apps only, we recommend setting this to the same colour value of the canvas background.
- Apple News
When publishing to Apple News, column specific options can be set using the following:
- Column Start: Specify which one of your established columns content should be aligned with, 0 being the leftmost column.
- Column Span: Specify how many columns this content should span. For example on a five column canvas, setting
Start=0
,Span=5,
your content will stretch across the entire page. Whereas settingStart=1
,Span=4,
content will be right aligned. - Margin
- Specify the top, bottom, left and right margins of the canvas in either
px
,pt
or%
.
- Specify the top, bottom, left and right margins of the canvas in either
Notes
- The unit of measurement used for each individual margin can be set independently as required by clicking on the one currently in use.
- Padding
- px: Canvas padding can be calculated in pixels for a fixed value - for example, 50px padding will be 50 pixels padding across desktop, tablet and mobile.
- %: Canvas padding can also be calculated in percentage, allowing responsive design that takes into consideration the screen width of the device content is viewed on. So 5% padding will always be 5% of the screen width on which device content is viewed on. An example of the responsiveness of 'Percentage Padding' can be found below:
- Border
- Style: Choose from various border styles,
Solid
,Dashed
, etc, etc. - Position: Define which edges of the canvas have a border style applied to them.
All
,Top & Bottom
,Left
,Right
, etc, etc. - Width: Specify the border width in either
px
orpt
. - Colour: Specify the border colour in several different ways. Either visually by means of the slider and swatch window, using the eyedropper tool to select a colour currently visible anywhere on your display or by entering RBG / HSL values. You may also enter a valid colour hex code.
- Radius: If you require the border to have a radius at its edges, you can set the required amount in either
px
orpt
. - Radius Position: Define which edges of the border have the radius set above applied to them. The default is
All
, but you may set a particular area as required. - Box Shadow:
- Colour:
- Style: Choose from various border styles,