Elément qui ne change pas malgré config du css

hello
désolé si je me trompe de section, je suis nouveau sur le forum..

je me suis lancé dans une grande aventure, je personnalise la page d'accueil de Duckduckgo avec son thème natif ""terminal"".
90% de mes modifs fonctionnent comme je le souhaite, mais je bute sur deux problèmes récalcitrants..

le 1er c'est que sur cette page
https://www.pixenli.com/image/H-PJ24mz

comme on peut y voir, lorsqu'un élément est sélectionné au survol de la souris le fond devient rouge bordeaux (ça c'est une option modifiée directement dans les paramètres de Duckduckgo) mais lors du déplacement avec la touche Tabulation, j'ai aucun carré qui apparait lorsque je t'atteins un élément, donc je navigue à l'aveugle....
si quelqu'un connait la cause du problème, j'ai essayé avec la variable Focus, mais je dois mal m'y prendre je suppose....

et mon 2e soucis c'est que sur cette page dans ce contexte
https://www.pixenli.com/image/TmMP4NEg
au survol de la souris comme à la navigation avec les touches directionnelles du clavier, j'obtiens la même chose (fond bordeaux, écriture jaune) c'est ce que je voulais.

Mais si je fais une recherche de !bang pour ceux qui connaissent Duckduckgo, j'obtiens ceci
https://www.pixenli.com/image/rS8RKSer
le fond rouge bordeaux est bien présent, mais l'écriture jaune lorsqu'un élément à le focus, ne fonctionne pas, et là je sèche.....

concrétement, j'aimerais que les résultats de recherche de !bang est la même allure que les résultats de recherches ""classiques""

je mets mon fichier .css pour vous permettre de comprendre ce que j'ai modifié et là où j'ai probablement merdé, ça fait que depuis 2-3 jours que je bidouille les .css, donc tenez pas compte de mon .css probablement très mal conçu et loin d'être propre..!!!!
https://pastebin.com/DegpP2xj

Merci

Parfois les conflits sont du a lib type bootstrap, et lorsqu'on veux changer quelque chose qui ne le fait pas dans ce cas tu dois avoir un element prioritaire sur ton changement. Pour arrivée a ses fins généralement on opte pour le "!important" :

Code:

---

1 2 3 4 5 6 7 8

.maClass{ propriete: valeur !important; }   #monId{ propriete: valeur !important; }

---

la variable !important; je sais qu'elle résolu souvent beaucoup de choses..
si t'as parcouru vaguement mon fichier .css que j'ai mis en lien dans mon 1er message, tu remarquera que le !important; je l'ai utilisé de partout, pour être sur que mes variables soient effectives..

mais pour mes deux problèmes cités dans mon 1er message, c'est que je sais pas par quel bout y résoudre, tout simplement parce que j'en ai pas les compétences......
si t'as une idée je suis preneur vraiment, perso je suis à bout d'idées...
j'ai beau regarder en faisant clic droit pour ""examiner l'élément"" en question, ça m'avance pas mieux :( :( :( :(

Pour réponse plus précisément a ton problème pour le cas 1 voir 2 :

l'utilisation de la propriété ouline a none est principalement le responsable de ce genre de chose car c'est le moyen de surbrillance des zones de focus dans une page en utilisant la touche tab.
Check si ta pas cette propriété dans ton css afin de la changer, tu peux l’utiliser pour les éléments html de click mais pas dans tout la page ... j'ai pas le temps de regarder tout un css et ça n'a pas de sens puisqu'on n'a pas ta dev pour voir ce qu'il en retourne ni le HTML pour tester en local donc, je laisse d'autres personne plus en compétence et en patience :) que moi.
Bien à toi.

Bonjour,

Citation:

---

Envoyé par headmax

Pour arrivée a ses fins généralement on opte pour le "!important" :

---

c'est souvent le contraire que l'on obtient quand on fini par ne plus maitriser le CSS que l'on a écrit ;)

