Customising the Canvas

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 can be set here.  Think of the canvas as the page on which all content sits on, essentially the foundation of a style, which is then built upon by customising the components themselves.

To customise the canvas

1. From 'Style Manager', click the style you wish to edit.

   

   
   

2. Click the Edit button at the top right of the canvas. This will display the canvas styling options.

   

3. This will display the canvas styling options.
5. This will display the canvas styling options.
7. Make the required style changes to the canvas.
8. Click Save to commit the changes.

Canvas Options

Colour:

• Canvas: Changes the background colour of the canvas all components sit on.
• 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. 

Base Font Size

Base font size provides a quick and easy way to control the font size of your articles dependent of the device it is being viewed on.  For example you may want content to appear larger on desktop than on mobile.

Because Canvasflow is a mobile first platform, the font size given to components always applies to the mobile device.  Using the base font size control, it is possible to increase or decrease this for tablet and desktop on.  Setting the value to more than 62.5% will make the text larger, while any value less than 62.5% will make the text smaller.  You can test the effect or changes using the workspace preview menu option from within the style, article or template builder at anytime.

The base font size control applies on a global scale and will affect all text components.  If you wish to target individual text components, you must use the media query controls found in the custom CSS editor.

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 of the device content is viewed on. An example of the responsiveness of Percentage Padding can be found below:

Media Component Bottom Margin:

Adjust the padding margin underneath media components such as images, text, etc.  This is always defined in px.