The first part of this page describes how we customized the Kadence theme during the LLIR Website rejuvenation project of 2023 to establish the overall look and feel of the website. You can see what features are customizable from the WordPress dashboard by expanding by clicking Appearance and then Customize.
Customizing the theme for a website includes setting styles that control how headings, buttons, links and other standard components are displayed globally. WordPress uses the term global to mean throughout the website. The editor applies styles, such as font style, text size and colours from the theme but page authors can override these inherited defaults. See page Highlighting Text and Blocks, for style guidelines that support our desired look-and-feel.
Caution
Proceed with caution when customizing the theme. Never switch to a different theme from Kadence unless you are embarking on a major redesign of the website.
The Overall Look and Feel of the LLIR website
The rest of this page describes most of the customizations setting. and do not cover setting that are unchanged from the default or or not applicable to the LLIR website. For example, we accepted the default page layout to keep the presentation simple and to take advantage of the experience of the experts who established the defaults.
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 and white background are the basis for this website’s colour scheme. These notes refer to them as logo green and logo blue.
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.
Page Headers and Footer
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.
The website has one page footer with a logo green background. It contains a copyright notice and two buttons.
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.
Base Fonts and Colours
The LLIR website mostly uses default colours for text in paragraphs, character data in table cells, items in lists, captions on images and the like. The base font is sans serif font and base size 17 pixels. The customized items are described below. To see these setting click Appearance, Customize, Colors and Fonts and then Topography.
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.
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.
Our Custom Kadence Palette
Fifteen colours that make up the LLIR palette at the time of this writing are shown below. The image is a screen capture from the Colors option under the Colors & Fonts section of customizing the theme.
The first three colours, under Accents, are taken from the logo and default white background.
The Contrast colours are used for Strongest Text, Strong Text, Medium Text and Subtle Text based on contest. These are default WordPress colours.
The Base colours are recomended for backgrounds and are pale blue, pale green and light grey.
The colours called Notices were added to give flexibility and can be modified by opening the Kadence Blocks Controls while editing any page.
For more about where the colours in the palette are applied by default and recommendations to page authors for applying colours, see LLIR’s Colour Palette. The website w3cschools provides a overview of HTML colours in its HMTL Tutorial.
Warning
The palette has been corrupted more than once over the years for unknown reasons which may be related to user error updating the Kadence block controls or side effects of updating the Kadence theme. For instructions on reinstating the palette above it the global palette has been corrupted, see page to be added.
Final Comments about Colours and Fonts
Bear in mind that colours on computer displays are never absolute: the same hex codes may look different on different screens. Also, users can adjust the brightness and contrast on their own screen.
A Tip for Enlarging the Font Size
Early in 2026, the website removed the plugin that added accessibility features (primarily aids for user with low-vision) to the website. The reason was cost. There have been no complaints, perhaps because many low-vision user have tools such as screen readers for the blind. Should anyone ask for larger font, you can respond with the following tip:
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.