Sujets : dissocier les boutons "Verrouillé" et "Répondre"

[Bokouji]

Bonjour à tous,

Me revoilà avec un nouveau topic, cette fois-ci à propos du bouton "Répondre" qui, sur un sujet verrouillé, se transforme en bouton "Verrouillé" (mais garde la même URL). J'utilise la version phpBB2 et j'ai choisi de remplacer, via CSS, ces boutons représentés par des images, par du texte, avec quelques petites lignes dans ce goût-là :

Code:

.nav > a[href$="&mode=reply"] img {display:none;}
.nav > a[href$="&mode=reply"]:before {content:"Répondre";}

Le souci qui se pose, c'est que lorsqu'un sujet est verrouillé, du coup, puisque j'utilise a[href$="&mode=reply"] pour cibler le bouton en question, hé bien le bouton "Verrouillé" censé apparaître lorsque le topic est verrouillé se transforme lui aussi en bouton "Répondre".

Je souhaiterais pouvoir dissocier ces deux boutons ou au moins, parvenir à mieux cibler ce bouton afin de le modifier via CSS de façon plus adaptée, afin d'avoir distinctement un bouton "Répondre" si l'option est faisable, et le bouton "Verrouillé", si le topic est verrouillé.

J'ai pensé cibler l'élément en ne passant non pas par l'URL, mais par l'image, donc quelque chose comme ceci :

Code:

img[src="https://2img.net/i/fa/subsilver/reply_locked_fr.gif"]:before {content:"Verrouillé";}

Mais l'ennui c'est que ça ne semble pas fonctionner.

Si quelqu'un pourrait éclairer ma lanterne…  C'est peut-être tout bête mais j'avoue que là je sèche.

Un grand merci, et bonne fin de week-end à tous !

[Invité]

Hello Bokouji,
alors via la c.s.s tu ne pourras pas faire mieux, le mieux est de passer un script qui va regarder le alt
de l'image et en fonction de ce dernier affichera le bon texte moyennant une intervention.....
Tu peux donc supprimer la css mentionnée et ajouter ce script:


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.
Cocher  Sur les sujets

Déposes ceci:

Code:


$(function(){
$('a[href$="&mode=reply"]').each(function(){
var reply=$(this).find('img[alt="Répondre au sujet"]').length;
var lock=$(this).find('img[alt^="Ce sujet est verrouillé"]').length;
if(reply)
{
$(this).find('img').addClass('M14_reply').removeAttr('src').attr('alt','Répondre');
}
  else if(lock)
  {
$(this).find('img').addClass('M14_lock').removeAttr('src').attr('alt','Verrouiller');      
  }
});});



Penses à cliquer sur le bouton VALIDER


Tu peux personnaliser le texte de répondre dans le script ici en respectant les simples guillemets:

Code:

$(this).find('img').addClass('M14_reply').removeAttr('src').attr('alt','Répondre');

Tu peux personnaliser le texte de Verrouiller dans le script ici en respectant les simples guillemets:

Code:

$(this).find('img').addClass('M14_lock').removeAttr('src').attr('alt','Verrouiller');  

Via la css,

tu peux personnaliser le bouton répondre :

Code:

.M14_reply{TA CSS}

tu peux personnaliser le bouton Verrouiller :

Code:

.M14_lock{TA CSS}

a++

[Bokouji]

Salut Milouze et merci pour ton astuce.

J'avais également pensé à passer par ce genre de script mais si possible j'aimerais éviter… S'il n'y a pas d'autre option je me résignerai, mais je ne comprends pas pourquoi ce n'est pas possible via l'image du bouton verrouillé, alors que pour d'autres images (exemple, les boutons "citer", "éditer", etc), je n'ai aucun souci.

Il n'y a vraiment pas moyen de passer par du CSS ? Peut-être que la façon dont je vais chercher l'élément n'est pas la bonne…
Si ce n'est pas possible, j'aimerais savoir si quelqu'un peut me dire pourquoi : qu'est-ce qui change entre cette image et les autres, qui fait qu'on ne peut pas la cibler via CSS et utiliser :before ? Que je puisse mieux comprendre pourquoi ma demande n'est pas possible. Merci