[Résolu] Remplacement d'une donnée #text

MERCI DE M'AIDER

Je chercher à effacer "Event Category : "
voir image jointe
soit en l'effacent tout simplement, soit en le colorant en bleu du fond, soit mieux (pour moi) mettre à la place "Mots Clés :"


le code de la feuille est le suivant
voir image jointe


le code fait bien changer la couleur de (tout) "Event Category : Conférences" en vert
avec ce code
code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
margin-bottom: 0;
color: #ff0;
}
code


Avez vous une solution

MERCI d'avoir lu jusque là

Michel

Bonjour ,

sans javascript , comme tu as le texte à garder dans une balise , une vielle méthode avec text-indent et float + un pseudo devrait convenir:

exemple:

<p class="event">Event Categories : <span>Cat Event</span>.</p>

.event {
  text-indent:-100vw; /* mettre une valeur suffisante pour éjecter les textes et contenu 'inline' hors de l'écran sans créer de barre de défilement)
}
.event span, .event:before {
  float:left;
  text-indent:0;/*reset !*/
}
.event:before {
  content:'Mots Clés :';/* texte visible au lieu du texte caché  mais toujours présent*/
  font-weight:bold;
}

edit demo avec l'astuce de centrage des textes du titre https://codepen.io/gc-nomade/pen/PopPLjL
Modifié par gcyrillus (11 May 2021 - 20:56)

MERCI de cette si rapide réponse

je teste et rappelle

Avec le code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
text-indent: -2000px;
}

j'ai bien réussi à faire partir TRES loin sur la gauche de l'écran

MAIS


avec l'ajout du code

.page-header .author-info > :last-child, .page-header > :last-child, .page-title span,
.page-header .author-info > :last-child, .page-header > :last-child, .page-title :before {
float: left;
text-indent: 0;
}

et

.page-header .author-info > :last-child, .page-header > :last-child, .page-title:before {
content: 'Mots Clés :';
font-weight: bold;
}


J'obtiens cela



le résultat n'est pas conforme à ce que je recherche
soit
"Mot clé : Conférence"

NB pas de pb pour les "s"

https://www.ccefr.fr/event_category/conference/


Rappel de la feuille de style voir les images du message précédent

++++++++++++++++++++++++++++++
QUESTION 1
Est ce que remplacer dans votre code
.envent
par
.page-header .author-info > :last-child, .page-header > :last-child, .page-title
est conforme à votre idée ? instruction ?
+++++++++++++++++++++++++++++
QUESTION 2
Comment avoir "Mot clé :" AVANT "Conférence" ?
Comment effacer ou faire sortir de l'écran "Event Category :" ... qui s'est ajouté
++++++++++++++++++++++++++++
je pense que la valeur "Conférence" existe et est mis à jour au lancement de la page
+++++++++++++++++++++++++++++


MERCI de votre aide

je sais JUSTE recopier ce que vous m'envoyez
... je suis DEBUTANT
MAIS
je sais passer des heures à faire des essais
.. et rendre compte

MERCI de votre aide

Il y a apparement des conflits avec vos régles.

retirez les styles que vous avez ajouté et essayez ceux-ci pour les appliquer uniquement dans cette page https://www.ccefr.fr/event_category/conference/ :

.tax-ecwd_event_category.term-conference header .page-title {
  text-indent:-100vw;
  width:100%;
}
.tax-ecwd_event_category.term-conference header .page-title:before,
.tax-ecwd_event_category.term-conference header .page-title span {
  float:left;
  text-indent:0;
}
.tax-ecwd_event_category.term-conference header .page-title:before {
  content:'Mots Clés : ';
}

Wordpress génere different class sur body en fonction de la page affichée (voir le code source dans le navigatuer pour les trouver).

Cdt

Bonjour,

text-indent a un effet sur tout le texte et élément en ligne contenu dans son conteneur. En utilisant une valeur importante , son utilisation première est détournée. C'est comme cela que votre texte est masqué.

Pour que text-indent n'ai pas d'effet sur le span et le pseudo, tout deux des boite en ligne, float modifie leur interaction dans le flux. Enfin un réinitialisation à 0 du text-indent sur ces élément permet d'afficher leur contenu texte.

Quant à la question pourquoi l'un fonctionne et pas l'autre, cela vient du poids des sélecteur et de l'endroit ou vos tentatives ont été ajoutées. Notion à connaitre à propos de la priorité des sélecteurs : https://www.zonecss.fr/cours-css/poids-des-selecteurs-css.html / https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

complément a propos des sélecteurs https://forum.alsacreations.com/topic-1-63161-1-poids-des-selecteurs.html#p430620 avec un complément sur les selecteur :is() et :where() pour prendre un peu d'avance et maltraiter !important https://re7net.com/article/le-selecteur-is
Modifié par gcyrillus (19 Jun 2021 - 21:23)

BRAVO
et
MERCI de vos explications
Modifié par nikon33 (12 May 2021 - 15:04)