[Réglé] Image dans l'éditeur de message

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.3

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !

[Réglé] Image dans l'éditeur de message

Messagepar On Stage » 17 Sep 2020 à 20:45

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

Image

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;            
}


Image


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
Modifié en dernier par On Stage le 20 Sep 2020 à 17:06, modifié 1 fois.
Avatar de l’utilisateur
On Stage
Roi des posts
Roi des posts
 
Messages: 657
Enregistré le: 19 Mar 2018 à 16:04

Re: Image dans l'éditeur de message

Messagepar On Stage » 19 Sep 2020 à 11:24

Salut
Personne n'a de solution ?
Avatar de l’utilisateur
On Stage
Roi des posts
Roi des posts
 
Messages: 657
Enregistré le: 19 Mar 2018 à 16:04

Re: Image dans l'éditeur de message

Messagepar micka76 » 20 Sep 2020 à 10:29

Hello

C'est bien dans .message-box textarea qu'il faut mettre l'opacité , ne touche pas au fichier hml
Si à la Saint Valentin tu me tiens la main, vivement la Sainte Marguerite que tu me tienne la ....!!! :mrgreen:
micka76
Graphiste
Graphiste
 
Messages: 8798
Enregistré le: 04 Oct 2007 à 11:14
Localisation: Bah entre toi et ta f.... !!!

Re: Image dans l'éditeur de message

Messagepar Sylveretour » 20 Sep 2020 à 11:26

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).
Avatar de l’utilisateur
Sylveretour
Floodeur mature
Floodeur mature
 
Messages: 1617
Enregistré le: 21 Nov 2017 à 18:24
Localisation: West Coast

Re: Image dans l'éditeur de message

Messagepar micka76 » 20 Sep 2020 à 11:50

Exact, j'avais mis une image png avec l'opacité
Si à la Saint Valentin tu me tiens la main, vivement la Sainte Marguerite que tu me tienne la ....!!! :mrgreen:
micka76
Graphiste
Graphiste
 
Messages: 8798
Enregistré le: 04 Oct 2007 à 11:14
Localisation: Bah entre toi et ta f.... !!!

Re: Image dans l'éditeur de message

Messagepar On Stage » 20 Sep 2020 à 12:20

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.
Avatar de l’utilisateur
On Stage
Roi des posts
Roi des posts
 
Messages: 657
Enregistré le: 19 Mar 2018 à 16:04

Re: Image dans l'éditeur de message

Messagepar micka76 » 20 Sep 2020 à 12:49

pour le survol, ajoute ceci et complète en fonction de ce qu'il te faut
textarea.inputbox:hover {
...........
}
Si à la Saint Valentin tu me tiens la main, vivement la Sainte Marguerite que tu me tienne la ....!!! :mrgreen:
micka76
Graphiste
Graphiste
 
Messages: 8798
Enregistré le: 04 Oct 2007 à 11:14
Localisation: Bah entre toi et ta f.... !!!

Re: Image dans l'éditeur de message

Messagepar On Stage » 20 Sep 2020 à 17:06

J'ai posé la question sur le forum, c'est l'extension mChat Image qui gère l'image ajoutée dans le textarea
Avatar de l’utilisateur
On Stage
Roi des posts
Roi des posts
 
Messages: 657
Enregistré le: 19 Mar 2018 à 16:04


Retourner vers [3.3.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron