Skip to main content

3 - Appearance, colour and shape

Everything is set in one place: System → Site Templates Styles → Corpus, Theme Customizer tab. Twelve fields, not a hundred and forty - and that is a deliberate choice.

A template offering three hundred settings lets you build three hundred unreadable sites. Corpus fixes what should be fixed and opens only what genuinely varies from one client to the next.

The hue - one slider for the whole site

Group Appearance → Colours → Hue. A value from 0 to 359, the position on the colour wheel. Default 90°, an olive green.

The hue governs the accent: links, buttons, the current menu item, tags, the focus ring, the rules under headings.

Saturation and lightness cannot be set, and that is exactly why the hue can be free. They are fixed at 40% / 32% in the light theme and 45% / 70% in the dark one - two values chosen so that across all 360 possible hues, the contrast of text against its background stays above the threshold required by WCAG. You cannot produce an unreadable site by turning this slider. This is verified by calculation, not by eye.

The brand colour (optional)

Group Appearance → Colours → Hue, field Brand colour. The field is empty by default: an existing site does not change.

If your brand guidelines give you an exact colour, pick it here instead of hunting for the right hue with the slider. Corpus keeps the hue and the saturation of your colour, then sets the lightness itself so that the accent stays readable (a contrast of 4.5 to 1) on all of its backgrounds, in the light theme and in the dark one. Once filled in, the brand colour replaces the hue slider.

The colour shown can be a little lighter or darker than the one you entered. That is deliberate: a brand colour taken as it is sometimes gives unreadable text on a white or on a dark background. Corpus corrects the lightness, never the hue.

Information messages take this colour too. There are two exceptions: you chose the information colour yourself (see below), or your brand colour is too close to the green, orange or red of the other messages. Red information would read as an error, so Corpus leaves it on its original colour. Success, warning and error never change.

Your custom CSS has the last word. To go back to the hue, empty the field.

The secondary colour (optional)

Same group, field Secondary colour, empty by default. It is the second colour of your identity, for decoration only: the rules under headings, the blocks and the thumbnails.

It is never used for text, because a bright colour does not stay readable on a white background. In the dark theme, Corpus lightens it when needed so that the rules stay visible. Messages keep the colour of their state. With the field empty, the rules take the accent colour.

The four message colours

Group Appearance → Colours → States. Information, success, warning, error.

They do not derive from the hue, on purpose. These colours carry meaning, not identity: a site with a red accent does not have green error messages. They therefore do not move when you turn the hue slider.

Read this before changing them. These four fields are free, at the request of integrators - brand guidelines sometimes impose their own state colours. The consequence: accessibility is no longer guaranteed by construction on those four. The default values are verified; the ones you type are not. If you change them, check the contrast of the text against the matching pale background.

The pale message backgrounds stay fixed. A free background under free text means two unknowns for a single contrast ratio.

The shape variant

Group Appearance → Shape. A list of four:

ValueWhat it changes
BaseCorpus's own shape: frames, rounded corners, soft shadows, the 70% rule under headings.
FlatNo frame, no shadow, no rounded corners. Modules and cards are told apart by an alternate background.
No ruleHeadings are no longer underlined. Nothing else moves.
Flat and no ruleBoth at once.

This field changes no colour. The hue and the message colours stay as set above: shape and colour are two independent axes, and they combine freely.

The field lives in the style, not in the template. So you can create several styles - "Corpus - Default", "Corpus - Campaign pages" - give them different variants and assign them to specific menu items, in the Menu Assignment tab. A page can carry a variant while the others do not, without installing a second template.

Why a list and not checkboxes

You cannot set each frame, each shadow and each corner separately. This is deliberate: a site where every shape is set in isolation is no longer a variant of the template, it is another template - and nothing in it holds together any more. The set is decided; you choose between sets.

Group Appearance → Logo. A text, a tagline, an image, its dimensions, and two settings for the dark theme.

Left empty, the text and tagline fall back to the site name and its description from Joomla's global configuration. Choosing an image replaces the text.

This field is the logo text, not your organisation's name. It only drives what appears at the top left: you can put a short form, an acronym, or any other wording there. The footer's copyright line - "© 2026 …" - does not read it: it takes the site name from Joomla's global configuration, which names the legal entity. To change what appears next to the ©, that is where to go.

The logo in dark theme

An image knows nothing about the theme: a logo whose text is black stays black on a dark background, and becomes unreadable. Corpus offers two answers, and the right one depends on your file.

