help

Styling pages

→ The Navigation tab
→ Adding a logo or background image
→ The Layout tab
→ The Styles tab
→ Changing background colour

The Navigation tab

Go to any of your pages and enter edit mode. Then go to the navigation tab (small compass icon) where you can switch from a horizontal or vertical menu, change the colours & style of the text or add a logo (when premium). As well as decide whether to have the menu stay in place or scroll with your page.

Adding a Logo or background image

Setting up a custom logo or background image on Salon.io is simple. To begin go to any page to setup a custom logo or to the page you want to change the background of and enter edit mode.

To add a custom logo go to the navigation tab and then the logo item section. Click on choose file and select the image you want to use as a logo.

To add a background image go to the layout tab and then the Background section. Click Choose file and then select the image you want as your background.

The Layout tab

If you open a page you want to edit and start edit mode you will see a drop down menu where you can pick 'Canvas, Fixed Size, Variable Size or Square.
You can also automatically generate a layout from the layout tab based on variable parameters.

The Styles tab

Go to any of your pages and enter edit mode. Then go to the styles tab (capital T icon). Here you can change the default colours and formatting for text and links. Either just for the page you are on or globally across all of your pages. Colours can be chosen with the colour picker, entered as a hex value (see here) or written in plain English
(see here).

Changing background colour

To change your background color go to the layout tab in the inspector (the first tab). Then at the bottom of that tab there is a colour picker where you can set a background colour.
Colours can be chosen with the colour picker, entered as a hex value (see here) or written in plain English (see here).
To set an image as the background you must have a premium account then go to the code editor tab and add a background attribute to the body - learn more here.