[FIXED] How do I call custom.css in Prestashop 1.7?

Issue

I'm new to Prestashop 1.7. There's a css that I need to overwrite. I've written the css codes on custom.css that comes with Prestashop. When I refreshed the site, the custom css did not apply. There was no link rel pointing to the file.

I'd like to ask how I can call the custom.css. There's a stylesheets.tpl but I'm not sure what code to write.

Solution

You can add custom CSS & JS in the latest PrestaShop using setMedia() function which is located in the frontController as shown below:

PATH : mainDir/classes/controller/FrontController.php

public function setMedia()
    {
        $this->registerStylesheet('theme-main', '/assets/css/theme.css', ['media' => 'all', 'priority' => 50]);
        $this->registerStylesheet('theme-custom', '/assets/css/custom.css', ['media' => 'all', 'priority' => 1000]);

        if ($this->context->language->is_rtl) {
            $this->registerStylesheet('theme-rtl', '/assets/css/rtl.css', ['media' => 'all', 'priority' => 900]);
        }

        $this->registerJavascript('corejs', '/themes/core.js', ['position' => 'bottom', 'priority' => 0]);
        $this->registerJavascript('theme-main', '/assets/js/theme.js', ['position' => 'bottom', 'priority' => 50]);
        $this->registerJavascript('theme-custom', '/assets/js/custom.js', ['position' => 'bottom', 'priority' => 1000]);

        $assets = $this->context->shop->theme->getPageSpecificAssets($this->php_self);
        if (!empty($assets)) {
            foreach ($assets['css'] as $css) {
                $this->registerStylesheet($css['id'], $css['path'], $css);
            }
            foreach ($assets['js'] as $js) {
                $this->registerJavascript($js['id'], $js['path'], $js);
            }
        }

        // Execute Hook FrontController SetMedia
        Hook::exec('actionFrontControllerSetMedia', array());

        return true;
    }

Answered By - Sandeep kadyan

Answer Checked By - Cary Denson (PHPFixing Admin)