Fichier custom.css chargé dans header -> smart cache feuilles de style -> bug

[Yann74]

Bonjour  

 

Ma boutique sous Prestashop 1.6.1.1 est conçue avec le thème d'origine Prestashop (avec Bootstrap). 

 

Pour personnaliser ce thème, j'ai créé un fichier custom.css et enregistré dans le répertoire du thème /css.

 

Pour charger ce fichier, j'ai inclus le lien dans le ficher header.tpl comme suit :

{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
		<link rel="stylesheet" href="{$css_dir}custom.css" type="text/css" media="{$media}" /> 
		<link rel="stylesheet" href="{$css_uri|escape:'html':'UTF-8'}" type="text/css" media="{$media|escape:'html':'UTF-8'}" />
	{/foreach}
{/if}

Dans le back office, à Paramètres avancés -> Performance, si j'active ""Smart cache" pour les feuilles de style", et que je vide le cache Prestashop et le cache de mon navigateur, en rechargeant la home page, le fichier custom.css n'est pas chargé, si je désactive ""Smart cache" pour les feuilles de style", le fichier custom.css est à nouveau chargé correctement.

 

Avez-vous une idée d'où cela peut provenir ?

 

 

 

 

 

 

[Mediacom87]

Bonjour,

 

déjà vous mettez l'appel de ce fichier dans un foreach donc il sera répéter pour tous les fichiers css présent dans la configuration de base.

 

Donc si il y a 30 css vous passerez à 60 avec 30fois votre custom.css.

 

Sinon, la bonne pratique sur 1.6 si vous souhiatez rajouter votre css automatiquement et qu'il soit en plus bien traité par le smartcache, il faut déposer ce fichier dans le répertoire

default-bootstrap/css/autoload/

Ainsi il sera chargé automatiquement.

[Yann74]

Alors j'ai changé de place le fichier custom.css comme vous avez dit, je l'ai placé dans le dossier css/autoload, j'ai supprimé dans le header.tpl l'appel au fichier, et j'ai vidé les caches navigateur et Prestashop. 

 

Le fichier est bien chargé par mon navigateur, mais auparavant toute les modifications du custom.css fonctionnaient, maintenant dans mon css si je ne met pas un "!important" sur la quasi totalité des lignes, mes modifications ne sont pas prise en compte 

[Mediacom87]

la méthode de chargement ne change pas grand chose au résultat.

 

si vous devez mettre !importa partout c’est que vous avez un soucis sur vos sélecteurs car ils sont surcharger par d'autre css avant ou après ou forcé par des impoortant inutiles.

 

regardé dans Firbug ou outils développeur de votre navigateur ce qui surclasse vos css et adaptez les.

Edited October 22, 2015 by Mediacom87 (see edit history)

[Yann74]

Voilà ce que j'ai maintenant que j'ai déplacé le fichier custom.css :

 

 

La premier ligne correspond au CSS d'origine, la deuxième ligne correspond à ce que j'ai mis dans le custom.css. Avec l'ancienne méthode (qui n'était donc pas la bonne  ), mon CSS personnalisé surchargeait correctement celui d'origine, maintenant il passe en second plan. 

[Mediacom87]

Oui car votre fichier est chargé après la première modification sur exactement le même sélecteur.

 

Donc trouvez une définition de sélecteur de niveau supérieur pour corriger cela.

Edited October 22, 2015 by Mediacom87 (see edit history)

[Yann74]

Donc il faudrait que je revoie chaque ligne de mon CSS personnalisé qui n'est pas appliqué... 

 

Je me souvient que sur Wordpress, sur certains thèmes, il existe un fichier custom.css déjà installé dans lequel on peut mettre n'importe quel CSS, celui-ci sera automatiquement appliqué en priorité. 

 

Est-ce qu'il existe un moyen avec Prestashop d'indiquer que tel fichier CSS est prioritaire sur les autres ?

[Mediacom87]

Non.

 

Par contre pourquoi déplacer dans un fichier autre les modification à apporter dans le fichier parent global.css ?

 

après rajoutez body devant tout vos sélecteurs peut être que cela suffira.

[Yann74]

Ah je vois... En fait j'avais l'habitude de travailler sur Wordpress ou il faut travailler avec un thème enfant pour prévenir d'une mise à jour du thème qui pourrais effacer les modifications qu'on a faites. Je pensais qu'il fallait faire la même chose sur Prestashop : créer un fichier dédié aux modifications CSS pour qu'en cas de mise à jour du thème, on est juste à ré-intégrer le fichier de CSS personnalisé et vérifier que tout aille bien.

 

Ce n'est donc pas du tout la même chose sur Prestashop, je n'ai pas besoin de "centraliser" tout mes modifs sur le même fichier pour prévenir des mises à jour ?

[Mediacom87]

Pour prévenir les mises à jour il faut dupliquer le thème et le personnaliser.

 

je crois que tout est expliqué sur la doc

[Yann74]

Et bien merci, je vais voir tout ça