[On Stage]

Salut
Ce message fait suite à celui-ci : extensions-discussions-recherches/sujet214224.html#p1673974

Avec ce code CSS :

Code: Tout sélectionner

.message-box textarea {
    background-image: url(./images/message.png);
    background-repeat: no-repeat;
    background-position: 55%;               
}

J'ai réussi à placer une image dans l'éditeur de texte



Le problème est qu'à la rédaction d'un message le texte sur l'image devient difficilement lisible.
Comment faire pour avoir une première opacité sur cette cette image au passage de la souris dans la zone de l'éditeur, et un second degré d'opacité lorsque que l'on fait un clic de souris pour rédiger un message ?

Par avance merci


EDIT

J'ai trouvé une altrnative, dans le template posting_editor.html je modifie ce bloc :

Code: Tout sélectionner

<div id="message-box" class="message-box">
		<textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
	</div>

Ainsi :

Code: Tout sélectionner

<div id="message-box" class="message-box">
		<textarea <!-- IF S_UCP_ACTION and not S_PRIVMSGS and not S_EDIT_DRAFT -->name="signature" id="signature" style="height: 9em;"<!-- ELSE -->name="message" id="message"<!-- ENDIF --> rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox">{MESSAGE}{DRAFT_MESSAGE}{SIGNATURE}</textarea>
		<img class="message" src="url de l'image" width="150px" height="147px">
	</div>

Et en CSS je place ce code :

Code: Tout sélectionner

.message {
      position:relative;
      top: 0px;
      left: 45%;  
      opacity: 0.9;            
}
.message:hover {
      opacity: 0.4;            
}

L'image est située juste en-dessous de l'éditeur, en la positionnant au centre de l'éditeur je n'ai pas trouvé comment la laisser afficher centrée indépendamment de la longueur du texte du message

[On Stage]

Salut
Personne n'a de solution ?

[micka76]

Hello

C'est bien dans .message-box textarea qu'il faut mettre l'opacité , ne touche pas au fichier hml

[Sylveretour]

Bonjour,

Mais, quoi qu'il arrive, on ne peut pas mettre une opacité uniquement sur l'image de fond car l'opacité est générale et s'applique aussi sur le contenu du textarea.
La seule solution est de créer une image ayant une certaine transparence générale et avec une opacité diminuée (contraste).

[micka76]

Exact, j'avais mis une image png avec l'opacité

[On Stage]

Salut
Sur ce forum : https://www.martins-phpbb.com cette astuce est en place.
Une image qui a une opacité au survol de souris dans la zone textarea et une opacité plus importante à la rédaction d'un message, histoire de rendre le texte du message bien lisible.

[micka76]

pour le survol, ajoute ceci et complète en fonction de ce qu'il te faut
textarea.inputbox:hover {
...........
}

[On Stage]

J'ai posé la question sur le forum, c'est l'extension mChat Image qui gère l'image ajoutée dans le textarea