Change ordering of loading css files in T3 template

Question

I'm using JoomlaArt template. That template was built on T3 Framework.

They have a integrated way of adding custom CSS file and it is pretty simple. Everything what needs to be done is to add custom.css file to /your_template/css folder.

That file is loaded in head.php by following code:

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

But, problem for me is because that file was first and I need it to be loaded as last css file.

http://prntscr.com/a9fmea

I don't have idea where do I need to do that. Any advice is welcome.

Thanks

Answer 1

Hello Haris and welcome to JSE. The biggest problem you are going to have if you modify any of the template files in order to change the load order is that updating your template in the future will revert your changes. A easy way to accomplish this would be to add a style declaration before the page finishes loading.

1. Save your custom CSS file to the root of your site instead of in the css folder so your template doesn't pick it up automatically.
2. Install Flexi Custom Code Module from the JED.
3. Set the module position to the debug position for your template and hide the module title
4. Turn off CSS, HTML, and Javascript cleanup
5. enter the code below into the custom code box

---

<?php
  $doc = JFactory::getDocument();
  $doc->addStyleSheet(JUri::root() . 'templates/YOUR_TEMLPATE/css/custom.css');
?>

That code should put your custom.css file in the head section of the site as the last CSS declaration.

Answer 2

T3 should be loading the custom.css file last.

As a work around, try EasyScript which is free and which I have used successfully for this purpose.

An important advantage of using EasyScript or similar over a core hack is that your changes will survive future updates.