souligner les liens

Bonsoir,

je souhaite que les liens soient soulignés, ce qui est l'apparence standard dans la plupart des sites, alors que par défaut , il n'y a aucun changement d'apparence entre un lien et du texte simple.

Pour obtenir cela, j'ai été dans "Apparence/Editeur de fichiers de thèmes"

Pièce jointe 614468

et modifié le fichier Style.css (Stylesheet), en y ajoutant la règle :

Code:

---

1 2 3

a{ text-decoration:underline !important; }

---

Je m'attendais en introduisant cette règle à ce que les liens html soient soulignés. Or, il n'en est rien. Pourquoi et comment faire ?

Bonjour,
Il peut y avoir plusieurs fichier css et la sélection de balise la plus précise l'emporte sur les autres règles
https://fr.wikibooks.org/wiki/Le_lan...%C3%A9lecteurs
L'ordre dans les fichiers .css est important et l'ordre d'appel aussi de ces fichier css
Note :

Code:

---

!important

---

est à éviter car c'est une sorte de dernier recours quand on veut forcer un comportement particulier et qu'on a renoncé à analyser le "Comment a été réalisé son site web, que ça soit une reprise ou un SGC/CMS ?"

Maintenant dans notre cas, il est fort à parier que quelque part dans un .css on ait cette règle

Code:

---

1 2 3

a{ text-decoration:none !important; }

---

qui s'applique quelque part en aval de ton code ...

Donc l'idée est
1) Changer de navigateur ou passer en navigation privée pour être sûr que tu n'as pas affaire à un problème de cache
2) Utiliser inspecter sous son navigateur ou regarder des tutos pour savoir comment s'en servir (très très utile) pour tenter de repérer la règle et le fichier css qui passent devant ton code
3) Récupérer le site wordpress en local et rechercher dans tous les fichiers tout ce qui touche à l'élément a (ancre), donc dans les .css, .js, .php .... On peut avoir du css dans des .js mais aussi dans des .php (méfiance) ça dépend comment tout ça a été programmé et avec quel talent :roll:
4) Un lien vers ton site ?

Bonjour,
merci pour ta réponse vttman.

D'abord, un lien vers la page qui contient des liens que je voudrais soulignés au lieu de les colorer en bleu : https://vercorshandisport.org/vhs/ev...avoyarde/#main

Sinon, la lecture du lien que tu fournis m'a fait pensé que si l'ordre des classes CSS a son importance, ça devrait pas poser de problème en utilisant des identifiants. Donc j'ai fait :

Code:

---

1 2 3 4 5 6

Inscription 10km : <a href="https://handisport.unautresport.com/evenement/2022-CDFNordiqueFeclaz" id="savoyarde10"> https://handisport.unautresport.com/evenement/2022-CDFNordiqueFeclaz</a>     Si vous souhaitez participer à d'autres courses pour cet événement :   Inscription 21km et autres : <a href="https://unautresport.com/evenement/2022-LaSavoyarde" id="savoyarde21">https://unautresport.com/evenement/2022-LaSavoyarde</a>

---

et

Code:

---

1 2 3

#savoyarde21,#savoyarde10{ text-decoration:underline; }

---

Même avec ça, aucun soulignement ; pourquoi ?

NB : je ne sais pas utiliser l'inspecteur. J'essaierai peut-être de combler cette lacune.

Bonjour,
dans le navigateur je vois cette règle:

Code:

---

1 2 3 4

#main article a { text-decoration: none !important; font-size: 100% !important; }

---

Pièce jointe 614499

avec les modifications de l'image 2 le soulignement apparait bien
Pièce jointe 614500

au pire essaie <span style="text-decoration: underline;"> ce n'est pas beau mais....
Espérant t'avoir aidé.

NJNDEV +1 ;)

Bonjour,
c'est peut-être pas beau, mais ça marche...

Comme quoi, utiliser l'inspecteur, c'est utile.

Mais en tant que néophyte là-dessus, j'ai essayé en vain de faire la même chose :

je vais sur la page ; clic droit ; inspecter ; rechercher dans le html "savoyarde21" (ce qui devrait me conduire sur un des liens).
Mais il ne trouve pas. Donc, comment faire ?

par exemple avec Firefox, faites Ctrl + Maj + C et cliquez ensuite sur le lien comme expliqué ici :
https://developer.mozilla.org/fr/docs/Outils/inspecteur
à partir de la vous verrez quels règles css s'appliquent au lien.

dans votre cas, la règle est dans le fichier star-child/style.css ligne 100 donc comme c'est le thème enfant, vous pouvez modifier ce fichier et retirer la règle css.

Mes gros problèmes de concentration font que je mets 3 plombes à faire une chose qui semble simple...

