Adding CSS files to backend module configuration

[steinsgate]

Hi,

 

I am trying to correctly include some CSS files (or JS) to my module configuration in the backend so I can show styled content using a CSS file instead of inline style.

 

After some research I see there is a hook:

 

public function hookActionAdminControllerSetMedia($params)
{
// add CSS and Javascript required
Tools::addCss($this->_path.'/css/prestastats.css');
}

But it does not include my CSS, tried other code similar to that. But it does not work either.

 

Which is the correct way to include a CSS in our module configuration view in the backend ?

 

I cannot find anything specific in the docs, there is some examples to include JS in some sites, but I would like to include CSS.

 

Any advice will be welcome.

 

Kind regards

 

[Er.Ritesh]

Hello steinsgate

To add JS file to your tab in BO you have 2 options:

1. Add an ordinary <script> tag for your javascript file to your module's tpl file or html string you return from your hook, like this:

public function hookDisplayAdminProductsExtra($params){
return '<h1>My Module</h1><script type="text/javascript" src="'. $this->_path .'script.js"></script>';
}

2. Use the 'ActionAdminControllerSetMedia' hook, like this:

public function hookActionAdminControllerSetMedia($arr){
    $this->context->controller->addJS( $this->_path .'script.js' );
}
The advantage of the first approach is that your javascript file will only be loaded when your module's tab is loaded.

If you use the second approach you have to know that your javascript file will be loaded on EVERY page in the BO. However, this can be further restricted if you want to, like this:

