Tout nouveau très débutant en CSS et autres, donc désolé si ce qui suit est incroyablement basique et/ou trop long.
Ma question est : comment identifier et supprimer des éléments « ember » via CSS ? Je suppose qu’on le ferait en utilisant le suffixe « display:none ».
Juste comme exemple aléatoire, disons que je veux supprimer le bouton de signet en bas des sujets. En examinant l’élément dans la console de Chrome, je ne vois que le CSS pour tous les boutons de pied de page des sujets en général, mais pas celui-ci spécifiquement. Donc, si j’appliquais « display:none », cela s’appliquerait à tous les boutons plutôt qu’à celui-ci uniquement.
Résultat de l’application de display:none sur la balise CSS du bouton.
Je suis assez convaincu qu’il est possible de supprimer un seul élément, et que cela s’étendrait à d’autres éléments ember, dont la plupart sont regroupés de manière similaire. Auparavant, j’ai réussi à supprimer d’autres éléments ember (notamment le bouton d’alignement justifié dans la barre d’outils de composition), mais uniquement avec l’aide d’autres utilisateurs de ce forum.
Cependant, comment identifier la balise CSS spécifique à laquelle on peut appliquer « display:none » ?
Encore une fois, désolé si c’est trop basique ou trop long.
Toutes mes excuses si j’ai donné un mauvais exemple, car je ne savais pas qu’il existait une option en dehors du CSS. J’ai simplement choisi un élément Ember au hasard.
Je pense qu’un meilleur exemple se trouverait dans la page utilisateur. En fait, je cherche à savoir comment identifier ce que l’on peut mettre dans le CSS (de manière similaire au post cité à partir du fil de discussion “MD Composer Extras” que j’ai mentionné plus haut), afin que l’on puisse, hypothétiquement, empêcher un élément Ember de s’afficher.
Un meilleur exemple serait la barre latérale dans la section Activité d’un Profil. Pour autant que je sache, il n’existe pas d’option spécifique pour cela dans les Paramètres, mais cela nécessiterait l’utilisation de CSS.
Ce que vous cherchez s’appelle un « sélecteur CSS » (ou simplement « sélecteur » pour faire court). Les sélecteurs CSS servent à « trouver » (ou sélectionner, évidemment) l’élément du DOM que vous souhaitez styliser.
Par exemple, depuis l’endroit où je tape actuellement, je vais chercher le sélecteur de votre nom d’utilisateur dans le compositeur (juste à titre d’exemple).
Voici la démarche : placez la souris sur l’élément (votre nom d’utilisateur b481 dans le compositeur), faites un clic droit et un menu apparaîtra avec l’option « Inspecter ».
Cliquez sur « Inspecter » pour ouvrir la console de développement (ici, je suis sous Chrome sur macOS) ; et avec un peu de chance, l’élément que nous cherchons sera mis en surbrillance.
Si vous choisissez cette option et copiez le sélecteur, vous obtiendrez dans cet exemple :
#ember433 > span > a
Ce n’est pas vraiment un très bon sélecteur car #ember433 est assigné par Ember, mais vous pouvez déplacer votre souris sur les éléments dans la console : cela mettra en surbrillance les éléments à la fois sur la page concernée et dans la console. La bonne nouvelle est que nous sommes dans le bon domaine, rapidement et facilement.
Vous pouvez ensuite trouver l’élément que vous souhaitez masquer et, dans cet exemple, vous pouvez faire un clic droit à nouveau sur l’élément (cet exemple) pour tester en choisissant « ajouter un attribut » dans le menu sous la souris afin de tester notre sélecteur.
Je viens de faire cela à titre d’exemple dans cette capture :
Ainsi, dans ce cas, nous savons que si nous utilisons le CSS :
span.action-title{
display:none;
}
Nous pouvons l’ajouter à notre thème et nous aurons masqué cet élément.
Dans ce cas, vous devriez vérifier s’il y a plus d’un élément sur la page avec le même sélecteur, et vous devriez également vous assurer que le sélecteur choisi ne sera pas trop « gourmand » et ne sélectionnera pas des éléments sur d’autres pages que vous ne souhaitez pas masquer.
Plus le sélecteur est spécifique, mieux c’est.
Par exemple, dans ce cas, nous pouvons le rendre plus spécifique en précisant que notre sélecteur est un enfant d’un élément parent, dans ce cas (non testé) :
Vous voyez que nous devenons plus précis ; et à ce stade, vous devriez avoir une assez bonne idée de la façon de chercher les éléments que vous souhaitez modifier.
Bonnes recherches !
Une dernière remarque :
Vous pouvez utiliser JavaScript et jQuery pour sélectionner des éléments, mais j’ai constaté que dans les applications SPA comme Discourse/Ember, les sélecteurs CSS fonctionnent bien, du moins pour moi. J’ai tendance à n’utiliser les sélecteurs JavaScript que lorsque je dois parcourir le DOM d’une manière « délicate » (ce qui peut aussi être très amusant).
Je suis tombé sur un petit problème. En essayant de supprimer l’exemple « bookmarks » que j’ai posté ci-dessus, je n’y arrive pas car le numéro Ember associé continue de changer.
Voici le code que j’ai utilisé quand c’était 52. J’ai aussi essayé sans !important.
Oui, je l’ai déjà mentionné @b481 : tu ne devrais pas choisir un sélecteur basé sur les classes et les IDs assignés par Ember.
Tu devrais utiliser un sélecteur qui n’est pas une classe assignée par Ember. Je t’ai expliqué comment faire dans ma réponse précédente.
ASTUCE : À titre d’information, tu ne « supprimes » pas ces éléments du DOM de cette manière (comme tu l’as mentionné ci-dessus), tu les « caches » seulement, mais c’est un sujet pour un autre jour
Veuillez utiliser un sélecteur qui n’est pas automatiquement assigné par Ember.
J’espère que cela t’aidera.
Note :
Si tu essaies de masquer (dans ton exemple) le bouton de signet situé en bas d’un sujet, as-tu essayé :
#topic-footer-button-bookmark
{
display:none;
}
Désolé, mais à en juger par tes messages, je ne sais pas exactement quel élément du DOM (exemple ou réel) tu souhaites masquer.
Quelqu’un sait comment supprimer uniquement l’option « citer tout le message » sans supprimer celle située à gauche ? Elles partagent toutes deux le même CSS et le même div parent, je n’ai donc pas trouvé moyen d’enlever l’une sans l’autre.
