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:
- Using colours to highlight blocks and text
- Conventions for highlighting text (applying bold, italics or other font variations)
- The LLIR colour palette
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.

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.
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:
Final Comments about Colours and Fonts
Bear in mind that screen colours are never absolute: the same hex codes may look different on different 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.