Colours and user.css

The background colours that Webal Layouts offers for a section or a row are the standard colours of Cassiopeia. If you want your own brand colours, you restyle those colours in one small file of your child theme, called user.css. This page shows the exact lines that we tested.

The colour choices

A section or a row has a setting called Background. Each choice prints one standard class on that band. Nothing else is printed: no style sheet and no style rules inside the page. Only a background picture adds one small style rule, as Background pictures and shades explains.

The editor marks the first seven as strong colour, and warns that links on them can be hard to read. In Cassiopeia, the colour Primary is a deep navy blue.

Where the file goes

Cassiopeia loads a file called user.css from the media folder of the template that the page uses. For the child theme in the package, the file is:

media/templates/site/cassiopeia_wbllayouts/css/user.css

For your own child theme, use its folder name in place of cassiopeia_wbllayouts. The file loads after the style sheet of Cassiopeia, so your rules can replace the standard ones. If the file does not exist, nothing is loaded. You make the file yourself, on your server, with FTP or the file manager of your host.

Webal Layouts never writes this file, and the package does not contain one. We installed an update on a site that already had a user.css in this folder, and the file was still there, unchanged.

Change a strong colour

Put these two lines in user.css, and replace the colour #6b2d5c, a deep plum, with your own, because it is only an example.

.text-bg-primary { background-color: #6b2d5c !important; }
.text-bg-primary a:not(.btn) { color: #fff; }

• The first line changes the colour of every section and row that has the Background Primary.
• The second line makes the links in the band white, so you can read them on your colour, while buttons keep their own colours.
• For the other strong colours, use the same two lines with the class name from the table: text-bg-secondary, text-bg-success, text-bg-danger, text-bg-warning, text-bg-info or text-bg-dark.

Change a soft colour

The four soft colours read their colour from a setting of Cassiopeia, and not from a fixed colour. Change the setting, written as three numbers for red, green and blue, with commas and no brackets.

:root {
  --light-rgb: 241, 233, 240;
}

With Webal Blocks installed and its dark styles for Cassiopeia switched on, a soft colour turns dark again on a dark page, as it does without your change. In our check, the page background and a card did not change either.

What else changes

You can also change the whole Primary colour by setting --primary-rgb in :root, for example --primary-rgb: 107, 45, 92;. That recolours the Primary band, but it also recolours everything else that uses the Primary colour in the same way: text, borders and links with the Primary classes. In our check it did not recolour the buttons, and it did not make the links inside the band readable, whereas the two lines above change the band only.

Check the contrast

Webal Layouts does not check your colours, because you choose them in your own file, so always look at the result.

• With the plum example, white text has a contrast of 9.74 to 1 against the band, and a white link has the same. Cassiopeia's own blue link on the plum band had only 1.28 to 1, which is why the second line is there.
• The standard colours are already close to the limit for white text. Standard Secondary gives 4.67 to 1, Success 4.59 to 1 and Warning 4.64 to 1. A lighter colour than these can make white text hard to read.
• In dark colours the strong colours stay as you chose them. A very dark colour on a dark page is hard to tell apart from the page. The plum band against the dark page had a contrast of only 1.84 to 1, so look at your colours in dark mode too.

Background pictures and shades

A section can also have a background picture, chosen with Choose a picture in its settings, from the pictures in the site's images folder. Upload the picture in Joomla's Media manager first. See Sections with rows and pictures.

Words over a photograph are often hard to read, because a photograph has light and dark parts. So the setting Shade over the picture lays a tint over it.

• With Dark, even a pure white picture becomes a mid grey under the tint, and white words on it keep a contrast of about 5.7 to 1, above the 4.5 to 1 that ordinary text needs.
• With Light, even a pure black picture becomes a pale grey, and Cassiopeia's dark words stay far above 4.5 to 1.
• The class of the shade also gives the section its colour while the picture loads, so the words are readable before the picture arrives. With a shade, the section's own Background colour is not used.
• A picture with the shade None gets a warning in Checks. Keep None only when nothing in the section is text.

The shade uses the classes text-bg-dark and text-bg-light, so if you restyle those classes in user.css, the colour that shows while the picture loads changes too. The tint itself is fixed. Webal Layouts does not measure the contrast of your pictures, so look at each one with its words, and look at a Light shade in dark colours too, if your site has a colour switch.

How we proved it

We tested this on Joomla 6.2.0. We have not checked it on Joomla 5.4, so we do not know whether it works there. We used a test site with the Webal Layouts child theme. We changed its user.css one rule at a time, loaded the page in Chrome, and read the colours that the browser computed. The browser asked for the file and received it. With the file missing, the browser did not ask for it. We then made the same test in a child theme of our own, Cassiopeia Extended, with a user.css in its own media folder, and the result was the same. We put every file back as it was when we finished.

Try it

1. On a test site, make the file user.css in the folder above, and put in the two lines for Primary.
2. In the editor, click a section, and set its Background to Primary. Press Publish.
3. Open a page that uses the layout. The section is plum, and its text and links are white.
4. Switch the colour mode to dark, if your site has the colour switch. The section keeps its colour.
5. Change #6b2d5c to your own colour, reload the page, and check the contrast again.

Related pages

• The Checks tab
• The Component, its sidebars and rows
• Sections with rows and pictures
• Dark styles and colour modes