The first part of this page describes how we customized the Kadence theme during the LLIR Website rejuvenation project of 2023. It includes brief instructions on how to change the customized settings. If you are authoring new content, you can skip down to the sections on:

Customizing the theme for a website includes setting styles that control how headings, buttons, links and other standard components are displayed throughout the website. This page explains which styles are inherited from the theme and which you apply manually. The goal is to help page authors consistently apply styles that work together to support our desired look-and-feel. This this context, the term 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 that was created in May 2023 and is displayed on the left. This logo appears in the website headers without the caption text.
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 customized global palette because the theme applies them automatically to key components, as described below.

A variation of the logo with a different aspect ratio is called the site icon.The site icon is designed to be more legible than the logo in small areas such as browser tabs. To see where the logo and the site icon are specified, from the WordPress dashboard click Appearance, Customize and then Site Identity.

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 member 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.

Do not Misuse Headings

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 LLIR Colour Palette

Fourteen colours that make up the LLIR palette at the time of this writing are shown below.

Colour Palette for Kadence blocks

The first 9 colours, make up the WordPress Global Palette for the website. You can modify the global palette from the WordPress dashboard by clicking Customize, Colors and then Colors & Fonts.

The last 5 colours expand the palette by adding more colours that you can use in the page editor. You can modify this set of colours by opening the Kadence Blocks Controls while editing any page.

Take Care Modifying the Palette

Changes apply to the entire website. After you change a colour on the palette, check all the existing pages for unexpected side-effects.

Recommended Uses for the Palette Colours

Try to apply colours from the LLIR palette consistently throughout the website. The following are suggestions colour use in page content.

  • The 9 colours in the global palette:
  • A brighter green than logo green is suggested for the icon in Icon Lists.
  • Apply a medium brown background to any content that must be deleted before a page is released to the public.
  • The four greys are defaults for text. Some apply only in captions, tables or forms.
  • A pale blue background can set a Paragraph or Section apart from the rest of the page.
  • A pale green background works well in tables and forms.
  • White is the default background colour.
  • The additional 5 colours for the Kadence blocks:
  • Pale grey to makes a subtle background.
  • Use Logo green and logo blue to reinforce the LLIR’s brand identity.
  • Reserve the red of H4, H5 and H6 headings to draw attention to warnings.
  • Add pale yellow backgrounds to blocks or texts that you want to stand out.

More colours are always available. A page author can use the editor’s colour picker tool to select a colour for one-time use or specify a hexadecimal value to match a known colour code. The website w3cschools provides a overview of colours in its HMTL Tutorial.

Using Colours to Highlight Blocks and Text

This is an example of a Paragraph with a background. To set set the background colour for any block, select the block and open its Settings.

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

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

Warning

The option under More in the edit bar labeled Highlights is specifically for colour. These notes use the word highlight with a broader definition that includes font variants such as italics, bold and most other options under More.

Convention of these Developer Notes: Temporary content appears on a brown background. Apply this background consistently to help readers recognize text that is addressed to page testers or authors so they know that the page is a work in progress.

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 understand, 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.