How does a module call a css file in the theme folder?

[bluecafe]

Hi experts, if I have installed a module that doesn't have a css folder within the theme folder and I want to make some css changes but don't want to apply the changes to the module file directly ... how can I make a module looking in the themefolder for a css file (as the standard prestashop modules do?).

Hope somebody can give me a tipp. Thanks in advance.

[jhnstcks]

Try adding

  public function hookHeader()
{
Tools::addCSS(($this->_path).'yourcategoryname.css', 'all');
}

to the php file of your module.

[bluecafe]

Thank you! I will go ahead an try this out.

[babu_babu]

Any success?

[bluecafe]

Not yet ... I tried with the nivo slider module and looked for the hook function

	function hookHome($params)
 {

	   global $cookie;
	/* Languages preliminaries */
	$defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$languages = Language::getLanguages();
	$iso = Language::getIsoById($defaultLanguage);
	$isoUser = Language::getIsoById(intval($cookie->id_lang));

	  if (file_exists(dirname(__FILE__).'/'.$isoUser.'links.xml'))
		  if ($xml = simplexml_load_file(dirname(__FILE__).'/'.$isoUser.'links.xml'))
		  {
			   global $cookie, $smarty;
			$smarty->assign(array(
				'xml' => $xml,
				'this_path' => $this->_path
			));
			return $this->display(__FILE__, 'slideric.tpl');
		}
	return false;
 }

 

Here I added

 

 Tools::addCSS(($this->_path).'slideric.css', 'all');

 

so that the function reads

 

	function hookHome($params)
 {
 Tools::addCSS(($this->_path).'slideric.css', 'all');
	   global $cookie;
	/* Languages preliminaries */
	$defaultLanguage = intval(Configuration::get('PS_LANG_DEFAULT'));
	$languages = Language::getLanguages();
	$iso = Language::getIsoById($defaultLanguage);
	$isoUser = Language::getIsoById(intval($cookie->id_lang));

	  if (file_exists(dirname(__FILE__).'/'.$isoUser.'links.xml'))
		  if ($xml = simplexml_load_file(dirname(__FILE__).'/'.$isoUser.'links.xml'))
		  {
			   global $cookie, $smarty;
			$smarty->assign(array(
				'xml' => $xml,
				'this_path' => $this->_path
			));
			return $this->display(__FILE__, 'slideric.tpl');
		}
	return false;
 }

 

But no css was added. Will have to dig into this deeper ...

[jhnstcks]

Sorry my mistake missed some code out.

 

It should have its own hook not added to another hook.

 

  public function hookHeader()
{
Tools::addCSS(($this->_path).'yourmodulename.css', 'all');
}

 

I presume you have also added the css file to the relevant folder, that being root/themes/css/modules/yourmodule/your odulename.css

 

Edit: Adding the css to the global.css file will have the same results

[bluecafe]

Thank you John, this looks logical that hookHeader is the css hook. Unfortunately it doesn't seem to work. I added

public function hookHeader()
   {
       Tools::addCSS(($this->_path).'slideric.css', 'all');

   }

 

I placed a css file in the themes css/modules/slideric/ folder, cleared the cache, reinstalled the module but unfortunately the additional css won't be loaded (and there is no reference link in the source code).

 

If I click on modules => position the module isn't listed in "header of pages" hook position either. The other modules loading an additional css file via hookHeader are listed in the "Header of pages" position. There must be something I am doing wrong, if I only knew what ...

[jhnstcks]

You will need to uninstall and then install the module again for it to activate the hook.

[bluecafe]

Yes I did this, I even deleted the module and reuploaded it. There must be something else I am missing ...

I will try with another module to see if the problem is module related. Thanks for your support.

[bluecafe]

Ha ... got it !!!

I had to add

OR !$this->registerHook('header')

to the install function.

 

This was the original install function which didn't mention headerHook

function install()
{
	if (!parent::install() OR !$this->registerHook('Home'))
		return false;
	return true;
}

I added OR !$this->registerHook('header') so that it reads

function install()
{
	if (!parent::install() OR !$this->registerHook('header') OR !$this->registerHook('Home'))
		return false;
	return true;
}

 

Now it works! Thanks again, John, for pointing me to the right direction!

[jerri69]

Hi

I tried to apply this to the blocktopmenu module and it almost works...

 

after reinstall my page loads first themes/mytheme/css/blocktopmenu/mycss.css and then the original css file which replaces my css file and covers my changes.

 

do You know how to replace an order of applying css files?.

[jhnstcks]

Hi

I tried to apply this to the blocktopmenu module and it almost works...

 

after reinstall my page loads first themes/mytheme/css/blocktopmenu/mycss.css and then the original css file which replaces my css file and covers my changes.

 

do You know how to replace an order of applying css files?.

 

Just remove or comment out the code in your original file, that will stop it overriding your new file.