Astuce pour appliquer une propriété CSS (commune à toutes les pages) à UNE page en particulier

[vins]

Bonjour,

Ce post s'adresse aux développeurs sous Prestashop... désolé pour les autres (si besoin de plus d'explication me contacter!)
Voilà j'utilise une petite astuce pour appliquer une propriété css à une page et uniquement cette page.
Avec un exemple ce sera plus clair:
Admettons que je veuille que la propriété css "center_column" définie dans global.css soit différente dans la page product.php alors je crée un module acrroché à un hook de cette page (par exemple le hook extraLeft) qui appelle une feuille css dans laquelle je définit la propriété center_column differrement...


C'est trés pratique si l'on veut customizer Prestashop à sa guise.
Voici un exemple de module que j'utilise pour notre site. Il me sert à redéfinir la largeur de la colonne ""center_column" dans la page product.php.
Ceci n'est qu'un exemple et ne doit pas être utilisé tel quel... c'est juste pour comprendre la méthode.
Voilà, si vous avez des questions n'hésitez pas réagir, je vous répondrai avec plaisir.
@plus.

blockpixoapplycssonproductpage.zip

[Ehinarr]

Il n'a pas fonctionné. Tout les blocs, tanto du centre, comme de la droite, ils ont été déplacés en bas des blocs de la gauche.

It did not function. All the blocks, as much of the center, as of the right, they had been moved for below of the blocks of the left.

[vins]

Ce module n'est pas utilisable tel quel comme je le dis dans mon post initial. Il a été donné pour la méthode

[Cédric Girard]

Oui

En fait c'est une surcharge CSS ;-)

En tout cas ça fonctionne très bien. On peut aussi (pas testé mais doit fonctionner) appliquer des mises en forme spécifiques directement dans global.css, car toutes les pages sont nommées.

Par exemple une page affichant une catégorie a la balise BODY identifiée par l'ID CSS "category".

On peut donc définir les CSS comme suit :

/* style qui s'appliquera par défaut à toutes les pages */
#center_column {
   width: 556px;
   margin: 0 0 30px 0;
}


...

/* à écrire APRÈS les lignes ci-dessus : style spécifique pour la page catégories */
#category #center_column {
   width: 756px;
   margin: 0 0 30px 0;
}

On peut faire de même avec de nombreuses pages : "product" pour page produit, "index" pour la page d'accueil, etc...

[vins]

Salut,
Je viens de vérifier le global.css et la page category.tpl que tu cites en en exemple... Je ne pense pas que ta méthode fonctionne (pas testé aussi) car tu n'as pas de

qui englobe tout le code de la page .tpl. Donc tu ne pourras pas surcharger ton css de cette façon.
L'inconvéniant de ma méthode, c'est qui'l n'existe parfois pas de hook dans la page que tu veux surcharger... soit... et bien je me suis créé un module (installé au tout début de l'install de Presta) qui m'installe tous les hooks dont j'ai besoins dans la table ps_hook (j'ai au pararavent bien sur, placé ces hook aux endroits qui vont bien dans le .php et le .tpl) C pratique.

A plus

[Cédric Girard]

En fait l'ID n'est pas sur une balise DIV mais sur la balise html BODY ;-)

[vins]

Génial ! J'avais pas fais attention que chaque page comprenait son body avec son id propre ! Ca c'est une trés bonne nouvelle pour la customisation de presta... sans tout casser du global.css existant.
En fait je cherche par tous les moyens à personnaliser comme je l'entends mon site en essayant de toucher le moins possible au code presta. En effet, mes fichiers étant connectés au SVN, j'ai planifié de mettre à jours ces mêmes fichiers au moment de la sortie de chaque version. Et pour que cela se passe sans trop de casse il faut éviter de casser la structure du code.
Avec ta remarque fort judicieuse, je vois donc cette méthode pour customizer le theme existant:
1. Créer un module qui accroche ta "surcouche CSS" au hook {$HOOK_HEADER} présent dans le header.tpl.

2. La "surcouche CSS" serait un simple appel vers des fichiers CSS contenus dans un rep "/css" du module et il faudrait pour plus de clarté creer un fichier CSS pour chaque page que l'on souhaite customizer. Ou un seul c'est au choix...

Bon j'ai pas testé mais cela marche c'est quasiment sûr !
Qu'en penses-tu ?

[Cédric Girard]

Je pense que oui

Pour ma part je me pose plus de questions quant au fait d'afficher/masquer les colonnes selon les pages (sans passer par les CSS... car sinon cela alourdit inutilement le code de la page chargée...) mais bon, c'est un autre débat ;-)

[vins]

PEux tu préciser, je ne vois pas ce que tu veux dire par là

[Cédric Girard]

En fait j'aimerais simplement pouvoir (par exemple) n'avoir que deux colonnes en page d'accueil et sur les pages type CMS, et trois colonnes sur les pages produit et catégorie.