Citation:

---

Envoyé par darkleopard

... tu remarquera que le !important; je l'ai utilisé de partout, pour être sur que mes variables soient effectives...

---

pas moins de 55 !important dans ton CSS cela tourne à suicide, surtout en cas de conflit :aie:

@NoSmoking :( J'avoue ne pas avoir regarder son CSS, j'ai très mal aux yeux surtout en fin de soirée :'(. Mais comme tu le dit trop de "!important" tue l'application à la fin puisque les conflits devient multiples. Je pense qu'il est temps pour lui de réécrire son CSS en supprimant ce qui ne sert à rien (en évitant des conflit sur deux !important) et en gardant se qui a besoin.
Un très bon exercice pour qu'a la fin il puisse enfin comprendre de quoi il en retourne.

Bon courage.

Salut a vous deux.

Le problème c'est que si je mets aucun !important;
Eh beh aucun effet n'est pris en compte....
Si quelqu'un sait pourquoi, je suis preneur de conseils.
Oubliez pas que je débute, forcément j'y vais un peu par tous les chemins pour arriver a faire fonctionner mon bousin.

En faite je pensais que pour modifier une page d'accueil tel que Google, duckduckgo, startpage, ou autre, on devait impérativement mettre le !important; pour forcer le style.
Donc j'ai tout faux depuis le début.?!??!

Mes questions paraissent stupides, mais comme je suis + que novice, j'imagine mon userContent.css est + proche de péter en vol qu'autre chose :P on apprend de ses erreurs.!!!

c'est pas de la tarte ces .css...
en faite je me sers déjà du ""examiner l'élément"" de Firefox pour trouver quel partie je dois modifier, et ces histoires de poids des sélecteurs pour être honnête j'ai pas compris grand chose, tu me dis de chercher les chemins des Css assignées à l'élément, ça revient à ce que je fais, on parle bien de ceci
https://www.pixenli.com/image/NHEm5-dN

comme je comprends pas tout encore, je vais laisser mon truc comme ça, il peut se passer quoi de mettre trop de !important;.??
qu'un beau jour, ma personnalisation soit plus reconnue par Firefox, et que le fichier .css soit comme corrompu disons.??

et pour le problème avec les !bangs de duckduckgo, je crois que ça se modifie pas, quand je fais un clic droit pour examiner l'élément, voilà ce que j'ai
https://www.pixenli.com/image/4YNF4vuI
le vide intersidéral....!!!! :roll: :roll:

et juste une dernière question dans la foulée, j'aimerais changer le logo de la page d'accueil de Duckduckgo, je sais quelle variable c'est, j'arrive à changer le logo en récupérant l'url du site web qui héberge la dite image, mais, j'aimerais que l'image affichée soit celle qui se trouve dans mon dossier personnel sur mon pc à l'emplacement
/home/mon-nom/.mozilla/firefox/mon-dossier.default/chrome/images/mon-image.png

c'est quelle syntaxe qu'il faut mettre.???
les méthodes que je trouve sur le net, ne fonctionne pas :/

Citation:

---

Oubliez pas que je débute, forcément j'y vais un peu par ...

---

Ben il ne faut pas mettre la charrue avant les boeufs.
Oui css est passionnant mais nécessite de connaitre un minimum et pour commencer perdre un peu de temps à lire et comprendre les tutoriaux de base.
http://plambert.developpez.com/css-debutant/
ou
https://css.developpez.com/tutoriels...roprietes-css/

Oui c'est passionnant mais seulement les tutos expliquent en partant d'une page vierge, forcement c'est + simple.
Mais personnaliser une page d'accueil déjà existante, c'est + complexe pour ma part.

Si je viens sur un forum demander de l'aide, c'est pas pour avoir des liens que j'ai déjà lu..
Mais pour qu'on m'explique, parce qu'à l'heure actuelle, j'en suis toujours au même niveau, toujours bloquer au même endroit........

Je suis contributeur sur un forum, dans les sections Windows Linux et matériel informatique.
Quand une personne vient nous demander de l'aide pour don crash de Windows avec un risque potentiel de pertes de données, je vais pas lui donner un lien en lui disant ""lis ceci""
La personne vient parce quelle est incapable de s'en sortir seule.
Donc perdre du temps pour lire et pas comprendre forcement c'est bien.
Mais perdre du temps pour aider en expliquant aux novices, c'est bien aussi, sinon a quoi bon ""aider"" sur les forums.

Bonjour,

inutile de nous inonder d'"images" et "copies d'écran".
Et un code CSS seul ne sert à rien.

Quant aux liens qu'on te donne...
Ca t'aiderait notamment beaucoup de comprendre le principe de "poids des sélecteurs" (ça éviterait, entre autre, de mettre inutilement des !important partout)

On ne peut pas faire plus, puisqu'on ne peut pas TESTER nous-même.


DONC, si tu veux vraiment de l'aide efficace, donne-nous le lien vers la page concernée, qu'on puisse TESTER.



N.B. A toi de savoir définir "perdre du temps".
Si je vois bien, ça fait au moins 2 jours que tu es dessus... :weird:


...et je suis le 5ème intervenant à "perdre/passer du temps" à répondre à ton post...

et la sensation de
""+ tu lis, et moins tu comprends ce qui est écrit parce que tu te mélanges les pinceaux + qu'autre chose""
je suis le seul à qui ça m'arrive quand je lis les tutos sur les .css.??
l'informatique j'y ai appris de façon autodidacte en lisant des tutos également, mais bizarrement j'y comprenais beaucoup + rapidement, pourtant Linux et les lignes de commandes qui en finissent jamais, ça a de quoi décourager..
alors je dois être une buse au niveau des .css pour avoir autant de mal pour en comprendre le fonctionnement, on peut pas tout connaitre sur tous les sujets, c'est humain, et sur ce sujet, j'avoue que je suis largué et que ça me désespère :roll:

pour les liens, bah y aurait celui-là
https://duckduckgo.com/?key=6b511a89...2aeefe4349334e
qui est ma page d'accueil configurée tel quel (avec tous les !importants;)

et celle-là
https://duckduckgo.com/?q=4&key=6b51...4e&t=hj&ia=web
que j'ai aussi paramétré pour y mettre de la couleur et des effets au passage de la souris etc

mais ça va pas mieux vous aider.??
pour savoir ce que j'ai modifié ou non.??
et même pas sur que les liens que je donne, fonctionnent bien...

sinon c'est pas grave, je reste dans cette config bancale (on peut appeler ça un éventuel abandon) :( :?

Bon....
Si je fais le tri dans ton baratin, ça se résume à : "je n'arrive pas à changer la couleur (texte, fond) des éléments au FOCUS".

• Voir : :focus

Citation:

---

La pseudo-classe :focus permet de cibler un élément lorsque celui-ci reçoit le focus (soit il est sélectionné à l'aide du clavier, soit il est activé avec la souris comme par exemple le champ d'un formulaire).

Cette pseudo-classe ne s'applique qu'aux éléments avec le focus, elle ne s'applique pas à ses parents

---

Le focus (en cliquant sur "Tabulation") ne va pas s'appliquer à une <div>, mais à un <a> (lien), <input> ou <select> (champ d'un formulaire).
Par conséquent, tu ne pourras pas éclairé les blocs en bordeaux.
Seulement les liens qu'ils contiennent :

Code:

---

a:focus { background:darkred; color:yellow; }

---

A adapter pour cibler ceux qui t'intéressent.

N.B. Pour éviter trop de !important, il faut écrire ce code APRES TOUT les autres codes CSS.
Et/ou lui donner un poids sufffisant pour surpasser d'autre instructions éventuellement déjà indiquées.