inspecter un élément dans sa page web et trouver le fichier pour modifier le CSS

[gnosis]

Bonjour,

J'utilise Firefox.
En pressant la touche F12, j'accède à des éléments précis de la page afin de savoir les paramètres CSS qui se lient à ces éléments.

Mais comment diable trouver le fichier concerné dans tous les répertoires du site afin d'appliquer une modification ?

Je vous remercie encore de votre aide

[Eddy.vh]

Bonjour.

Le fichier concerné t'est indiqué par l'inspecteur MAIS, comme on ne modifie pas les fichiers CSS natifs mais apporte les personnalisations dans un fichier custom.css (ou user.css, dépendant du template), il t'importe peu de trouver ce fichier impliqué.

Bonne journée.

[gnosis]

Hum.

Moi, je finissais par trouver le fichier concerné. Exemple template.css et j'y ajoutais mes modifications.
Le problème c'est que lorsque je fais une mise à jour du template par exemple, ou du composant, je perdais toutes mes modifications.
Je ne sais pas comment relier un fichier personnel indépendant d'un composant de joomla pour ne pas avoir à refaire tout mon site à chaque mise à jour...

Etonnamment, un fichier .css modifié a été remplacé lors d'une mise à jour et tout semble avoir été conservé, je ne comprends pas comment. C'était le fichier megamenu.css du template Purity III ... très curieux. Tant mieux.

[lomart]

Bonjour,

Je ne sais pas comment relier un fichier personnel indépendant d'un composant de joomla pour ne pas avoir à refaire tout mon site à chaque mise à jour...

Il faut créer un fichier custom.css dans le dossier /templates/purity_iii/css/

Une autre solution indépendante du template est d'utiliser ce peetit plugin que j'ai écrit il y a fort longtemps

https://lomart.fr/extensions/custom-css

[gnosis]

Meci Lomart.

Je crée un fichier custom.css dans le dossier indiqué et je reprends les balises CSS du fichier natif que je copie mais en y ajoutant seulement ce que j'aurai modifié ?
Ex : template.css // il y a .div{background:white;}
Moi, dans custom.css j'ajoute .div{background:black;} ?
Et ça va considérer mon .div à moi ?

Comment je fais s'il y a plusieurs fichiers de Purity III que je veux modifier ? Un seul fichier custom pour l'ensemble des fichiers CSS ?

Jusqu'à présent toutes les modifications dans les fichiers natifs, j'y ajoutais un mot clé en commentaire devant l'attribut modifié en précisant ce que cela modifiait, ce mot clé me permettait de retrouver dans l'avenir ce qu'il fallait modifier dans les nouveaux fichiers. Ce qui n'est pas simple.

[jfque]

On l'oublie parfois, mais CSS veut dire "Cascading Style Sheet". Le "cascading" indique que les instructions des fichiers sont interprétées dans l'ordre où le navigateur les rencontre. Si vous voulez modifier des instructions présentes dans votre fichier template.css, il faut qu'elles se trouvent dans un fichier custom.css (pour qu'elles ne soient pas effacées lors de la mise à jour du template) et que ce fichier soit appelé par le template en dernier (après tous les autres fichiers css) pour que ses instructions priment sur celles des autres fichiers qu'il modifie.
Je ne sais pas comment fonctionne ce template mais je suppose que, s'il est prévu de pouvoir utiliser un fichier custom.css, il se trouve bien appelé en dernier.

[gnosis]

Merci Jfque, une info très intéressante !

Ce qu'il y a d'étonnant, j'ai remis mon Template Ja Purity III à jour (sa dernière mise à jour datait de 2014) et les fichiers CSS dans lesquels j'avais appliqués des modifications, toutes soigneusement commentées, ont été écrasées par un nouveau fichier template.css, megamenu.css etc. Et pourtant, mon site n'a pas changé. Il a conservé ses dimensions, ses couleurs. Il est identique. Je ne comprends pas. J'ai évidemment purger le cache plusieurs fois.

Lorsque j'inspecte les éléments avec F12 de Firefox, il s'agit bien des mêmes fichiers alors qu'ils ne contiennent plus mes modifications. Celles-ci doivent pourtant être stockées quelque part et être lues au chargement du site. Mystère.

[lomart]

Comment je fais s'il y a plusieurs fichiers de Purity III que je veux modifier ? Un seul fichier custom pour l'ensemble des fichiers CSS ?

