[#43264] - [6.0] Added CSS layer to template CSS files to lower specificity
- Closed
- 23 Apr 2025
- Medium
- Build: 5.1-dev
- # 43264
- Diff
- RickR2H:css-layer
- Pending continuous-integration/drone/pr Build is pending Details
User tests: Successful: Unsuccessful:
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
@layerproperty
@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
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
FWIW @layer was introduced on March 2022 universally on all 3 major engines (gecko/blink/webkit). Although the B/C promise is fulfilled (2 latest versions) this seems too early to adopt (especially for the front end template). 2 years is not that huge timeframe especially for the non tech people to update their OS/browsers.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2024-04-15 13:54:09 |
| Closed_By | ⇒ | RickR2H | |
| Labels |
Added:
NPM Resource Changed
PR-5.1-dev
|
||
Agreed that it's a bit early. I'll close the PR.
@RickR2H my comment wasn't supposed to be a show stopper but rather a hint to get some decision from the maintainers. Please reopen the PR and let's ask @laoneo, @LadySolveig and the other maintainers for some decision
| Status | Closed | ⇒ | New |
| Closed_Date | 2024-04-15 13:54:09 | ⇒ | |
| Closed_By | RickR2H | ⇒ |
| Status | New | ⇒ | Pending |
@dgrammatiko Thanks for the comment. I opened the PR again. I'll leave it for the other to decide.
This pull request has been automatically rebased to 5.2-dev.
| Title |
|
||||||
This pull request has been automatically rebased to 5.3-dev.
| Title |
|
||||||
| Labels |
Added:
Feature
PR-5.3-dev
Removed: PR-5.1-dev |
||
Could not apply this patch. Patch tester said: "There are no files to patch from this pull request. This may mean that the files in the pull request are not present in your installation."
@webfeuerflo Prebuilt Packages get deleted after some time. It needs someone having privileges to restart drone (?) to create them again.
@webfeuerflo Prebuilt Packages get deleted after some time. It needs someone having privileges to restart drone (?) to create them again.
@fgsw Yes, but the tester referred to patchtester. Anyway, I've triggered a branch update so packages should be available soon.
@webfeuerflo This PR cannot be tested with patchtester only as it also needs to re-compile js or css. It can be tested using a pre-built package, see https://docs.joomla.org/Testing_Joomla!_patches#Prebuild_packages
@richard67 You are right, i haven't noticed the mentioned Patchtester.
I have tested this item ✅ successfully on 559668a
I have successfully test this. (Pretty cool if I may say so)..
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/43264.
@RickR2H a heads up here, BS v6 will come with layers ootb but they split their code differently: twbs/bootstrap#41236
This pull request has been automatically rebased to 6.0-dev.
| Title |
|
||||||
Waiting for Bootstrap 6 to make a better solution
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2025-04-23 12:58:19 |
| Closed_By | ⇒ | RickR2H | |
| Labels |
Added:
PR-6.0-dev
Removed: PR-5.3-dev |
||
@RickR2H I assume you mean “difficult” and not “default”. Got hit by the spellchecker’s auto correction?