The first part of this page describes how the Kadence theme is customized to support styles selected for the LLIR Website, including how to change these customizations. If you are authoring new content within the framework of the customized theme, you can skip down to the sections on:

Customizing the theme for a website includes setting the visual styles that control how headings, buttons, links and other standard components are displayed throughout the website. This page explains which styles are set in the theme and which you apply manually. The goal is to consistently apply a set of styles that work together to create a global look and feel. This this context, global means throughout the website.

This website uses many default settings that came with the Kadence theme. For example, regular text has the default sans-serif font, character size of 17px and colours (black on a white background).

LLIR Logo

Work on a rejuvenated website began with the new logo, created in May 2023 and displayed on the left. Another version of the logo, without the caption text, appears in the page header.
The two colours in the logo are the basis for this website’s colour scheme. These notes refer to them as logo green and logo blue.
These colours are not on the LLIR customized global palette because the theme applies them automatically to key components, as described below.

Site icon

A small version of the logo stored with different (taller) aspect ration for display as the icon on browser tabs and selected other places is shown on the right. To see where the logo and the site icon for the website are specified in the theme select Appearance and Customize then Site Identity from the dashboard.

Fonts and Colours Set by the Theme

Before you customize any theme settings, pause to consider that many experts put a lot of thought into deciding what defaults usually work best.

Page Headers

The website has two headers, one of which appears at the top of all pages. The headers are divided into two rows to give the appearance of bars across the screen. The row with a logo blue background contains the LLIR logo, the search feature (on the public header only), one or two buttons and Login/Logout. The row with a logo green background contains the main navigation menu.

You can set colours of the menu items, buttons and other features in a header by modifying the header. Refer also to Headers and Menus under Implementation Strategy.

Page Title and Headings

The size and positioning of the page title is set by the theme. The page title is logo green, the same colour as some headings, as shown below. You can change the colour, size and font of the page title and all levels of headings in Typography under the Colors & Fonts section of customizing the theme.

H1 Heading

H2 Heading

H3 Heading

H4 Bulletin

H5 Warning
H6 Note

Up to 6 levels of headings are available, far more than most webpages require.
Use H1 like headlines to announce main topics within the page.
Use H2 to create a second-level breakdown within the preceding H1.
Use H3 for further subdivision within the preceding H2.

As a rule of thumb, every heading should be followed by a paragraph of text. An image or other non-textual component can also serve as content, but adding an introductory sentence usually helps.

The headings give the page a hierarchical structure and organize the text. Most pages require only one or two levels of headings. If you use need more than 3 level of headings on one page, you should probably split that page into smaller chunks.

The colour of H4, H5 and H6 headings is red and their sizes are the same as for H1, H2 and H3 respectively .
Use these headings for special circumstances such as bulletins, warnings and notes.

If you want to make some text bigger or to give some characters a different font or colour, create a paragraph containing the text and apply highlighting to the specific words or characters. Use headings to reinforce the structure of content, not for style.

In-Page Links

In-page links appear as pure blue text, a colour that is not in our global palette. When the user hovers over a link, the colour changes to logo blue. Links are also underlined, as required by an internet standard.
You can modify the global colour of links in Colors under the Colors & Fonts section of customizing the theme.

In-Page Buttons

In-page buttons initially display as white on a logo-green background.
When the user hovers over a button, they change to
white on a logo-blue background.
You can modify the global colour of buttons in Buttons under the Colors & Fonts section of customizing the theme.

The Global Palette and Other Colours

A customized palette makes it easy for page authors to apply preferred of colours consistently throughout the website.

You can modify the global palette in Colors under the Colors & Fonts section of customizing the theme. Take care when overriding default colours. After you change a colour on the palette, check all the existing pages for unexpected side-effects. For example, this website all four of the default greys are used, although some occur only in captions, borders, tables or forms.

  • The first colour in the palette is a lighter and brighter green than logo green and is the colour of the icon in the list above
  • The second colour is a medium brown intended to be used as a background to make any content that must be deleted before the page is released to the public stand out.
  • The next four colours are defaults that are used by the theme.
  • Next come recommended colours for backgrounds, pale blue and a pale green.
  • Last of the nine global palette colours is white, the default background.

Kadence Block Controls let you add colours that page authors can use on all pages. At the time of this writing, four colours have been added or convenience of page authors: a pale grey for backgrounds, logo blue, Logo green, the red of H4, H5 and H6 headers and a pale yellow for backgrounds. You can add more colours by opening the Kadence Blocks Controls while editing any page.

More colours are always available, but a page author can use the editor’s colour picker tool or enter the hexadecimal value to select a specific colour that is not on the palette.

The website w3cschools provides a overview to colours in its HMTL Tutorial.

Colours You Set Manually

To add shading to areas within the screen, set background colours manually. The Kadence block editor has settings for the text colour and background colour of many types of Kadence blocks including Section, Table and Paragraph. The global palette includes two colours that are recommended for backgrounds: pale blue and pale green.

The pale blue background applied to the paragraph above is good for setting a block of text apart from the rest of the page.
The pale green background applied to the paragraph below works well in tables and forms.

You can also add colour to words and characters within a paragraph. For example: white on black uses two colours from the global palette.
Purple on yellow uses two random colours selected with the colour picker.

To apply colour within a paragraph: select the characters with the mouse, click More on the Kadence edit bar (pictured on the left) and select Highlights from the dropdown menu.

Warning

The edit bar provides the Highlights option specifically for colour. These notes use the word highlight with a broader definition that includes font variants such as italics, bold and most (but not all) other options under More.

Recommendation: Give temporary content a background colour that is the same as the middle brown behind this paragraph. Apply this background consistently to help readers recognize that the text is addressed to page testers or authors and that the page is a work in progress. This background is easy to spot for editing and removal when the page content is finalized.

Conventions for Highlighting Text

Try to apply italics and bold as your primary means of making specific words stand out. Highlighting words and phrases can help reader understanding, providing you apply highlighting consistently. Never use quotation marks (“… “) for anything except actual quotations. Instead, apply Bold and italics to words and phrases and background colours to blocks of text. This website and these notes adopt the following conventions for highlighting in regular text:

  • Use Italics for terms and phrases the reader may misunderstand, especially a common English words used as a technical term in the current context. If appropriate, the surrounding text can provide a brief definition. Terms and phrases coined by LLIR fall into this category.
    Highlighting just the first occurrence of a term on each webpage is sufficient. Adding a link to the page where the term or concept is introduced and explained is even better.
  • Use bold when referring to page titles, headings that are not used as links.
  • Apply bold to the first occurrence of product names, such as Kadence or WordPress, in a page.
  • Use bold when referring to anything that user clicks, except links. The underlined blue is sufficient highlighting for links.
    In instructions, applying bold to menu labels, button labels and keyboard keys (such as ctrl ) makes the precise actions you are telling the user to perform stand out.

Final Comments about Colours and Fonts

Bear in mind that screen colours are never absolute: the same hex codes may look different on difference screens. Also, the user can adjust the brightness and contrast on their own screen.

Users of Windows computers can also control the size of letters and everything displayed within most Web browser windows using the following keystrokes:
Hold down ctrl and press + to make everything larger.
Hold down ctrl and press to make everything smaller.
Hold down ctrl and press 0 to return to the initial size.