This also covers the 'page setup' menu.
Using master pages, you can style just the master page, and all standard pages will inherit the same styles.
Styles are the colours, and layout options for your web page.
To add or edit the page styles, first open the webpage from the file manager (or the master page).
Go to the 'Page Setup', and select 'Page Styles / Colours / Theme (CSS)'.
(CSS or Cascase Style Sheets is a HTML standard for defining the styles of a webpage or webpages).
There are around a hundred options available for customising the styles for your webpage. Because there are so many options available, there is an 'Auto Style Generator' that generates the settings for these hundred options automatically based on just a few key settings.
Because the page needs to optional Inherit from the master page - in a number of places a 'blank' entry or selecting 'Inherit' will cause the page to inherit from the master page styles.
The 'Auto Style Generator'
Please note, that running the generator will overwrite all of the current style settings in other areas.
The following options are provided in the generator:
Base colour - from here you can select the base colour your website theme will be based on. A variety of shades lighter and darker will be used for the menus, background, text of your page. To use, drag the colour sliders back and forth to select the colour you require. It is recommended you run the 'Generate' and the 'Preview' the page to see how it looks.
Colour Adjust - the generator will attempt to colour the page based on the colour you specified, however, you can apply colour adjustments here to make the page lighter or darker if you feel it needs it. This basically adds contrast to the page.
Plain Side Area - by default you will have the side area panel wrapped in coloured boxes, this can be switched off by checking this button.
Re-align some text - this (at the time of writing) simply realigns the 'slogan' area to be right aligned rather than left.
Override background images- if you have already selected background images for an area, running the generate command would normally leave these in place - you can force these to be overwritten by checking this box.
Make side panel body lighter - if using the standard boxes for the side area panels, the body of the panel will appear lighter if this is checked.
Font family - the font family that will be used for this page.
Once you have selected your options, click 'Generate' and then 'Preview' the page.
You can also click the 'Inherit All' button to set all styles to inherit - this will inherit from the master file.
Other General Options
As well as the Auto Style Generator, there are general options. These are not generated by the style generator.
Fixed page width - if blank the page will be 100% full page width. Otherwise specify a page width either in % or pixels, with '%' or 'px' suffix.
Menu spacing - the number of pixels between menu items.
Panel spacing - the number of pixels between panels.
Tall Menus - this will make the menu bar twice as tall.
Narrow Menus - this will make the menu items have the width.
Side Area Styling
There are options for styling the side area as follows:
Which side the side area sits - left or right.
Insert Divider - select whether a vertical line will appear between the side area and the main body.
Here you can add override CSS that will be output last on the page to overwrite anything here.
Styles for Types of content or Areas
All of these settings will be generated from the Auto Style Generator - therefore any changes you make here will be lost if you run the auto style generator again.
To leave a style to inherit, either select inherit or leave blank.
All of the folded areas are the same - the only difference is the area they apply to. For each area you get the following options:
Background colour - the colour of the background
Background to colour - the colour to fade the background to (supported browsers only - all recent browsers)
Background image - only applies if the background colours are blank - select a background image
Text colour - the text colour - this should be a contrast to the background
Text alignment - this can be inherit
Border colour - the colour of the perimeter of this content
Border thickness - the thickness of the perimeter of the content
Shadow depth - if used, will places a gradient shadow around the content, the number applies to how far this gradient extends
Corner roundedness - the number of pixels radius for the corner roundness (higher number are more rounded).
There are multiple options available for the various headings. These are generated by the Auto Style Generator, and will be overwritten if the Auto Style Generator is run again.
Text Colour - the colour of the text
Font family - see HTML CSS documentation on the web
Font size - the size of the text (small / large)
Font weight - bold
Font style - italic
Text decoration - underline
Text alignment - left / centre / right
Other 'Page Setup' options
Edits the title of the page as it appears in the browser title bar.
You can enter a google analytics tracking code to receive notifications of page views, interactions with items such as galleries, and other messages.
To soften the loading of a page you can use an entrance effect. At time of writing only a fade is available.