How does css/template.css file in the template work exactly?

destroy666

I noticed bunch of CSS that I want to change can be found there and nowhere else, at least not in other files and not in Joomla custom style admin panel. Editing it does nothing. Some CSS was/is also based on Joomla language for whatever reason, e.g. Polish has some CSS and German not.

I assume it's combined and modified by something, but by what exactly? From where does it pull all the CSS?

I am using JCH Optimize if that matters, but that produces some other cached files.

saguaros

destroy666 Hi

If you're in development stage, you should disable CSS combination feature in JCH Optimize extension so you can know exact file that the css rule is declared.

If you find a css rule declared in template.css file, you can override it in custom code section of template. With T4 based template, you can add into custom code section in backend or this file:

ROOT/templates/your_t4_based_template/local/css/custom.css (create this file if it doesn't exist now).

destroy666

Yeah, but the question is where some styles can come from and why e.g. they differ per language. It's also a problem on the production environment. I know I could in theory override everything in custom CSS with !importants, but I'd like to identify why it works like that to avoid problems and language inconsistencies in the future.

I searched through entire website project and still can't find some. Examples:

I couldn't get to any file with
#t4-header .container { padding-top: 1.15rem; padding-bottom: 1.15rem; }
after turning off JCH and all the possible minimizing Ican find, it still points to template.css in dev tools
some t4-offcanvas-toggle main menu hamburger icon per resolution media CSS completely disappeared at some point, no idea why

saguaros

destroy666 You're enabling JCH so I'm not sure how you want to achieve.

You can share the super admin account and tell me how you want it should be so I can help.

destroy666

Of course I'm enabling JCH on production. It's not supposed to be disabled on a live website which is supposed to be fast.

Locally with disabled JCH the CSS just points towards template.css file as I mentioned. I can provide you temporary access, but not sure what you'd like to check. I solved the problems through other means as of now. I'll give more accurate info about another similar one tomorrow.

saguaros

destroy666 Let me know if you need any further help then 🙂

destroy666

@saguaros sorry for delay.

I found 2 other CSS examples that are unfindable to me:

.article-info dd:after, which adds some random ??? to article association list.
.breadcrumb-item+.breadcrumb-item::before, which adds / to breadcrumbs

Again, can't find those anywhere outside template.css, to which dev tools link without JCH enabled. And it's easy to get around them with !important, I'd just really like to know why these definitions exist in that file.

EDIT: as for the weird ???, that looks like JCH bug, as it's some dash Unicode character normally without it.

saguaros

destroy666 You can share me the URL of the page + super admin account so I can take a look.

destroy666

I included admin account. This is an example of URL with mentioned issues:
https://lenkraddesign.eu/oferta/kierownice-samochodow-ciezarowych

Please don't change any CSS etc. - only tell me where it resides.

dominic

Hi destroy666,
I have checked your site and didn't change any CSS code. I only enabled and disabled the "Enable Combine Files" option to test the site.
The issue arises when combining CSS files. You can find the problematic CSS lines in the file: templates/kiercenter/local/css/template.css:

.breadcrumb-item + .breadcrumb-item::before at lines 3623 and 11329
.article-info dd:after at line 16345

destroy666

Thanks for checking, this is what I knew though. Why are these part of that file and how does the file work are the questions. As it seems to be updated automatically and pull CSS from some places. Where is this pulled from? Why can it differ per language?

EDIT: I really don't get this file. I edited it again, unminified it and removed the breadcrumb thing, also all duplicates which I'm not sure why they are or were there. I completely disabled JCH. I used fresh portable Tor Browser with no cache or anything. The breadcrumb CSS was still there. This is not a problem whenever I edit any other CSS/SCSS file in this template.

EDIT2: fixed the file by removing random @page print definition that also messed up random CSS tools. Still wondering what this file is and how it works, also why it was so messy in terms of duplicates.

destroy666

And the file got redestroyed into previous complete mess when I recompiled SCSS in site template settings and cleaned cache. So that was only temporary solution. Understanding where this file gets all the CSS from is crucial for fixing the issue, as expected.

destroy666

According to this, it's just a compiled SCSS file (although English here isn't perfect): https://www.joomlart.com/documentation/t4-framework/css-scss-customization But there's no file that has the mentioned classes in SCSS. So I'm not sure if that's all there's to it. Or maybe there's some SCSS outside the template folder. But where?

Any hints @saguaros @dominic, please?

dominic

Hi destroy666,
I'm checking your site.

dominic

Hi destroy666,
I noticed that you are using an older version of our software. We have recently released version 2.1.2, and I recommend updating to take advantage of the latest features and improvements.

Additionally, I see that you have created the file /templates/kiercenter/local/scss/template.scss and this file imports many SCSS files, which compiles into /templates/kiercenter/local/css/template.css.

To override the CSS, you have two options:

1/ Without Sass (Recommended): Remove the SCSS folder and add your custom CSS directly to /templates/kiercenter/local/css/custom.css.

2/ With Sass: If you are familiar with Sass, you can remove the file importing in the /templates/kiercenter/local/scss/template.scss file and add your code to this file. After making your changes, navigate to Dashboard > Systems > Site template styles > your template > Tools > Edit custom SCSS, then click the "Save & Compile" button.

Please choose the method that best fits your needs.

destroy666

Thanks dominic , I will try to update, although with the current mess I think some styling will be lost.

I did not create such file. If it's not default, although I've seen it listed on the website above (https://www.joomlart.com/documentation/t4-framework/css-scss-customization), someone before me did. It imports many files indeed, but I could not find any file with definitions above, I checked I think all of the imports. Hence my confusion about things like .breadcrumb-item + .breadcrumb-item::before that only occur in that compiled file.

Let me try asking a different question - where can I find PHP or any other backend code related to SCSS compilation? Maybe that will shed some light

dominic

Hi destroy666,
In the /templates/kiercenter/local/scss/template.scss file, import the Bootstrap styles with the following line:

// Bootstrap styles.
@import "../../scss/bootstrap";

From the templates/kiercenter/scss folder, import all the Bootstrap files using:
@import "../../../plugins/system/t4/themes/base/vendors/bootstrap/scss/_breadcrumb";
To proceed, you should remove the local/scss folder. Please ensure you back up this folder before deleting it.