Override fichier css d'un module

[kent1]

Bonjour,

 

Je viens d'installer la dernière version de Prestashop (1.5.0.13) et je ne parvient pas à utiliser l'override de mes modules.

 

Je m'explique :

=> Je souhaitertais créer un css différent pour le module Blocksearch

=> J'ai donc créer donc mon thème un dossier /override dans lequel j'ai créé un dossier /modules dans lequel j'ai créé un dossier /blocksearch qui correspond au nom de mon module.

=> J'ai ensuite placé le fichier css blocksearch.css dans ce dossier et j'ai envoyé le tout en ligne

=> Ce qui donne le chemin complet :

/themes/mon_theme/override/modules/blocksearch/blocksearch.css

 

Mais malheuresement, le fichier css pris en compte est celui d'origine :

/modules/blocksearch/blocksearch.css

 

 

Comment faire pour cabler mon nouveau fichier css ??

 

Peut-être devrait-je modifier dans mon fichier blocksearch.php l'appel suivant :

$this->context->controller->addCSS(($this->_path).'blocksearch.css', 'all');

 

 

Merci d'avance pour vos réponses.

 

Cordialement, Quentin.

[OSFormation]

Bonjour Quentin,

 

voyant que c'est votre premier post, je voudrais juste rappeler au cas où que la version 1.5 c'est pas encore stable. et que pour un site en production il vaut mieux utiliser la version 1.4.8.2 (branche 1.4). Mes excuses si vous le savez déjà.

 

Cela dit, pour personnaliser le css d'un module il faut:

1. créer un dossier modules dans le dossier css de votre thème
   
2. dans ce dossier modules créer un dossier nommé du nom du module à personnaliser
   
3. y ajouter un fichier css (même nom que l'original)
   

Par exemple si vous voulez personnaliser le css de ce module :

/modules/blocksearch/blocksearch.css

 

alors vous devez créer:

/themes/mon_theme/css/modules/blocksearch/blocksearch.css

 

Fredj

[kent1]

Merci pour votre réponse Fredj cela fonctionne parfaitement.

 

J'ai déjà monté un site sur la version 1.4 de prestashop mais je n'avais jamais poster sur le forum, ce qui explique que ce soit mon premier post.

 

 

Pour utiliser l'override sur un fichier tpl d'un module, quelle serait la marche à suivre ?

[OSFormation]

Le principe est à peu près le même, par exemple pour :

/modules/blocksearch/blocksearch.tpl

vous devrez avoir :

/themes/mon_theme/modules/blocksearch/blocksearch.tpl

 

Aussi pour overrider les fichier javascript, si on a :

 

/modules/blocksearch/blocksearch.js

alors vous devez avoir :

/themes/mon_theme/js/modules/blocksearch/blocksearch.js

 

Remarque: parfois un fichier .js ou .css est inclus dans un sous dossier du module. Vous devez alors copier le dossier conteneur :

/modules/blocksearch/asset/blocksearch.js

/modules/blocksearch/css/blocksearch.css

nous donne respectivement:

/themes/mon_theme/js/modules/blocksearch/asset/blocksearch.js

/themes/mon_theme/css/modules/blocksearch/css/blocksearch.css

 

Fredj

Edited June 17, 2012 by OSFormation (see edit history)

[kent1]

D'accord, ça fonctionne nickel !

 

Merci beaucoup pour votre aide.

[Yannkee]

D'ailleurs, c'est vraiment curieux de changer la structure des dossiers, pourquoi la team de PS n'a-t-elle pas pu garder la hierarchie des elements des modules (css, js, tpl...) dans le dossier du theme ?

[Atch]

Oui j'ai vu que sur le theme défaut de la 1.5 les css modules ont disparu...

 

hmm se serait cool une doc pour expliquer le nouveau système retenu par prestashop...

 

V++

 

Atch

[Prestadget]

Un petit script PHP à lancer en console ou depuis le web pour copier les tpl, JS et CSS des modules dans ton dossier thème, pour l'utiliser il suffit de changer les valeurs des chemins au début :

 

<?php

$source = '/home/tom/WWW/prestadget15017/modules';
$target =  '/home/tom/WWW/prestadget15017/themes/t';

$handle = opendir($source);

while (($entry = readdir($handle)) !== false)
{
	$moduleDir = $source.DIRECTORY_SEPARATOR.$entry;

	if ($entry !== '.' && $entry !== '..' && is_dir($moduleDir))
	{
	   parseModuleDir($entry, $entry);
	}
}

closedir($handle);

function parseModuleDir($moduleUri, $moduleName)
{
	global $source, $target;

	$modulePath		   = $source.DIRECTORY_SEPARATOR.$moduleUri;
	$handleModuleDir = opendir($modulePath);

	//echo 'Scan '.$modulePath.PHP_EOL;

	 while (($entry = readdir($handleModuleDir)) !== false)
	 {  
		if (strpos($entry, '.css') !== false)
		{
			echo '  + '.$moduleUri.' -> '.$entry.PHP_EOL;

			if (file_exists($target.'/css/modules/'.$moduleUri) === false)
			{
				mkdir($target.'/css/modules/'.$moduleUri, 0777, true);
			}

			copy($modulePath.'/'.$entry, $target.'/css/modules/'.$moduleUri.DIRECTORY_SEPARATOR.$entry);
		}
		elseif (strpos($entry, '.js') !== false)
		{
			echo '  + '.$moduleUri.' -> '.$entry.PHP_EOL;

			if (file_exists($target.'/js/modules/'.$moduleUri) === false)
			{
				mkdir($target.'/js/modules/'.$moduleUri, 0777, true);
			}

			copy($modulePath.'/'.$entry, $target.'/js/modules/'.$moduleUri.DIRECTORY_SEPARATOR.$entry);
		}
		elseif (strpos($entry, '.tpl') !== false)
		{
			echo '  + '.$moduleUri.' -> '.$entry.PHP_EOL;

			if (file_exists($target.'/modules/'.$moduleUri) === false)
			{
				mkdir($target.'/modules/'.$moduleUri, 0777, true);
			}

			copy($modulePath.DIRECTORY_SEPARATOR.$entry, $target.DIRECTORY_SEPARATOR.'modules'.DIRECTORY_SEPARATOR.$moduleUri.DIRECTORY_SEPARATOR.$entry);
		}
		elseif ($entry !== '.' && $entry !== '..' &&  is_dir($modulePath.DIRECTORY_SEPARATOR.$entry))
		{
				parseModuleDir($moduleUri.DIRECTORY_SEPARATOR.$entry, $moduleName);
		}
	 }

	 closedir($handleModuleDir);
}

 

Edit : j'ai rajouté une récursivité si le module à des sous dossiers, attention, les images du modules ne sont pas déplacées, à vous d'ajuster les CSS à la main par la suite ou de modifier le script pour importer aussi les images.

 

PS: note aux dév. de Prestashop, optez pour un moyen "Je génère mon cache" style Symfony2 plutot que de checker à chaque fois si le fichier existe dans le dossier du thème ;-( c'est juste horrible ^^

Edited September 27, 2012 by Prestadget (see edit history)