Customising Global Theme Styles

The global customisation tab provides site-wide changes to various styling elements that make up your websites theme. The elements that can be changed include typography, colours, site widths & button styling.

You can access these settings and any other settings related to your websites theme under the customise button in your admin topbar. Click on the 'Customise' button to load the customiser sidebar. Under customise click on 'Global'. This will bring up your global styles menu where you can modify the primary theme style settings.

After making changes to the customise section remember to publish all changes by clicking on the blue publish button at the top right of the customiser sidebar if you would like these to go live.

For a breakdown on each section please see below:

Article Contents (click link below to view section)

  1. | Typography
  2. | Colour
  3. | Container
  4. | Buttons
Screen Shot 2020-09-17 at 2.42.43 PM

Typography

The Typography section is broken up into two sections, Base Typography and Headings. Base Typography covers the text that makes up the body content of your website. The Headings menu covers the heading items from H1-H6.

Related Articles: How to Use Headings On Your Site

Base Typography

The Body & Content section section allows you to override the default text that makes up the body of your website.

Family
The font name/family can be selected here. OVA supports a vast array of fonts from the Google Fonts library. You can use the Google Fonts browser to find a font that suits your needs and select it here.

Variants
Some fonts have different design variants. These can be selected here. In most cases you will leave this blank unless you have a specific variant you want to use.

Size
Sets the default font size of the font.

Weight
Sets the font weight. By default the standard regular font weight is selected but if you are looking for a thiner or thicker font you can set it here.

Text Transform
Sets the text transform parameter. If you would like all text to be capitalized, lowercase or uppercase you can set it here. Best to leave this default unless you know what you are doing.

Line Height
Sets the spacing between each line of text

Paragraph Margin Botton
Sets the spacing between each paragraph.

Screen Shot 2020-09-17 at 3.08.52 PM

Screen capture showing the colour options in the body & content typography settings

Screen Shot 2020-09-17 at 2.43.56 PM

Screen capture showing the colour options in the headings typography settings

Headings (H1 - H6)

The correct use of Heading tags is important for the ranking and display of your website on search engines. The numbers relate to the Hierarchical order of the content for your page. You can define the style of your heading tags here.

Related Articles: How to Use Headings On Your Site

Colour

The colour section defines the most commonly used colours throughout your website.

Text Colour
Sets the default text colour for the body text. This text makes up the majority of the text that you enter on your website.

Theme Colour
Sets the default theme colour of your theme. This colour is used for various decorative items and varies depending on each individual theme.

Link Colour
Sets the default hyperlink colour for text links on your website.

Link Hover Colour
Sets the colour that a hyperlink will change to when a user places their mouse over a hyperlink. Generally you will set this to a lighter or darker shade of your Link Colour.

Heading Colour
The default colour for all headings from H1 through to H6

Background Colour
Sets the default background colour of your website

Background Image
Sets a background image for your website. This will NOT override your selected background colour if a colour is already selected. If you would like to show your background image ensure that your Background Colour is set to be transparent by selecting the background colour and dragging the far right transparency bar to the bottom

Screen Shot 2020-09-17 at 4.37.01 PM

Screen capture showing the colour options in the colour customisation section

Screen Shot 2020-09-17 at 4.52.23 PM

The colour picker is used to allow users to set the hue, saturation and transparency of colours