J'ai bien ouvert l'inspecteur dans Firefox (c'est justement mon navigateur). Donc OK pour CTRL+SHIFT+C (ou même simplement F12), mais après avec votre lien https://developer.mozilla.org/fr/doc...Page_Inspector, pas pu trouver la ou les règle(s) CSS qui s'aplique(nt) au lien. Ou plutôt, je viens de trouver :

Code:

---

1 2 3 4

#main .post .entry-content a, #tribe-events .tribe_events .tribe-events-content a { text-decoration: underline; color: darkred !important; }

---

style.css 102
mais si je vais sur style.css dans apparence/éditeur de fichiers des thèmes et style.css, les lignes 102 et plus n'ont rien à voir :

Code:

---

1 2 3 4

/* ----------- */ button, input[type="button"], input[type="reset"], input[type="submit"] { line-height:normal; }

---

Comment ça se fait ?

est ce que vous avez peut-être ouvert le fichier du thème parent au lieu du thème enfant ?

Comment le savoir ?
En effet dans la liste déroulante Sélectionnez le thème à modifier : , j'ai 2 fois Star et une fois Twenty Twenty-Two. Comment s'y retrouver ?

Ca a finalement marché. Je note ma démarche si jamais le problème se repose :

- F12 pour ouvrir l'inspecteur de la page à analyser

- dans un des liens qui m'intéressent, il y a le mot unautresport

- dans la fenêtre html de l'inspecteur (la 1e à gauche), je place ce mot dans la barre de recherche. Après ENTER, la ligne html correspondante au lieu s'affiche

- dans la seconde fenêtre (celle du style CSS), les règles CSS agissant sur la ligne html sélectionnée s'affichent

- la première règle est :

Code:

---

1 2 3 4

#main .post .entry-content a, #tribe-events .tribe_events .tribe-events-content a { text-decoration: underline; color: green !important; }

---

style.css 104

- je vais dans apparence->Editeur de fichiers des thèmes et je sélectionne style.css. Je vais à la ligne 104 et retrouve le code CSS vu avec l'inspecteur. J'y mets le code souhaité.

- That's all :D

L'intérêt de l'inspecteur est de se placer, avec la souris, sur une portion de la page Web dont on veut savoir quel règle s'applique et de cliquer droit à cet endroit + inspecter
Je t'encourage à persévérer ;)

Quand tu parles de la page web, il s'agit bien de la page avec le code html ? (ce qui signifie si on s'intéresse à la page affichée par le navigateur qu'il faut d'abord trouver le code html correspondant).

Sur ta page .html ou .php qui pose problème ou que tu veux analyser, tu te positionnes dessus (tu l'appelles par ton menu quoi ...) puis tu cliques droit +inspecter sur la portion de la page que tu veux analyser, là quand la fenêtre + onglet style apparait, tu peux encore sur ta page web cliquer droit ailleurs + inspecter et les informations dans la partie style sont réactualisées en fonction du nouveau contexte ...
Note : Dans les classes (.) et id (#) que tu vois, tu peux changer directement ou ajouter des propriétés et voir ce que ça change en direct dans ta page affichée, le tout n'est pas sauvegardé (évidemment) après il faudra reporter tes modifications dans le/les .css concernés Pièce jointe 614632

Sur ta page .html ou .php qui pose problème ou que tu veux analyser, tu te positionnes dessus (tu l'appelles par ton menu quoi ...) puis tu cliques droit +inspecter sur la portion de la page que tu veux analyser, là quand la fenêtre + onglet style apparait, tu peux encore sur ta page web cliquer droit ailleurs + inspecter et les informations dans la partie style sont réactualisées en fonction du nouveau contexte ...
Note : Dans les classes (.) et id (#) que tu vois, tu peux changer directement ou ajouter des propriétés et voir ce que ça change en direct dans ta page affichée, le tout n'est pas sauvegardé (évidemment) après il faudra reporter tes modifications dans le/les .css concernés Pièce jointe 614632

En cliquant droit sur la portion de la page web qui m'intéresse, j'avais bien vu apparaître un menu contextuel, mais pas compris qu'il fallait de nouveau cliquer sur inspecter...

Sinon, peux-tu me dire comment tu rajoutes une croix ou entoures une partie sur une copie d'écran ?

Dans l'outil "capture" standard de Windows, tu as un stylet, surligneur et gomme. le tout apparaissant quand tu captures une partie de l'écran ...
Il y a mieux il me semble dans windows pour faire de jolies présentations ... mais de mon côté cet outil et fonctionnalités rustiques me suffisent ;)

Je ne connaissais même pas cet outil ! Pour l'ouvrir j'appuie sur touche Windows+shift+S. Mais il ne se passe rien...Tu fais comme ça ou autrement ?

L'outil capture fait partie des accessoires de Windows

Bizarre car hier, en faisant l'essai, pas moyen de faire une capture d'écran mais ce matin, c'est OK :D.