Custom SCSS in variable_overrides.scss is not being applied after compilation #241
Description
Hello Astroid Team,
I'm facing a very stubborn issue with styling the Joomla tags on my website. The tags are rendered as buttons with the .btn and .btn-info classes. My goal is to apply completely custom styling to them (background, color, padding, hover effects).
I am using Joomla 5.3.2 and Astroid Framework v2.6.4.
I have already tried every standard and advanced method to apply custom CSS, but none of them work. The default .btn-info style generated by the framework always wins.
Here is what I have tried without success:
- Adding custom CSS to the "Custom CSS" field in the Astroid Template Options.
- Creating a
custom.scssfile in/media/templates/site/astroid_template_zero/scss/. - Creating a
variable_overrides.scssfile in the same directory and trying to override the styles for the.btn-infoclass directly. - Even programmatically injecting a
<style>block into the document<head>using a custom plugin with theonBeforeCompileHeadevent.
After each attempt, I re-saved the template options to trigger SCSS compilation and cleared all Joomla caches, but the custom styles are not applied. It seems the compiled Bootstrap styles always have the final say.
My latest attempt was to put the following code in variable_overrides.scss, as per the documentation, but it had no effect on padding, hover, etc.:
.article-tags .btn.btn-info {
background-color: #f5f5f5;
color: #000;
border: 1px solid #ddd;
&:hover {
background-color: #c00000;
color: #fff;
transform: translateY(-2px);
}
}
Could you please advise on the definitive, correct way to completely override the styling for a default Bootstrap component like .btn-info in Astroid? Is there another mechanism or a setting that might be preventing my overrides from being applied?
Here is a link to the page with the tags:
https://wisniewski.smarthost.pl/karate-nowa/index.php/przeglad-aktualnosci/ogolnopolska-akcja-prewencyjna-bezpieczne-dziecko-turek-2003
Thank you for your help.