Modification css sur trois pages.

[Field]

Bonjour,

 

 

Tout d'abord je m'excuse si je poste ce message dans la mauvaise rubrique où bien si une solution a déjà été trouvé pour ce problème. Si tel est le cas merci de me l'indiquer.

 

J'effectuer actuellement des modifications sur mon site web au niveau du fichier global.css uniquement sur la police et sur une page précisément. 

 

Ces modifications apparaissent comme je le souhaite càd bonne taille et bonne couleur sur la page en question, mais voilà ces modifications sont apportées également sur d'autres pages conséquence non voulu.

 

Avez-vous déjà eu ce problème? Si quelqu'un peut m'aider je lui en serai grandement reconnaissant.

 

 

Bonne fin d'après-midi.

[lj44]

Tu bosses sur quel fichier .tpl ? Tu réutiliserai pas les mêmes classes css d'une page à une autre par hasard ?

[Field]

Mon niveau en développement web est équivalent à mes posts. J'effectue mes modifications uniquement sur le fichier global.css.

 

Si je comprends bien ton message pour effectuer des modifications uniquement sur mes trois pages je dois travailler sur le fichier .tpl

qui leur sont rattachées?

 

Remarque surement bête, mais je trouve pas la ligne où je peux modifier la taille/couleur de la police du titre par exemple.

Je me suis renseigné sur l'architecture de l'affichage des pages prestashop sur ce lien . D'après celui-ci le fichier .tpl est généré par un moteur de template "SMARTY" qui permet d'extrait tout l'html du php et de le mettre sur le fichier .tpl en question. 

 

Dois-je créer une nouvelle feuille .css et la rattacher à ces fichiers .tpl?

 

 

Merci pour vos lumières.

[lj44]

ok donc là c'est plutôt de l'intégration que du développement mais bref.

 

Petit rappel: Le .TPL est un fichier template qui sert donc à gérer la structure d'un modèle via des balises html et quelques balises php pour le côté dynamique et comme tu le dis il sert à séparer le html du php (celui qui sert à créer des fonctions, modules, etc).

 

Bon ta page quelqu'elle soit (index, produits, compte client,...) est séparée en 3 parties.

- header.tpl

- page.tpl (index,produits,compte client,...)

- footer.tpl

 

header.tpl et footer.tpl sont des parties communes à chaque "page.tpl". Donc déja si tu bosses sur le css d'une de ces deux parties c'est normal d'avoir la même couleur et taille de police d'une page à une autre.

 

Si par contre tu bosses sur une "page.tpl" (index,produits,compte client,...) , l'erreur pourrait venir d'une classe. admettons tu bosses sur la page index.tpl, tu utilises la classe "montitre" sur une balise h1 et dans le fichier global.css tu appliques un font-size:25px; et un color: blue; sur cette classe.

Bien après si tu redonnes le nom de classe "montitre" dans la page "my-account.tpl" (par exemple). Ton fichier global.css va réattribuer les mêmes propriétés que celles utilisées dans la page index.tpl car ce fichier css est commun à tous. Il faudra alors donner des noms de classes différent d'une page à une autre.

 

Pas besoin de créer un fichier css pour chaque fichier .tpl en tout cas. Tu peux également t'aider de l'extension firebug (sur firefox) ou l'inspecteur d'élément de ton navigateur (clic droit sur la page et procéder à l'inspection de l'élément)  pour trouver la ligne qui te permettra de changer les propriétés css.

 

Si ton site est en ligne chez un hébergeur, poste le lien pour qu'on puisse voir de plus près le problème.

[Field]

D'accord je commence à y voir plus clair (enfin si je me trompe pas), entre les fonctions qu'assurent les fichiers .tpl, les classes et les balises, par ailleurs je te remercie pour le temps que tu m'accordes.

 

Jusqu'à l'heure actuelle je travaillais sur le fichier global.css uniquement sans tenir compte des fichiers .tpl. J'ai d'ailleurs utilisé l'outil dont tu parles sur firefox qui permet de voir la partie html d'un côté et la partie css de l'autre, pour effectuer les modifications qui s'appliquent à d'autres pages malheureusement.

 

Les modifications que je veux apporter ce trouve sur ce lien  . Par exemple le titre est "Suivi de commande" est rattaché à la balise h1 ce qui me renvoie à la ligne 77 de mon fichier global.css .

 

Donc pour que ma modification soit appliquée uniquement sur ce titre il faut que je crée une balise propre à ce titre ?

[lj44]

Ok j'ai regardé ton lien. Ce n'est pas sur le h1 qu' il fait travailler (d'ailleurs je n'ai pas compris ce qu'il faisait là). C'est sur la classe .breadcrumb qu'il faut agir. Et c'est aussi pour cela que ça explique pourquoi quand tu changes une proprieté css de cet élément ça se répercute sur d'autres pages car :

 

Premierement c'est un breadcrumb (fil d'ariane) qui sert de fil de navigation pour l'utilisateur afin qu'il se retrouve mieux. C'est donc une partie commune à toutes les pages.

 

Deuxiemement: c'est une classe et comme je te l'ai dit ça veut dire que tu peux la réutiliser d'une page à une autre, ça prendra le même style css pour tous les éléments qui portent cette classe.

 

Il faut donc soit changer les propriétes css de ta class .breadcrumb mais ça fera donc les mêmes modifications sur toutes tes pages ayant cette classe. Ou alors si tu veux changer l'apparence de ce fil d'ariane seulement sur une page, il vaudrait mieux que tu utilises un ID en plus de ta classe. Ce qui donnera par exemple <div class="breadcrumb" id=breadcrumb-index> et dans ton global.css tu rajoute les propriétés css sur l'id:

#breadcrumb-index {

Color: ce que tu veux;

Font-size: ce que tu veux;

...

}

Ces propriétés viendront écraser celles de la classe

Voila voila !

[Field]

Okay, 

 

Je comprend maintenant pourquoi mes modifications s'appliquaient au reste des pages. Cependant lorsque tu me dis d'utiliser un ID en plus de classe, je ne vois pas ou je dois insérer le "code". Dans mon cas le "code" exacte sera <div class="breadcrumb" id=breadcrumb-guest-tracking> mais je dois l'insérer ou? dans le fichier breadcrumb.tpl ou guest-tracking.tpl ?

 

Sinon je te remercie, tes explications m'aident beaucoup à avancer.