Your logo has a single colour. Set Logo colour to Site hue. Corpus then uses the file as a cut-out and paints it in the site colour: it follows the hue and the dark theme on its own. The trade-off: it becomes single-colour, a gradient or a second colour disappears.

Your logo has several colours. Leave Logo colour on Original colour and add a second file in Dark theme logo, with light text. Corpus swaps the file when the theme turns dark, and the logo keeps all its colours. The same happens inside a dark band placed in an otherwise light site.

Left empty, the same file serves both themes: that is how earlier versions behaved.

The favicon

Group Appearance → Favicon. One field, one image.

Until now the only way to change the site icon was to replace favicon.ico in the template folder, and to lose it again at every update. Not any more: the file chosen here is a setting, and it survives updates.

Use a square 512 px PNG. The browser scales it down on its own, and the same file serves as the home-screen icon on a phone.

Left empty, the favicon.ico shipped with Corpus keeps serving: the site is never without an icon.

An SVG works in browsers, but iOS cannot display one as a home-screen icon. In that case Corpus only sets the tab icon.

Joomla's media manager accepts neither .svg nor .ico by default. It is not Corpus refusing them: the list of allowed extensions is set in System → Global Configuration → Media, field Legal Image Extensions. A PNG avoids the question.

Sharing on social networks

Group Appearance → Sharing on social networks. One field, one image.

Paste your site address into Facebook, LinkedIn, WhatsApp, Mastodon or X and you get a card: an image, a title, a sentence. With no setting, that card was grey and empty. It was not a rendering fault: Joomla writes none of the tags the networks read, and the networks do not guess.

Corpus now writes them, and fills them in on its own:

  • the title of the page, stripped of the site name when Joomla adds it,
  • the description, the one you typed in the article or in the global configuration,
  • the address of the page,
  • the image, in this order: the shared article's own image, else the one in this field, else your logo if it is a JPG, PNG or WebP.

So there is only one thing to do: drop in the image that stands for your site. That is what people will see when they share the home page, a menu page, or anything with no image of its own.

Use a JPG or PNG of 1200 by 630 pixels. Below 600 pixels wide, Facebook falls back to a small square thumbnail instead of the wide banner. If the image carries text, check that it stays readable at half size: the networks scale it down without warning.

Nothing to consent to, nothing to declare. These are tags in the page, not scripts: Corpus loads no code from Facebook, sets no cookie and sends nobody's IP address anywhere. It is the network that comes and reads the page, later, when someone pastes the link on their side. Your consent banner therefore has nothing more to ask. See Cookies and consent.

An article shares its own image. The full image if there is one, the intro image otherwise, with its alternative text. A category, a contact and a tag page do the same. Nothing has to be typed twice.

A network keeps the old image for days. After a change, do not conclude too quickly that the setting does not work: each network caches what it read the first time. Facebook's and LinkedIn's sharing debuggers force a fresh read of an address.

If you already use an SEO extension that writes these tags, Corpus replaces nothing: each tag belongs to whoever set it first, and Corpus only fills the boxes left empty. You have nothing to switch off, there will never be two images competing, and an extension that forgets the image no longer leaves you with a grey card.

Light and dark themes

The site follows the visitor's system preference, and a Display settings button, at the right edge of the screen, lets them switch. Their choice is remembered in their browser.

You decide the theme of the first visit. Group Appearance → Starting theme, three values: System (the default), Light, Dark. A site that opens in dark is a legitimate stance; you just have to be able to take it.

This setting only decides the first visit. As soon as the visitor touches the Display settings button, their choice wins, on every page and on every return. Forcing dark therefore locks nobody in: it is a starting value, not a constraint.

You need do nothing else for dark mode to work, including with your hue: both sets of values derive from the same slider.

The error pages and the maintenance page follow the same theme as the rest of the site.

Typography

The Typography group deserves its own page: body font and heading font set separately, four possible sources, weight and size.

By default Corpus downloads no font and uses the visitor's system font. See Typography.

What cannot be set, and why

The type scale. The ratio between headings and body text is fixed, and no text goes below 16 px - including modules, cards, captions and small print. Descending hierarchy is carried by colour and weight, never by an unreadable size. Only a global enlargement factor is offered.

Spacing and the grid. They come from the design reference and are checked by tooling on every release.

Up to date for Corpus 2.1.684.