Overriding the Cassiopeia template CSS can be sometimes difficult because of the long class selectors. Encapsulating the default styling in a layer, resets the specificity making CSS changes via the user.css much more pleasant and easy.

Summary of Changes

Added a layer to the CSS

Testing Instructions

• After installation install the demo blog content
• Create a user.css in: media/templates/site/cassiopeia/css/user.css
• Add the code below.

nav span,
nav a,
nav button {
    color: green;
}

• Visit the frontend of the site and look at the menu navbar on top of the site.
• Only the sub menu items in the dropdown are changing color due to specificity issues.
• Apply the patch and build the CSS
• Now all links have changed color.
• An easier wat to test without building the CSS, is to open the template.min.css and encapsulate the code with an @layer property

@layer template {
/* Template CSS code goes here */
}

Actual result BEFORE applying this Pull Request

Not all links in the navbar are colored green. Only the ones in the dropdown.

Expected result AFTER applying this Pull Request

All links are colored green and layer is added to the browser inspector.

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed