Public Forums 71,145 posts

[per4manz Friend per4manzJoin date: December 2017Posts: 3Downloads:7Uploads:0]

#1085610

I have read the T3 documentation as well as the forums regarding the use of custom.css to override compiled LESS files. I have placed a custom.css file in both locations below:

/templates/t3_blank/css/
/templates/t3_blank/local/css/

However, the custom CSS code fails to load. Is there an override switch in the administrator back-end I am missing to allow the custom.css file to load?

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1085659

Hi,

Kindly share the credentials of your site: URL, Admin + FTP account so I can take a look.

[per4manz Friend per4manzJoin date: December 2017Posts: 3Downloads:7Uploads:0]

#1085666

Alas, I wish I could. Am developing in my local environment right now. I can confirm it doesn’t load when looking at the page source. Additionally, if I modify head.php to emplicitly load the custom.css file, it does not load. It also doesn’t matter if I am using the bs2 or bs3 version of the template.

UPDATE:

I can see that the custom.css is written into one of the css files coming from the ‘/t3-assets/css/’ folder, but it doesn’t seem to be having any effect. For some of my code, it seems to be overridden by css code that follows it, but for others they do not appear to be being parsed at the browser level at all as I do not see them listed at all when I inspect the appropriate element.

• This reply was modified 6 years, 6 months ago by  per4manz.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1085750

Hi,

‘t3-assets’ folder contains the optimized css/js files only, you can go to Admin panel > Extensions > Templates > T3 Blank > General > disable option Optimize CSS & JS first

Then when you inspect element, you can see the exact css file you need to change.

With ‘custom.css’ file, it’s called via head block of template: root/templates/t3_bs3_blank/tpls/blocks/head.php

see this snippet of code:

<?php
// CUSTOM CSS
if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
    $this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css');
}
?>

Regards

[per4manz Friend per4manzJoin date: December 2017Posts: 3Downloads:7Uploads:0]

#1085881

Thanks for the replies.

I did see that block of code. Turning off optimization seemed to help greatly, but was still having a couple of descriptors overridden by css code that was loaded after custom.css. So I changed the name of the custom file to "z.css" and changed the head.php code to reference it and that appears to have solved everything.

I can see that in certain block php files that a css file is set to load after the head.php injection (i.e., home.php). I suggest that future iterations of the framework are designed to load custom.css absolutely last. I think it is much easier to have a single master css file for overrides than to have to edit several LESS files and recompile every time a change is made and more importantly, that the custom css is not overridden by css code loading after it.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1085936

Thanks for your suggestion.

LESS brings more advantages for development, but with people who are familiar with it. If you’re customizing LESS files, you should enable the Development Mode in template manager so you can see the change instantly, only compile when development mode is turned off.

Cheers!

[Author]

Posts