Oui un seul fichier et c'est le dernier qui a parlé qui a raison (un peu comme dans la vie)
Pour gagner du temps, je vous conseille vous documenter : https://developer.mozilla.org/fr/docs/Web/CSS/Tutorials

Ex : template.css // il y a .div{background:white;}

J'ai des doutes sur le fait qu'il y ait un point devant div. Le point signifie que ce nom est une classe. Sans point, il s'agit d'une balise, ce qui serait normal pour div

[pmleconte]

..... J'ai évidemment purger le cache plusieurs fois.....

Bonjour,

Quel cache avez-vous supprimé ? il y a celui de Joomla + JCH optimize peut-être + hébergeur + explorateur + ....

Voir https://vider-mon-cache.fr/

Personnellement, j'utilise plusieurs explorateurs pour valider mes modif. CSS : chrome, edge, firefox,....pour être sûr que ce n'est pas le cache de l'explorateur qui joue avec mes nerfs.

Autre "détail" : si vous modifiez une ligne CSS qui contient !important et que vous ne mettez pas !important dans la votre dans le custom.css, elle sera ignorée.

Pascal

[gnosis]

Bonjour,

Merci de votre aide.
J'ai supprimé tout le cache de Firefox.

J'ai cherché s'il y avait un cache à effacer depuis mon hébergeur (Infomaniak). Y en a t-il un ?

Ce qui est étrange c'est que lorsque je suis en localhost, je perds bien les modifications apportées à mes fichiers CSS alors que sur le web toute la mise en page semble être "anormalement" conservée après avoir mis à jour les fichiers natifs de mon template (Purity III)

Je sais que mes pages sont réinitialisées car si j'apporte des modifications dans un article etc, elles apparaissent et la mise en page est conservée.

Mystère.

Je viens de tester depuis mon téléphone, le template a conservé les modifications malgré sa mise à jour.

[Eddy.vh]

Bonjour.

Fais-tu tes personnalisationsdans les fichiers originaux ou un custom.css?

[gnosis]

Dans les fichiers originaux...

[Eddy.vh]

Mais pour quelle raison ? C'est absurde !
Lorsque ton template sera mis à jour, tu perdras toutes tes modifications et il faudra recommencer et recommencer et recommencer, etc.

De plus, je ne serais pas étonné que si tu scrutes ton fichier .css modifié, tes modifications n'y soient plus dès l'actualisation de la page parce qu'écrasées par une compilation de SCSS (LESS apparemment pour Purity 3)…

Si tu fais tes personnalisations dans le fichier custom.css, jamais elles ne seront touchées par une mise à jour et il ne faudra plus jamais recommencer…

[gnosis]

Eddy.vh
Oui, c'est absurde.
J'avais fait ça à l'époque, en 2014. Je n'y connaissais rien en template, je découvrais aussi Joomla.

Aujourd'hui, je veux mettre à jour mon site et la mise à jour écrase mes modifications apportées à l'époque. Excepté ce template Purity III dans lequel j'avais fait des modifications dans le template.css et le megamenu.css.

Ce qui est très étrange c'est que mes modifications n'ont pas été écrasées. Le megamenu est intact alors que si je le télécharge le fichier megamenu.css, mes commentaires et modifications ne sont plus là.

J'ignore donc pourquoi. Pourquoi mes modifications ont elles été conservées (ce qui m'arrange en soi) mais je ne comprends pas.

[gnosis]

Aie... ce qui devait arriver... arriva. J'ai repurger le cache de mon navigateur et là... tout à disparu, je dois tout recommencer ! Tout remettre à jour.

J'aimerai apprendre de mes erreurs et ne pas avoir à réécrire le code et donc savoir utiliser ce fichier custom.php

J'utilise le template JA Purity III
_ Selon vous, où dois je créer ce fichier custom.css ?
_ Comment un seul fichier (custom.css) peut-il contenir les modifications que j'aurai apporté dans plusieurs fichiers CSS ?
_ Dans ce custom.css, j'imagine copier toute la balise css concernée avec la balise
Exemple :
.t3-megamenu .t3-module .module-title {
margin: 0;
padding: 0;
background: transparent;
color: inherit;
font-size: 18px;
line-height: normal;
margin-bottom: 5px;
}

Il y a t'il une manipulation depuis joomla ou depuis le template pour lui demander d'aller lire ce custom.css ? ou le fera t-il tout seul ?

Merci à vous, encore et toujours !


je viens de trouver ceci : cela peut servir à d'autres :

http://www.t3-framework.org/documentation/bs3-customization#custom-css

je vais tenter de m'en inspirer prochainement...