Chrome-inspecter : trouver un élément ‘index’

Bonjour,

Merci d’avance pour votre aide. Je suis autodidacte, à peine plus qu’un débutant et je bute sur un probleme vraiment con. Je veux modifier la couleur d’un bouton ainsi que du texte mais je ne sais pas où se trouve cet élément. Chrome-inspecter me le montre sans probleme mais sans montrer le chemin ; en haut à droite c’est juste écrit ‘(index) :114’.

Mozilla-examiner l’élément me le montre aussi ; mais cette fois ‘index’ s’appelle ‘inline’.

Comment je peux retrouver cet élément pour le modifier ?
Encore merci:)

Kris

Salut Kris31-31, bienvenue sur DVP

Un lien vers la page permettre sûrement de t’apporter une aide plus efficace que de faire des suggestions.

Volontiers ! On prépare une modif radicale du site PROD et ma recherche concerne pour le moment le site DEV. Mais l’équivalent de cet élément sur le site PROD se trouve ici – le bouton ‘SEND’ et le texte qui se trouve à l’interieur de ce bouton (donc Send). https://www.music-bay.net/contact-us/
Merci beaucoup :)

Ok

Le bouton a pour class unique dans la page, wpcf7-submit, donc un document.getElementsByClassName("wpcf7-submit"); avec JavaScript te permet de récupérer un tableau d'objets et de cet objet (index 0) de modifier ce que tu veux.
Pour getElementsByClassName() il y a ce lien qui t'apportera des informations pour sa mise en œuvre.

Merci pour la réponse ! J’ai regardé le document du lien mais je ne sais toujours pas comment modifier la couleur du bouton, car je ne sais pas où il se trouve. Désolé pour mon niveau en la matière…Chrome-Inspecter (tout comme Mozilla) me montre ceci :

Code:

---

1 2 3 4 5

button, input[type=reset], input[type=submit], input[type=radio]:checked, .button, #edd-purchase-button, .edd-submit, .edd-submit.button, .edd-submit.button:visited, input[type=submit].edd-submit, .current-cart .cart_item.edd_checkout a, .edd-wl-button, a.edd-wl-button, .edd-wl-button.edd-wl-action, a.edd-wl-button.edd-wl-action { color: #515a63; border-color: #515a63; background: #ffffff; }

---

Et c’est justement ces 3 couleurs que je voulais modifier.
Mais comment fait-on pour retrouver où se trouve par ex. #515a63; ?

Je ne l’ai pas trouvé dans Simple css, ni dans style.css du thème, ni dans child-theme, ni dans style.css du plugin Contact Form, ni dans 6 autres files. Est-ce que la seule méthode serait de devoir fouiller le site entier à l’aveugle pour trouver un élément ? (je l’espère que non)

Bonjour,
en regardant simplement le code la page on trouve ces règles dans la partie

Code:

---

1 2 3

<style id="marketify-base-inline-css" type="text/css"> <!-- toutes les règles ajoutées --> </style>

---

Merci NoSmoking, et pardon de revenir avec cette question mais comment tu aurais fait pour modifier la couler du bouton SEND et donc savoir où il se trouve en utilisant le code html que tu as cité ? Si j’avais un seul exemple précis je pourrai me débrouiller par analogie avec tous les autres éléments du site. Encore merci :-

Il te suffit d'ajouter tes propres règles après les règles définies par défaut, par exemple :

Code:

---

1 2 3 4 5 6 7 8

.wpcf7-form-control.wpcf7-submit { color: #FFF; background-color: #5CB85C; } .wpcf7-form-control.wpcf7-submit:hover { color: #FFF; background-color: #449D44; }

---

A d’accord, donc si j’ai bien compris – je n’ai même pas besoin de savoir où se trouve un élément donné, je peux simplement ajouter une ligne dans Simple css. Et cette ligne va écraser les règles par défaut, c’est ça ?
Est-ce que la vitesse et la performance du site sont les mêmes quand on ajoute des lignes de code supplémentaire, que quand on modifie directement à la source ? Ça revient au même?

Citation:

---

je n’ai même pas besoin de savoir où se trouve un élément donné, je peux simplement ajouter une ligne dans Simple css.

---

c'est le principe de la séparation des couches CSS d'un côté HTML de l'autre

Citation:

---

Et cette ligne va écraser les règles par défaut, c’est ça ?

---

Pas forcément cela dépendre du « poids » des sélecteurs, mais à poids équivalemment et en absence de précision de la déclaration !important oui !

Ressources :

• Comprendre les notions de cascade, d'héritage et de spécificité
• Tout ce que vous devez savoir sur la déclaration !important

Citation:

---

Est-ce que la vitesse et la performance du site sont les mêmes quand on ajoute des lignes de code supplémentaire, que quand on modifie directement à la source ? Ça revient au même?

---

Ce sera quantité négligeable même si ce nouveau style doit s'appliquer à l'ensemble du site et devrait donc être dans le même fichier CSS que le reste.

Super, c'est noté ! Merci beaucoup pour ta gentillesse et ta disponibilité.
Et Joyeux Noel :-