WHAT ARE FUNCTION, ACCENT AND SUPPORTING COLOURS


S02 | E07 | HOW TO MAKE A WEBSITE LIKE A PRO

Paul Davenport |  5 min read |  4 min video

Web School Series 2 Episode 7

NEW VIDEO IN PRODUCTION. STAY TUNED VIA YOUR INBOX OR SIGN UP NOW


In this Episode we look at the Function, Accent and Supporting Colours. These are the colours that are available to you when you edit a page in the Visual Page Editor.

Let's jump straight over to the Visual Page Editor and take a look at the colours in action.

MOBLE CMS DirtyFeet Frames Drawer Colours

Primary and Accent Colours appear in your Layouts Drawer in the Visual Page Editor. 

MOBLE CMS DirtyFeet Text Component Colours

Primary and Accent Colours appear in your Text Component in the Visual Page Editor. The Text Component can be used to replace the dfault Heading colour that you select in the Function colours. 


FUNCTION COLOURS

Function colours are an important part of your website code or CSS (Cascading Style Sheets) and are used in the Visual Page Editor for elements such as:

  • Headings
  • Links
  • Underline
  • Divider
  • Default Form Field colours
MOBLE CMS Function Colours

Pick your Function, Accent, and Supporting Colours. Click Preview to view your changes as you go, before you Save.


ACCENT COLOURS

Accent colours are used in CSS for elements such as:

  • Buttons
  • Backgrounds
  • Gradients
  • Overlays
  • Borders
  • Animations such as hover effects

Accent colours are used within your website colour palettes, as we saw in the screenshots at the top of the page.


SUPPORTING COLOURS

Supporting colours are additional brand colours that can be used as part of your website style kit and if selected are added to your colour palette in the Visual Page Editor.


BOILERPLATE

Notice the Preview Pane can also be styled for your Brand. You can design your Preview pane to suit your needs and you can access it and design it just like any other page.

  • Go to 'Pages'.
  • Search for 'Hidden' and 'Section' pages.
  • or, simply type 'Boilerplate' into the search box, and click 'Search'.
  • Notice the 'Boilerplate' page and click 'Edit'.
  • Design the layout of you Boilerplate page, click 'Save & Exit' when you're done.
  • Now your Preview pane is updated.
MOBLE CMS DirtyFeet Boilerplate

Design your own Preview page via the Boilerplate page. The Boilerplate page is a 'Hidden' 'Section'.