public function hookActionAdminControllerSetMedia($arr){
    if( strtolower(Tools::getValue('controller')) == 'adminproducts' && Tools::getValue('id_product'){
        $this->context->controller->addJS( $this->_path .'script.js' );
    }
}
 

Edited January 6, 2014 by Er.Ritesh (see edit history)

[steinsgate]

Hi,

 

Thanks for your reply, however, that is not working for me:

   $this->context->controller->addJS( $this->_path .'script.js' );

That is ignored for some reason. I already tried.

 

I want to add CSS, not Javascript, and it is not correct to simply put a link somewhere in the output for display, I tried that already and did not work.

 

In my module, I do not hook any visible part on the frontend, what I want to style is just the "configure" screen of the module.

 

At the moment, I do not have a specific tab in any part of the backend, just the module installation and configuration.

 

Any ideas ?

 

 

 

 

 

 

 

Hello steinsgate

To add JS file to your tab in BO you have 2 options:

1. Add an ordinary <script> tag for your javascript file to your module's tpl file or html string you return from your hook, like this:

public function hookDisplayAdminProductsExtra($params){
return '<h1>My Module</h1><script type="text/javascript" src="'. $this->_path .'script.js"></script>';
}

2. Use the 'ActionAdminControllerSetMedia' hook, like this:

public function hookActionAdminControllerSetMedia($arr){
    $this->context->controller->addJS( $this->_path .'script.js' );
}
The advantage of the first approach is that your javascript file will only be loaded when your module's tab is loaded.

If you use the second approach you have to know that your javascript file will be loaded on EVERY page in the BO. However, this can be further restricted if you want to, like this:

public function hookActionAdminControllerSetMedia($arr){
    if( strtolower(Tools::getValue('controller')) == 'adminproducts' && Tools::getValue('id_product'){
        $this->context->controller->addJS( $this->_path .'script.js' );
    }
}
I'm attaching an updated sample module with both solutions.

Edited January 6, 2014 by steinsgate (see edit history)

[El Patron]

for css you would do it this way:  this is an example of a module for 1.4 and higher

	public function hookHeader()
	{
			if (substr(_PS_VERSION_, 0, 3) == '1.4') 
				Tools::addCSS(($this->_path).'YOUR.css', 'all');
			else
				$this->context->controller->addCSS(($this->_path).'YOUR.css', 'all');
	}

[vekia]

it's related to back office, not front

    public function hookBackOfficeFooter($params){
        $this->context->controller->addCSS('myfile.css');
    }

[steinsgate]

Does not seem to work either, that is pretty much the same as I did though, 

 

 hookActionAdminControllerSetMedia($params) 
 

 (hook to set media)

 

Tools::addCss($this->_path.'/css/prestastats.css');
 

(add css using helper, since context did not work)

 

 

I tried refreshing,etc. Is there a way to see if there was an error including the file maybe ? it is not in the source of the HTML, and I am forcing template compilations (that should not be needed I suppose for the backend).

 

 

it's related to back office, not front

    public function hookBackOfficeFooter($params){
        $this->context->controller->addCSS('myfile.css');
    }

[vekia]

no, it's not the same

moreover it's first time when i see something like  hookActionAdminControllerSetMedia($params)  

 

moreover Tools::addCss() is deprecated in prestashop 1.5

[steinsgate]

Hi Vekia, thanks for your reply (again)

 

Good to know its deprecated, unfortunately there is lot of stuff using it, and I do not remember to see a warning message... but its ok, I will not use it even if it worked, which is not the case.

 

Regarding: hookActionAdminControllerSetMedia  maybe that is the problem, that there is no formal documentation on that. But other people appear to be using it, as you have in the link in my initial post.

 

Can anyone workout a sample module that simply includes a CSS file ? I think it may be VERY useful for many people and will save lot of time in something that should be extremely simple. I will appreciate the minutes involved in such task, and test properly here.

 

I am still trying to figure out how to make any of the examples proposed to work, as for now... they do nothing. 

 

Regards

 

 

 

no, it's not the same

moreover it's first time when i see something like  hookActionAdminControllerSetMedia($params)  

 

moreover Tools::addCss() is deprecated in prestashop 1.5

[steinsgate]

it is not solved because I stated "the correct way", however I got my styles in the page doing:

 

public function getContent()
{
// display information about 
$details = ' <link href="'.$this->_path.'css/file.css" rel="stylesheet" type="text/css">
<div class="information"> 
         This is information
</div>
<div class="video">
         This is video
</div>';


   return $details;
}

But it is not the way I would like to include my CSS. Must be a correct way using Prestashop methods, to include in the header or in the footer.

[El Patron]

the problem you are having is not being able to search your prestashop installation for 'like' code.

 

being able to search existing modules and other source really makes development less tedious for everyone.

 

what is your development (editor tools) environment?  for example I use dreamweaver search 'often'

[steinsgate]

Hi,

 

Thanks for your reply El Patron.

 

I do not really understand what you mean.

 

However, here is my details:

 

• Using prestashop version 1.5.3.1
• Using Sublime Editor, VIM, Netbeans (for that project, Sublime, just for fun), with UTF-8 enabled.
• Using Debian as operative system. Linux 2.6.32-5-amd64
• Git.

 

 

If you mean that the code I am adding is not effective, I can tell than when I add a div, the div appears, and so on. Also, I could add the CSS file and have it working (as I mention in my previous post).

 

The problem now is that, it works, but not the correct way. I would like to know how to include it using the prestashop methods.

 

Kind regards

 

the problem you are having is not being able to search your prestashop installation for 'like' code.

 

being able to search existing modules and other source really makes development less tedious for everyone.

 

what is your development (editor tools) environment?  for example I use dreamweaver search 'often'

[Guest]

Bonjour, des années aprés 🙂 avez vous trouvez une solution mieux adapté ?

Hi do you found a solution ?

 

[20bekhar]

Hi

In PageSpeed Insights & webmaster I have a big problem in mobile load time.

Remove unused CSS -  Eliminate render-blocking resources are the problems that I have in this link:

https://20bekhar.com/themes/ZOneTheme/assets/cache/theme-010ee6223.css

But I do not know How I can fix this problem.

Speed Index in my mobile is over 4 second but in desktop between 1 to 2.

please help me to solve the speed of my website in any case that you are able.

Regards;

 

 

[Kogkalidis]

On 1/6/2014 at 4:09 PM, vekia said:

it's related to back office, not front

    public function hookBackOfficeFooter($params){
        $this->context->controller->addCSS('myfile.css');
    }

@vekia I dit it by calling

$this->context->controller->addJS(
	_PS_MODULE_DIR_ . '/mymodule/views/js/admin/main.js',
    'all'
);

in the function named ”displayForm” instead of your solution in order to preserve perfomance.

I do not need it loaded outside of the module configuration form.
 

My 2c 😎

Edited September 2, 2022 by Kogkalidis
TYPO (see edit history)