Ajout d'un icône dans le corps du message

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Jeu 17 Sep 2020 - 7:47

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Safari
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://naggaroth.forumactif.com

Description du problème

Bonjour à tous,

je souhaiterais avoir des informations, à savoir s'il est possible de rajouter des icônes supplémentaires, comme ceux permettant de mettre un texte en italique, en gras ou même de centrer un texte.

Et ce dans le but d'insérer automatique au message un code via le bouton, comme sur l'image jointe. Comment puis-je le réaliser ?

Je vous remercie de votre temps et de votre aide. Et pour les curieux de passage, des bisous en espérant que ma question vous ait aidé Smile
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Ven 18 Sep 2020 - 5:56

Hello Thomas-Hilde,

aurais tu des images pour les différents boutons avec ces dimensions ==> 16px par 16px .
Tu désires en avoir trois et les placer à l'extrême droite ?
Ces boutons devront être visible par tout le monde ?

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Ven 18 Sep 2020 - 8:02

Salut Milouze !
Décidément, je crois que tu es mon sauveur attitré. C'est redondant, mais je te remercie une fois encore !
Ton message me donne de bons espoirs.

Je n'ai pas encore les boutons, mais je peux t'indiquer d'autres éléments. Si possible, je souhaiterais au minimum implanter 8 nouveaux boutons, droite ou gauche, peu m'importe. Mais à bien réfléchir, à droite me semble le mieux cela permettra de les distinguer des autres boutons. Et enfin, ces boutons pourront bel et bien être visibles par tous.

Merci à toi (et oui, encore ^^)
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Ven 18 Sep 2020 - 16:56

Hello Thomas-Hilde,

je vais te donner trois boutons ( Italic/Gras et Centrer) .
J'ai commenté afin que tu puisses te repérer .

Exemple avec le bouton Italic
Code:

//DEBUT DU BOUTON ITALIC 
    //L IMAGE DU BOUTON ITALIC
var M14_editoimgI="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
    //TEXTE DE L INFOBULLE ITALIC
var M14_editotitleI="Texte en italic";
    //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON ITALIC
var M14_editoPostI="Le texte envoyé sera penché ";
//FIN DU BOUTON ITALIC

Je t'explique le fonctionnement:

Pour le l'image du bouton Italic, mettre le lien entre les doubles guillemets.
Code:
   
//L IMAGE DU BOUTON ITALIC
var M14_editoimgI="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
L'infobulle au survol du bouton Italic, mettre le texte entre les doubles guillemets.
Code:
 //TEXTE DE L INFOBULLE ITALIC
var M14_editotitleI="Texte en italic";

Le contenu qui sera déposé dans l'éditeur au clic sur le bouton Italic,
mettre le texte entre les doubles guillemets.
Code:
   
//LE TEXTE QUI SERA ENVOYE POUR LE BOUTON ITALIC
var M14_editoPostI="Le texte envoyé sera penché ";

Voilà les explications concernant le fonctionnement des boutons.
J'aurais eut les informations concernant les cinq autres, je t'aurais donné le script complet mais là…..



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

Mettre un titre explicite.
Cocher sur toutes les pages.


Déposes ceci:
Code:

$(function(){$(function(){
//ON AJOUTE UN CONTENEUR A L EDITEUR
$('.sceditor-group').last().after('<br /><div class="sceditor-group fa_bouton"></div>');
//DEBUT DU BOUTON ITALIC 
    //L IMAGE DU BOUTON ITALIC
var M14_editoimgI="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
    //TEXTE DE L INFOBULLE ITALIC
var M14_editotitleI="Texte en italic";
    //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON ITALIC
var M14_editoPostI="Le texte envoyé sera penché ";
//FIN DU BOUTON ITALIC
//DEBUT DU BOUTON GRAS 
    //L IMAGE DU BOUTON GRAS
var M14_editoimgG="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
  //TEXTE DE L INFOBULLE GRAS
var M14_editotitleG="Texte en gras";
  //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON GRAS
var M14_editoPostG="Le texte envoyé sera gras ";
//FIN DU BOUTON GRAS
//DEBUT DU BOUTON CENTRER 
  //L IMAGE DU BOUTON CENTRER
var M14_editoimgC="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
  //TEXTE DE L INFOBULLE GRAS
var M14_editotitleC="Texte centré";
  //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON GRAS
var M14_editoPostC="Le texte envoyé sera centré ";
//FIN DU BOUTON CENTRER
 
$('<a class="sceditor-button " unselectable="on" title="'+M14_editotitleI+'"><div unselectable="on"style="background-image:url('+M14_editoimgI+')">'+M14_editotitleI+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n[i]'+M14_editoPostI+'[/i]');
});
$('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleG+'"><div unselectable="on"style="background-image:url('+M14_editoimgG+')">'+M14_editotitleG+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n[b]'+M14_editoPostG+'[/b]');
});
 
  $('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleC+'"><div unselectable="on"style="background-image:url('+M14_editoimgC+')">'+M14_editotitleC+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n [center]'+M14_editoPostC+' [/center]');
});
})});



Penses à cliquer sur le bouton VALIDER



Puis on positionne la div contenant les boutons à droite:
Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajoutes ceci:

Code:

div.sceditor-group.fa_bouton{float:right;}

Penses à cliquer sur le bouton Ajout d'un icône dans le corps du message Sans_t10

Si, tu désires que je te fasse les cinq autres boutons, soit bien explicite sur leurs fonctions Wink .


a++

Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Sam 19 Sep 2020 - 21:54

Super, merci je crois voir ce que je peux faire avec un tel code !
Juste une petite question, histoire de m'assurer que j'ai bien compris et que je peux l'utiliser comme je l'entends. Tu me donnes l'exemple avec le texte en italique/gras etc... puisque je les avais cités. Je les avais cités juste pour l'exemple, pour que vous visualisiez ce que je cherchais à faire.
Donc je ne vous demanderez pas de me faire tous les autres si j'ai bien compris ^^ Mais pour m'en assurer, puis-je faire ceci ?

Ajouter au code :
Code:
//DEBUT DU BOUTON 4
//L IMAGE DU BOUTON 4
var M14_editoimgI="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
//TEXTE DE L INFOBULLE ITALIC
var M14_editotitleI="Bouton 4";
//LE TEXTE QUI SERA ENVOYE POUR LE BOUTON 4
var M14_editoPostI="
<CENTER><TABLE width=95% ><TR><TD colspan=3>
[center]Combat
Ordre d'attaque : Joueur 1, joueur 2...[/center]

</TD>
</TR>
<TR> <TD width=45%>
[center]<img src="https://i.servimg.com/u/f95/13/98/20/74/invite11.png" width=120 height=170>
Joueur A / Niveau /?/ (joue avec 1D?)
[u]Cible :[/u] Précisez quel est le joueur ciblé

<font color="6fb86b">Vitalité</font> :
<font color="b76bb8">Puissance</font> :
<font color="b86b6b">Dégâts</font> :
<font color="6bb0b8">Rapidité</font> :
Dégâts d'arme : Montant des dégâts de l'arme + (coût de l'attaque : ? points d'action)
Taux critique :
Taux d'échec critique :
Points d'action :

Sort 1 :
Sort 2 :
Sort 3 :
Sort 4 :
Sort 5 :[/center]

</TD> <TD width=45%>
[center]<img src="https://i.servimg.com/u/f95/13/98/20/74/invite11.png" width=120 height=170>
Joueur A / Niveau /?/ (joue avec /?/)

<font color="6fb86b">Vitalité</font> :
<font color="b76bb8">Puissance</font> :
<font color="b86b6b">Dégâts</font> :
<font color="6bb0b8">Rapidité</font> :
Dégâts d'arme : Montant des dégâts de l'arme + (coût de l'attaque : ? points d'action)
Taux critique :
Taux d'échec critique :
Points d'action :

Sort 1 :
Sort 2 :
Sort 3 :
Sort 4 :
Sort 5 :[/center]

</TD></TR>
</TABLE></CENTER>";
//FIN DU BOUTON 4
L'idée est d'insérer des codes déjà conçus.

Je n'ai "que" à faire ça et je peux gérer mes 8 boutons ?
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Sam 19 Sep 2020 - 22:10

Hello Thomas-Hilde,

Non pas tout à fait, mais effectivement le principe est le même sauf qui faut changer la dernière lettre.

Exemple avec le bouton centrer:
Code:
//DEBUT DU BOUTON CENTRER
  //L IMAGE DU BOUTON CENTRER
var M14_editoimgC="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
  //TEXTE DE L INFOBULLE GRAS
var M14_editotitleC="Texte centré";
  //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON GRAS
var M14_editoPostC="Le texte envoyé sera centré ";
//FIN DU BOUTON CENTRER


Toutes les variables se terminent par un C.

Donc le prochain sera par exemple avec U
Code:
//DEBUT DU BOUTON 4
//L IMAGE DU BOUTON 4
var M14_editoimgU="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
//TEXTE DE L INFOBULLE ITALIC
var M14_editotitleU="Bouton 4";
//LE TEXTE QUI SERA ENVOYE POUR LE BOUTON 4
var M14_editoPostU="Apparaîtra le contenu que je souhaite";
//FIN DU BOUTON 4


Puis ajouté le bouton après le dernier:

Code:
 $('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleC+'"><div unselectable="on"style="background-image:url('+M14_editoimgC+')">'+M14_editotitleC+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n [center]'+M14_editoPostC+' [/center]');
});

Ce qui donnera:
Code:
 $('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleU+'"><div unselectable="on"style="background-image:url('+M14_editoimgU+')">'+M14_editotitleU+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n [center]'+M14_editoPostU+' [/center]');
});

Cette dernière partie doit être déposée avant cette fermeture tout en bas du script:
Code:

})});

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Sam 19 Sep 2020 - 22:20

J'ai tout bien saisi, c'est parfait pour moi ! Merci beaucoup pour tes lumières.
Cependant, l'affichage ne se semble pas trop aimer ces changements

Ajout d'un icône dans le corps du message Barre13
Ils ont perdu leur disposition précédente.

Après essai avec/sans le CSS ajouté, la disposition reste la même. Donc j'imagine que le "problème" provient du code JS. Que pourrais-je faire pour les replacer ? Après ça, je devrais pouvoir vous laisser tranquille ^^
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Sam 19 Sep 2020 - 22:28

Re,
hum, le script aurait été un plus Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Sam 19 Sep 2020 - 22:35

Je ne veux pas te faire faire ce que je pourrais faire ^^
Par contre, je t'avoue que je ne sais pas quoi faire avec mon problème d'affichage reflexion
Si jamais tu avais une idée !
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Sam 19 Sep 2020 - 22:36

Re,
si tu as cet affichage sur l'éditeur c'est qu'il y a un soucis,
voilà pourquoi je te demande le script que tu as déposé Wink .

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Sam 19 Sep 2020 - 22:38

Ah xD Je pensais que tu me disais que le script que tu aurais pu faire aurait été un plus pour moi !

Pour le moment je n'ai inséré que le premier script que tu m'as présenté dans ton premier message.
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Sam 19 Sep 2020 - 22:57

Re,
l'ajout est assez limité car les caractères spéciaux doivent être échappés comme les apostrophes :
Ordre d'attaque
Ordre d\'attaque
Bref, il vaut mieux mettre le tableau que tu mentionnes ici:
https://forum.forumactif.com/t404022-ajout-d-un-icone-dans-le-corps-du-message#3370185

Il faudrait ne pas mélanger les balises BBcode et le html Smile .

Directement dans le dernier ajout dans le script
Et ne pas se servir de la variable  qui importe le texte comme les autres,
ensuite , il faut pour un rendu idéal se servir du retour chariot pour aire des sauts de ligne.
Car on importe du brut dans le message.

Je te donne le script avec le tableau avec les chariots .

Voilou pour les explications .
Le script a remplacer:

Code:
$(function(){$(function(){
//ON AJOUTE UN CONTENEUR A L EDITEUR
$('.sceditor-group').last().after('<br /><div class="sceditor-group fa_bouton"></div>');
//DEBUT DU BOUTON ITALIC
    //L IMAGE DU BOUTON ITALIC
var M14_editoimgI="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
    //TEXTE DE L INFOBULLE ITALIC
var M14_editotitleI="Texte en italic";
    //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON ITALIC
var M14_editoPostI="Le texte envoyé sera penché ";
//FIN DU BOUTON ITALIC
//DEBUT DU BOUTON GRAS
    //L IMAGE DU BOUTON GRAS
var M14_editoimgG="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
  //TEXTE DE L INFOBULLE GRAS
var M14_editotitleG="Texte en gras";
  //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON GRAS
var M14_editoPostG="Le texte envoyé sera gras ";
//FIN DU BOUTON GRAS
//DEBUT DU BOUTON CENTRER
  //L IMAGE DU BOUTON CENTRER
var M14_editoimgC="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
  //TEXTE DE L INFOBULLE GRAS
var M14_editotitleC="Texte centré";
  //LE TEXTE QUI SERA ENVOYE POUR LE BOUTON GRAS
var M14_editoPostC="Le texte envoyé sera centré ";
//FIN DU BOUTON CENTRER
  //DEBUT DU BOUTON 4
//L IMAGE DU BOUTON 4
var M14_editoimgU="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";
//TEXTE DE L INFOBULLE ITALIC
var M14_editotitleU="Bouton 4";
//FIN DU BOUTON 4
 
$('<a class="sceditor-button " unselectable="on" title="'+M14_editotitleI+'"><div unselectable="on"style="background-image:url('+M14_editoimgI+')">'+M14_editotitleI+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n[i]'+M14_editoPostI+'[/i]');
});
$('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleG+'"><div unselectable="on"style="background-image:url('+M14_editoimgG+')">'+M14_editotitleG+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n[b]'+M14_editoPostG+'[/b]');
});
 
  $('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleC+'"><div unselectable="on"style="background-image:url('+M14_editoimgC+')">'+M14_editotitleC+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n [center]'+M14_editoPostC+' [/center]');
});
$('<a class="sceditor-button" unselectable="on" title="'+M14_editotitleU+'"><div unselectable="on"style="background-image:url('+M14_editoimgU+')">'+M14_editotitleU+'</div></a>').appendTo('div.sceditor-group.fa_bouton"').click(function(){
$('#text_editor_textarea').sceditor("instance").insert('\n [center]<TABLE width=95% ><TR><TD colspan=3>
[center]Combat
Ordre d\'attaque : Joueur 1, joueur 2...[/center]
 
</TD>
</TR>
<TR> <TD width=45%>
[center]<img src="https://i.servimg.com/u/f95/13/98/20/74/invite11.png" width=120 height=170>\n
Joueur A / Niveau /?/ (joue avec 1D?)\n
[u]Cible :\n[/u] Précisez quel est le joueur ciblé\n
<font color="6fb86b">Vitalité</font> :\n
<font color="b76bb8">Puissance</font> :\n
<font color="b86b6b">Dégâts</font> :\n
<font color="6bb0b8">Rapidité</font> :\n
Dégâts d\'arme : Montant des dégâts de l\'arme + (coût de l\'attaque : ? points d\'action)\n
Taux critique :\n
Taux d\'échec critique :\n
Points d\'action :\n
Sort 1 :\n
Sort 2 :\n
Sort 3 :\n
Sort 4 :\n
Sort 5 :\n[/center]
 
</TD> <TD width=45%>
[center]<img src="https://i.servimg.com/u/f95/13/98/20/74/invite11.png" width=120 height=170>\n
Joueur A / Niveau /?/ (joue avec /?/)\n
 
<font color="6fb86b">Vitalité</font> :\n
<font color="b76bb8">Puissance</font> :\n
<font color="b86b6b">Dégâts</font> :\n
<font color="6bb0b8">Rapidité</font> :\n
Dégâts d\'arme : Montant des dégâts de l\'arme + (coût de l\'attaque : ? points d\'action)\n
Taux critique :\n
Taux d\'échec critique :\n
Points d\'action :\n
 
Sort 1 :\n
Sort 2 :\n
Sort 3 :\n
Sort 4 :\n
Sort 5 :\n[/center]
 </TD></TR></TABLE> [/center]');
});
})});

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Sam 19 Sep 2020 - 23:12

Ok, le langage n'est pas le même. Je prends bonne note !
Par contre le nouveau script ne règle pas la disposition des boutons. Le problème est encore le même
(Désolé pale )
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Dim 20 Sep 2020 - 2:21

Re,
tu peux me donner le contenu de ta feuille de style stp car tout doit s'aligner..
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Dim 20 Sep 2020 - 3:52

Je le poste en deux parties, il est apparemment trop long pour être envoyé !
Code:
div.sceditor-group.fa_bouton{float:right;}



body{
  padding: 0;
  margin: 0;
 margin-top:0 !important;
}
/** MENU DROPDOWN **/
.is-sticky#headerbar-top.w-toolbar {
    top: 0px !important;
}
ul#fa_menulist li{
  display: block !important;
}

#fa_toolbar,
#fa_toolbar_hidden{
  /*display:none;*/
}

#fa_toolbar_hidden{
  background-color: unset !important;
}
span#fa_share,
div#fa_search,
span#fa_left{
  display: none !important;
}
 
#fa_hide,
#fa_show{
  display:none!important;
}
  
#fa_toolbar{
  /*background: url('https://i.servimg.com/u/f49/16/98/81/81/entete10.jpg') no-repeat, url('https://i.servimg.com/u/f44/20/06/31/26/entete10.jpg');*/
  background-color: #4b1e23;
  height: 40px;
  padding-top: 6px;
  padding-left: 20px;
  position: sticky;
  top: 0;
}

#fa_notifications{
  margin-right: 150px;
}

.fa_avatar img {
  width: 100px;
  height: 100px;
  position: fixed;
  top: 5px;
  right: 20px;
  margin-right: 5px;
  border-radius: 50%;
  margin-bottom: -10px;
  object-fit: cover;
  object-position: top;
}

#fa_toolbar ul{
  margin: 0;
  list-style-type: none;
}
div#fa_right {
  margin-right: 150px;
}
#fa_toolbar ul li {
  font-size: 14px;
  display: inline-block;
}
#fa_toolbar a {
 color: #FFF;
}
#fa_toolbar a:hover,
#fa_toolbar ul:hover,
#fa_toolbar li:hover{
  color: unset !important;
}
#myDropdown li{
  display: block;
}

/* The container  - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
#fa_myMenu a{
  margin: 5px;
}
#fa_myMenu #discord{
  margin: 50px;
}
.dropdown-item{
  font-size: 10px !important;
}
/** END MENU DROPDOWN **/
#ipbwrapper {
        padding: 0;
        width: 1000px;
     background: rgba(57,50,51,.5);
}

a, a:hover {
     text-decoration: none !important;
     transform: all;
     transition: .5s;
}

.clear {
     clear: both;
}

::-webkit-scrollbar {
        background: #38303b;
        height: 9px;
        width: 9px;
}

::-webkit-scrollbar-thumb {
        background-color: #4A1E23;
        border-radius: 10px;
        height: auto;
        width: 5px;
}

a > img#i_logo{
  width: 100% !important;
}

/****************************************************** TITRES ******************************************************/
.page_accueil h2 {
        background: url(https://zupimages.net/up/20/17/9jli.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}

.page_accueil h3 {
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        font-weight: normal;
        font-size: 2em;
        letter-spacing: -1px;
     margin: 0;
}

.milieu h3 {
        text-align: left;
        margin: 0 0 1% 0;
}



/****************************************************** PAGE ACCUEIL ******************************************************/
.page_accueil {
        width: 980px;
        background: url(https://i.imgur.com/wWGQ8if.jpg);
        margin: auto;
     font-size: .8em;
     color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
}


/* POSITIONS BLOCS */
.gauche {
        width: 30%;
        float: left;
        margin: 0 0 0 2%;
}

.milieu {
        float: left;
        width: 37%;
     margin: 0 2%;
}

.droite {
        float: left;
        width: 25%;
}

/* ONGLETS STAFF */
.paonglet {
          display: inline-block;
          cursor: pointer;
}

.paonglets {
        color: #38323c;
        font-size: 5em;
        text-align: center;
        margin: -10% 0;
}
            
.paonglet_1 {
     color: #4A1E23;
}
          
.contenu_paonglet {
        border: 1px solid #4A1E23;
        display: none;
        margin: 2% auto 4%;
        width: 72.5%;
        text-align: center;
        padding: 1%;
     position: relative;
}

.contenu_paonglet p {
        position: absolute;
        bottom: -5%;
        right: 0;
        background: #4A1E24;
        padding: 2%;
        width: 190px;
        text-align: left;
        font-style: italic;
        color: #bdbdbd;
        text-transform: uppercase;
        letter-spacing: -1px;
}

.contenu_paonglet img {
       max-width: 100%;
}


/* INFORMATIONS */
.pa_informations {
        width: 100%;
        margin: auto;
        background: rgba(57,50,51,.5);
        padding: 8%;
        box-sizing: border-box;
        text-transform: uppercase;
        font-style: italic;
        text-align: justify;
        height: 150px;
        overflow: auto;
}


/* NOUVEAUTES */
.pa_news {
        width: 100%;
        background: rgba(57,50,51,.5);
        padding: 5%;
        box-sizing: border-box;
        overflow: auto;
     text-align: left;
        height: 160px;
        line-height: 3;
        text-transform: uppercase;
        font-style: italic;
       margin: 0 0 2.5% 0;
}

.pa_news a {
        display: inline-block;
        background: #4A1E23;
        color: #D1CFCF;
        letter-spacing: -1px;
        width: 50px;
        line-height: 2;
        text-align: center;
        margin: 0 0 0 2%;
  text-decoration:none;
}


/* SLIDER */
.slide, .slideshow {
        height: 183px;
        width: 362px;
}

.slideshow {
        margin: 0;
        overflow: hidden;
        position: relative;
}

.slideshow div {
        position: relative;
        top: 0;
        left: 0;
}
  
.slide {
        margin: auto;
        overflow: auto;
        display: inline-block;
        vertical-align: middle;
        text-align: center;
}


/* LIENS UTILES */
.pa_liens_imp {
       margin: 12% 0 0;
}

.pa_liens_imp a {
        display: inline-block;
        border-top: 2px solid #38323c;
        border-bottom: 2px solid #38323c;
        width: 34%;
        margin: 5%;
        padding: 3%;
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        color: #fff;
}

.pa_liens_imp a:hover {
     color: #4A1E23;
}


/* PREDEFINIS */
a.predef1, a.predef2, a.predef3 {
        display: block;
        width: 212px;
        height: 36px;
        box-sizing: border-box;
        padding: 4% 5% 0;
        text-align: right;
        text-transform: uppercase;
        color: #c8c8c8;
        font-style: italic;
        margin: 5% 0 5% 21.5%;
}

a.predef1 {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/noiset10.png);
     border-left: 5px solid #4A1E24;
}

a.predef2 {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/renard10.png);
     border-left: 5px solid #4A1E24;
}

a.predef3 {
        background: url(https://i.imgur.com/jWY5oRd.jpg);
     border-left: 5px solid #4A1E24;
}


/* TOP SITES */
.pa_tops {
        text-align: center;
        margin: 10% 0 12%;
}


/* PARTENAIRES */
.pa_partenaires img {
        border: 1px solid #4A1E23;
        padding: .2%;
        margin: 0 .5%;
}
.pa_partenaires {
        width: 100%;
        text-align: center;
        padding: 3% 0;
}


a.credits {
    color: #d9d9d9;
    font-size: .8em;
    text-transform: lowercase;
    display: block;
    padding: 0 0 2%;
    font-style: italic;
    font-family: Times new roamn;
    font-weight: 100;
}















/****************************************************** TITRES ******************************************************/
.titre_categories h2 {
        background: url(https://zupimages.net/up/20/17/9opf.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}


/****************************************************** CATEGORIES ******************************************************/
/* LIENS UTILES */
.liens_utiles {
     text-align: center;
     color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

.liens_utiles a {
        display: inline-block;
        background: #39313c;
        padding: 1%;
        text-align: center;
        color: #fff;
        margin: 4% 2%;
        text-transform: uppercase;
        font-size: 9px;
}

.liens_utiles a:hover {
     background: #4A1E23;
}

/* FONDS */
.fond_categories {
        background: url(https://i.imgur.com/wWGQ8if.jpg);
        width: 980px;
        margin: 2% auto;
     color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

.forum {
        background: url(https://i.imgur.com/LjAwlzH.jpg);
        width: 98%;
        margin: 2% auto;
        height: 203px;
     position: relative;
}

/* DERNIER MESSAGE */
.dernier_message {
        border: 1px solid #4A1E23;
        float: left;
        width: 20%;
        padding: .5%;
        height: 160px;
        margin: 1.8% 2% 1.8% 15%;
     position: relative;
     z-index: 2;
}

.avatar_dernier {
        position: relative;
        z-index: 3;
        height: 160px;
}

.avatar_dernier:hover {
     z-index: 2;
}

.avatar_dernier img {
        width: 100%;
        object-fit: cover;
        height: 160px;
  object-position : top;
}

.txt_avatar_dernier {
        position: absolute;
        right: 0;
        bottom: 17%;
        background: #242122;
        padding: 3% 15% 3% 5%;
        text-transform: uppercase;
        font-size: .8em;
        font-style: italic;
}

.contenu_dernier_message {
        background: rgba(39,35,37,.9);
        height: 163px;
        position: absolute;
        top: 1%;
        width: 192px;
        z-index: 2;
        box-sizing: border-box;
        font-size: 1.2em;
        text-transform: uppercase;
        font-style: italic;
        text-align: center;
        letter-spacing: -1px;
        line-height: 2;
        padding-top: 18%;
}

.contenu_dernier_message a {
       color: #b0662d !important;
}

.contenu_dernier_message:hover {
       z-index: 4;
}

/* BLOC NOM FORUM ET DESCRIPTION */
.bloc_forum_desc {
        float: left;
        width: 35%;
}

/* Titre forum */
a.forumtitle {
        margin: 3% 0 3% 10%;
        display: block;
        text-transform: uppercase;
        font-style: italic;
        font-size: 1.8em;
        color: #9b9b9b;
        letter-spacing: -2px;
}

/* Position image de description */
.forum-desc img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
}

/* Description */
.forum-desc {
        font-style: italic;
        text-transform: uppercase;
        line-height: 1.2;
        font-size: .8em;
        width: 95%;
        height: 135px;
        overflow: auto;
        text-align: justify;
        padding: 0 5% 0 0;
}

/* IMAGES NEW NO NEW LOCK */
img.icon_forum {
       margin: 0 2%;
     float: left;
}

/* BLOC STATS ET SOUS FORUM */
.stats_sf {
        float: left;
        width: 19%;
}

/* Statistiques */
.statistiques_forum {
        display: inline-block;
        color: #999999;
        font-style: italic;
        font-size: 2em;
        text-align: center;
        width: 50%;
        margin: 5% 0 0 0;
}

/* Sous forum */
.sous_forum a {
        display: block;
        text-align: center;
        border-top: 2px solid #39323d;
        border-bottom: 2px solid #39323d;
        padding: 2%;
        margin: 5% 0;
        color: #9a9a9a;
        text-transform: uppercase;
        font-style: italic;
        letter-spacing: 2px;
        font-size: .8em;
}

.sous_forum {
        width: 95%;
        padding: 0 5% 0 0;
        height: 150px;
        overflow: auto;
}

.sous_forum a:hover {

        color: #4A1E23;
     transition: .5s;
        font-style: normal;
        border-top: 2px solid #4A1E23;
        border-bottom: 2px solid #4A1E23;
}




a.credits {
    color: #d9d9d9;
    font-size: .8em;
    text-transform: lowercase;
    display: block;
    padding: 0 0 2%;
    font-style: italic;
    font-family: Times new roamn;
    font-weight: 100;
}





.titre_qeel {
        background: url(https://zupimages.net/up/20/17/9jli.png);
        padding: 7% 0;
        text-align: center;
        font-weight: normal;
        text-transform: uppercase;
        font-size: 2.5em;
        letter-spacing: 2px;
        color: #ffeceb;
        font-style: italic;
}



/****************************************************** QUI EST EN LIGNE ******************************************************/
/* FOND QEEL */
.qeel {
        width: 980px;
        margin: auto;
        background: url(https://i.imgur.com/wWGQ8if.jpg);
     color: #c3c3c3;
        font-family: 'Heebo', sans-serif;
        line-height: 1.5;
        font-size: .8em;
}

/* BLOC GAUCHE */
.qeel_gauche {
        float: left;
        width: 30%;
        margin: 2%;
}

.qeel_g_1 {
     float: left;
}

.qeel_g_2 {
        float: right;
        margin: 0 6%;
}

/* Membres et messages */
div#membres, div#messages {
        border-top: 2px solid #383442;
        border-bottom: 2px solid #383442;
        padding: 2%;
        margin: 5% auto;
        text-align: center;
        text-transform: uppercase;
        font-style: italic;
        width: 200px;
}

/* Dernier inscrit */
.dernier_inscrit {
        border: 1px solid #4A1E23;
        width: 150px;
        height: 150px;
        padding: 1%;
        box-sizing: border-box;
        position: relative;
        margin: auto;
}

.dernier_inscrit img {
        width: 100%;
        height: 140px;
        object-fit: cover;
  object-position : top;
}

.qeel_pseudo_dernier {
background: url(https://i.imgur.com/LjAwlzH.jpg);
   width: 82px;
  height: 10px;
  text-align: center;
        bottom: 17%;
        font-size: .8em;
        font-style: italic;
        padding: 3% 40% 3% 5%;
        position: absolute;
        right: 0;
        text-transform: uppercase;
}

/* GROUPES */
.qeelonglet {
        cursor: pointer;
        display: block;
}
            
.contenu_qeelonglet {
        display: none;
}

.contenu_qeelonglets {
        width: 100%;
        height: 290px;
}

.contenu_qeelonglets span {
        background: rgba(56,52,66,.9);
        box-sizing: border-box;
        color: #4A1E23;
        font-size: 1.5em;
        font-style: italic;
        letter-spacing: -2px;
        padding: 5% 0 5% 10%;
        text-transform: uppercase;
        width: 100%;
        margin-top: -19.5%;
        display: block;
        position: relative;
}

/* Anniversaires */
.anniversaires {
        background: url(https://i.imgur.com/LjAwlzH.jpg);
        width: 85%;
        
        padding: 5%;
        text-transform: uppercase;
        font-style: italic;
        margin: 10% 0;
     letter-spacing: -1px;
     height: 55px;

}

/* BLOC MILIEU */
.qeel_milieu {
        float: left;
        width: 26%;
     margin: 2% 0 0 0;
}

/* Bouton Discord */
a.discord {
        display: block;
        text-align: center;
        margin: 5% 0;
}

/* QEEL DROITE */
.qeel_droite {
        float: left;
        margin: 2%;
        width: 35%;
}

div#connectes, .qeel_24, .qeel_credits {
    background: url(https://i.imgur.com/LjAwlzH.jpg);
    box-sizing: border-box;
    font-style: italic;
    letter-spacing: -1px;
    padding: 5%;
    text-transform: uppercase;
    width: 100%;
    height: 145px;
    overflow: auto;
 text-align: justify;
}

.qeel_24 {
    margin: 5% 0;
    height: 140px;
}

.qeel_credits {
    height: auto;
}

.qeel_credits a {
    color: #4A1E23;
}

/* PARTENAIRES */
.qeel_partenaires img {
        border: 1px solid #4A1E23;
        padding: .2%;
        margin: 0 .5%;
}

.qeel_partenaires {
        width: 100%;
        text-align: center;
        padding: 3% 0;
}

/*********************************** LISTE MEMBRES ***********************************/
/* BLOC DE RECHERCHE */
.liste_membres_entete {
        background: url(https://i.imgur.com/q46je9p.jpg);
        font-family: 'Alegreya Sans SC', sans-serif;
        font-size: 12px;
        padding: 2%;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
     color: #d9d9d9;
}

/* TITRE */
    .liste_membres_entete h2 {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/hppppp10.png) no-repeat center;
        content: "";
        display: block;
        width: 198px;
        height: 112px;
        margin: auto;
}

/* TRI */
.liste_membres_entete select {
       color: #d9d9d9;
}

.membres_tri {
       margin: 5% 0 2% 0;
}

.membres_recherche {
        float: left;
        width: 25%;
     margin: 0 0 0 8%;
}

.membres_recherche input {
        background: #4A1E24;
        border: 0;
        margin: 0 0 0 2%;
        padding: 1%;
}

.membres_visite {
        float: left;
        width: 20%;
        margin: 0 0 0 2%;
}

.membres_ordre {
        width: 15%;
        float: left;
}

input.membres_valider {
        background: #4A1E24;
        border: 0;
        float: left;
        padding: .3%;
     color: #d9d9d9;
     margin: 0 0 0 2%;
        width: 150px;
        cursor: pointer;
}

.membres_tri select {
        margin: 0 0 0 2%;
        background: #4A1E24;
        border: 0;
        padding: 1%;
}

/* LISTE MEMBRES */
.liste_membres_contenu {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/vert11.png) no-repeat bottom right, url(https://i.imgur.com/q46je9p.jpg);
        margin: 2% 0;
        width: 100%;
     color: #d9d9d9;
     text-align: center;
        font-family: 'Alegreya Sans SC', sans-serif;
}

.liste_membre_bloc {
        background: rgba(0,0,0,.2);
        box-sizing: border-box;
        padding: 2%;
        width: 45%;
     text-align: left;
        display: inline-block;
        margin: 2%;
}

/* Avatar */
.liste_membres_avatar img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 100px;
        float: left;
        margin: 0 5% 0 0;
  object-position : top;
}

/* Informations */
.liste_membres_profil {
        float: left;
        font-size: 12px;
        width: 70%;
}

/* Pseudo */
.liste_membres_profil h3 {
        font-family: times new roman;
        font-size: 24px;
        text-transform: lowercase;
        font-style: italic;
        letter-spacing: -2px;
        margin: 0;
}

/* Texte profil */
.liste_membres_informations span::after {
        content: "";
        display: inline-block;
        height: 10px;
        margin: 0 .5% 0 0;
        width: 10px;
}

/* Contact */
.liste_membres_contact {
       margin: 1% 0 0 0;
}








a, a:hover {
    text-decoration: none !important;
    transform: all;
    transition: .5s;
}

.clear {
    clear: both;
}


/***************************************************** BANDEAU LATERAL *****************************************************/
/* POSITION ET MISE EN FORME DE LA BARRE */
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    background: url(https://i.imgur.com/ahF7Ej1.png) no-repeat, url(https://i.imgur.com/7GmRHxa.png);
    width: 150px;
    bottom: 0;
    text-align: center;
    color: #5f5e60;
    font-family: Arial;
  z-index: 2;
}

/* TEXTE FREEDOM */
.navigation h2 {
    color: #626667;
    text-transform: uppercase;
    font-size: 10px;
    margin: 10px 0 5px 0;
}

/* TEXTE QUAND LA LIBERTE DEVIENT UN LUXE */
.navigation p {
    font-size: 10px;
    font-weight: bold;
    margin: 0;
}

/* CADRE AVATAR */
#avatar_menu {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 1px solid #1e1f21;
    background: #4a1e23;
    padding: 5px;
    margin: 15px auto 15px auto;
}

/* TAILLE DE LAVATAR */
#avatar_menu img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
    object-fit: cover;
  object-position : top;
}

/* MISE EN FORME PSEUDO */
#pseudo_menu {
    text-transform: uppercase;
}

/* POSITION BLOC MENU */
#liens_navigation {
    margin: 60px auto auto auto;
}

/* MASQUER LES IMAGES DE LA NAVIGATION */
#liens_navigation img {
    display: none;
}

/* DISPOSITION DES LIENS DU MENU */
#liens_navigation a {
    display: block;
    margin: 0;
    padding: 0;
    line-height: .1;
    color: #626667;
}

/* COULEUR EN HOVER DES LIENS DU MENU */
#liens_navigation a:hover {
    color: #4A1E23;
}





a {
  text-decoration: none !important;
  transform: all;
  transition: .5s;
}

a:hover {
  text-decoration: none !important;
  color: #4A1E24 !important;  
  transform: all;
  transition: .5s;
}

.clear {
  clear: both;
}



/********************************************************* LISTE SUJETS *********************************************************/

/* Entête & Footer de la liste */
.nouveau_message, .repondre_message {
      display: block;
    background: #4A1E24;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 4;
    width: 250px;
    font-size: 11px;
    margin: auto;
    text-align: center;
}

.nouveau_message {
        display: block;
    background: #4A1E24;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 4;
    width: 250px;
    font-size: 11px;
    margin: auto;
    text-align: center;
}

.repondre_message {
    background: #4A1E24;
    margin-left: 2%;
}

.boutons_footer_sujets {
    text-align: center;
    font-family: Cambria;
    font-size: 12px;
}

.boutons_surveiller {
    background: #4A1E24;
    color: #fff;
    display: inline-block;
    margin: 1%;
    line-height: 3;
    text-align: center;
    text-transform: uppercase;
    width: 350px;
}

.boutons_surveiller a {
    color: #fff !important;
}

.boutons_surveiller a:hover {
    color: #D1CFCF !important;
}

#moderer a {
    display: block;
    background: #4A1E24;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 4;
    width: 250px;
    font-size: 11px;
    margin: auto;
    text-align: center;
}

#moderer {
    font-size: 0;
}

/* Liste */

.liste_sujet {
    background: url(https://i.imgur.com/LjAwlzH.jpg);
    padding-top: 1%;
}

.titre_liste_sujet {
    background: #4A1E24;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 2% 0;
}

.contenu_liste_sujet {
    width: 100%;
    margin: 1% 0;
}

.statut_sujet {
    float: left;
    margin-right: 2%;
}

.sujets_liste {
    float: left;
    width: 60%;
}

a.topictitle {
    color: #7e8792 !important;
    font-family: arial;
    text-transform: uppercase;
    font-size: 16px;
    margin-right: 1%;
}

.description_liste_sujet {
    color: #939698;
    font-style: italic;
}

.dernier_message_sujet {
    color: #b6b6b6;
    float: right;
    font-size: 13px;
    margin-right: 4%;
    text-align: center;
    width: 18%;
}
.dernier_mess_sujet {
    color: #6c676e;
    text-transform: lowercase;
    font-size: 13px;
}


/*************************************************** MESSAGE PROFIL ***************************************************/
table.message_profil .row1 {
       background: url(https://i.imgur.com/7GmRHxa.png);
}

table.message_profil {
      
  background: url(https://i.imgur.com/7GmRHxa.png);
}

/* ARIANE */
.message_sujet_ariane {
        background: #4A1E24;
        text-align: center;
        padding: 1% 0;
        letter-spacing: -2px;
        font-size: 20px;
        color: #c7c7c7;
        margin: 2% 0;
}

.message_sujet_ariane a {
        color: #D1CFCF;
        text-transform: uppercase;
        font-weight: normal;
     font-size: 20px;
}

/* TITRE MESSAGE NOUVEAU REPONDRE */
.mess_pro_header {
        background: url(https://i.imgur.com/7GmRHxa.png);
        padding: 1% 0;
        text-align: center;
}

/* Titre */
.mess_pro_header .titre {
        display: inline-block;
        text-transform: uppercase;
        margin: 0 2% 0 0;
}

.mess_pro_header .titre .cattitle {
        color: #D1CFCF;
        letter-spacing: -1px;
        font-weight: normal;
        font-size: 20px;
        line-height: 3;
}

.mess_pro_header .titre .cattitle::after {
        color: #4A1E24;
        content: " •";
}

/* Nouveau repondre */
.mess_pro_header .poster img {
       margin: -5% 1% 0;
}

.mess_pro_header .poster {
        display: inline-block;
        margin: -5% 0 0 0;
        width: 300px;
}

/* DATE */
.mess_pro_date {
        background: #4A1E24;
        color: #D1CFCF;
        font-size: 12px;
        padding: 1% 0 1% 25%;
        text-transform: uppercase;
        margin: 2% 0 0 0;
}
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Dim 20 Sep 2020 - 3:53

Code:

/* PROFIL */
td.mess_pro_profil {
        background: url(https://i.imgur.com/7GmRHxa.png);
        font-size: 12px;
        padding: 20px;
        display: inline-table;
    position: relative;
}

/* Pseudo */
.mess_pro_pseudo a {
        font-family: 'Dancing Script', cursive;
        font-size: 25px;
}

.mess_pro_pseudo {
      display: inline-block;
}

.mess_pro_online {
        float: right;
        text-align: right;
        width: 39px;
}

/* Avatar */
.mess_pro_encadre_ava {
        background: url(https://i.imgur.com/7GmRHxa.png);
      border: 5px solid #4A1E24;
        margin: 1% 0 3%;
}

.mess_pro_bloc_avatar {
        width: 200px;
        height: 320px;
        overflow: hidden;
      position: relative;
}

.mess_pro_avatar img {
        width: 200px;
        height: 320px;
        object-fit: cover;
}

.mess_pro_avatar_txt {
        width: 190px;
        height: 300px;
        background: url(https://i.imgur.com/7GmRHxa.png);
        position: absolute;
        z-index: 2;
        transition: .5s all;
        top: 320px;
        padding: 0 5%;
        left: 5px;
        box-sizing: border-box;
        overflow: auto;
}

.mess_pro_bloc_avatar:hover .mess_pro_avatar_txt {
        top: 10px;
}

/* LIENS */
.mess_pro_contact img {
        float: left;
        margin: 0 .1% 1% 0;
}

/* CONTENU PROFIL */
.mess_pro_content_profil {
        background: url(https://i.imgur.com/7GmRHxa.png);
        color: #D1CFCF;
        letter-spacing: -1px;
        padding: 5%;
        box-sizing: border-box;
    margin: 0 0 120px;
}

.mess_pro_content_profil img {
        position: absolute;
        width: 213px;
        height: 110px;
        object-fit: cover;
        bottom: 15px;
        left: 20px;
}

/* CITER EDITER ETC */
.post-options {
        text-align: right;
        margin: 2%;
        display: block;
}

/* CONTENU MESSAGE */
.message_profil .postbody {
        font-size: 12px;
        line-height: 18px;
        background: url(https://i.imgur.com/7GmRHxa.png);
        padding: 3%;
        box-sizing: border-box;
        margin: 0 2% 0 0;
 
}

.mess_pro_content_profil .label:nth-child(40n+3) {
      font-size: 0;
}

/* SIGNATURE */
.signature_div::before {
        content: "";
        display: block;
        width: 80%;
        margin: 8% auto 0;
        border-top: 5px solid #4A1E24;
}


/* Sélectionner le code */
.selectCode { float:right; cursor:pointer; }
div.cont_code { clear: right; }

.code { color: #D1CFCF; }

div.cont_code {
  color:#CCCCCC;
  padding:3px;
}
div.cont_code {
  color:#CCCCCC;
  padding:3px;
}
.codebox.spoiler b {display:inline}
div.cont_code::-moz-selection {
  text-shadow:2px 3px 1px black;
  background-color:#4A1E24;
  color:#CCCCCC;
}
div.cont_code::selection {
  text-shadow:2px 3px 1px black;
  background-color:#4A1E24;
  color:#CCCCCC;
}

/* couleur texte dans éditeur de message */
    .sceditor-container iframe, .sceditor-container textarea {
    color: #D1CFCF !important;
    }

/* police PROFIL */
.postdetails.poster-profile{
font-size: 11px;
font-family:"arial", times, serif; }


/* Modèle de présentation */
  /*********************************** PRESENTATION ***********************************/
.fond_pres {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/bas10.png) no-repeat bottom right, url(https://i.imgur.com/q46je9p.jpg);
        width: 90%;
        margin: auto;
        box-sizing: border-box;
        border-left: 5px solid #4a1e24;
        position: relative;
     font-family: 'Volkhov', serif;
     color: #d9d9d9;
}

.fond_pres ::-webkit-scrollbar {
        background: #d9d9d9;
        height: 7px;
        width: 7px;
}

.fond_pres ::-webkit-scrollbar-thumb {
        background: #4a1e24;
        border-radius: 27px;
}

/* GRANDE IMAGE */
img.header_pres {
        display: block;
        margin: auto;
        padding: 5% 0 0;
        width: 500px;
        height: 277px;
        object-fit: cover;
}

/* NOM PRENOM */
.fond_pres h2 {
        background: url(https://i.servimg.com/u/f95/13/98/20/74/fondna10.png) center no-repeat;
        display: block;
        font-family: times new roman;
        font-size: 35px;
        font-style: italic;
        letter-spacing: -2px;
        margin: -12% 0 0 0;
        padding: 9% 0;
        text-align: center;
        text-transform: lowercase;
        position: relative;
     color: #d9d9d9;
     font-weight: normal;
}

/* ACCROCHE */
.fond_pres h3 {
        font-family: 'Alegreya Sans SC', sans-serif;
        letter-spacing: 2px;
        text-align: center;
        position: relative;
        font-weight: normal;
        margin: -11% 0 0 0;
}

.fond_pres h3::before {

        content: "";
        width: 10px;
        height: 10px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* CONTENU */
.pres_interne {
       padding: 2% 4%;
}

/* MINIATURES */
img.image_footer, img.minipres {
        border: 1px solid #d9d9d9;
        float: left;
        margin: 0 3%;
        padding: 1%;
        width: 100px;
        height: 100px;
        object-fit: cover;
}

/* BLOCS INTRO */
.pres_b1 {
        background: rgba(0,0,0,.2);
        float: left;
        width: 31%;
        padding: 2%;
        height: 95px;
        overflow: auto;
}

.pres_b1 span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
}

/* TITRES */
.pres_interne h4 {
        font-size: 20px;
        font-family: Vollkorn, serif;
        margin: 0;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        font-weight: normal;
}

.pres_interne h4::before {
        content: "";
        width: 10px;
        height: 15px;
        display: inline-block;
        margin: 0 2% 0 0;
}

/* FOND DES BLOCS */
.contenu_pres {
        background: rgba(0,0,0,.2);
        border-left: 2px solid #4A1E24;
        padding: 2% 5%;
}

.contenu_pres span {
        text-transform: uppercase;
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: bold;
     color: #4A1E24;
}

/* HISTOIRE */
.contenu_pres.histoire {
       
        overflow: auto;
}

/* PSEUDO PRES */
.fond_pres h2.footer {
       margin: 0;
}

/* FOOTER */
.informations_footer {
        background: rgba(0,0,0,.2);
        border-left: 2px solid #4A1E24;
        padding: 2% 5%;
        float: left;
        width: 60%;

        overflow: auto;
}

.informations_footer span {
        font-family: 'Alegreya Sans SC', sans-serif;
        font-weight: 700;
        text-transform: uppercase;
}

a.morsmordre_credits {
        color: #d9d9d9;
        display: block;
        font-family: Helvetica;
        font-size: 10px;
        font-style: italic;
        letter-spacing: -1px;
        margin: 4% 0 0;
        text-align: center;
        text-decoration: none;
        text-transform: lowercase;
        padding: 0 0 1%;
}


/* bouton nouveau / répondre  */
.bouton {
        display: block;
        text-align: center;
        border-top: 2px solid #4A1E24;
        border-bottom: 2px solid #4A1E24;
        padding: 2%;
        margin: 5% 0;
        color: #D1CFCF;
        text-transform: uppercase;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 15px;
  width: 300px;
  background: url(https://i.imgur.com/LjAwlzH.jpg);
  }

.boutonrep {
        display: block;
        text-align: center;
        border-top: 2px solid #4A1E24;
        border-bottom: 2px solid #4A1E24;
        padding: 2%;
        margin: 5% 0;
        color: #D1CFCF;
        text-transform: uppercase;
        font-style: italic;
        letter-spacing: 2px;
        font-size: 15px;
  width: 200px;
  background: url(https://i.imgur.com/LjAwlzH.jpg);
  }

/* Remplacer bouton citer/editer... par texte*/
   
.post-options a{
height: 22px;
line-height: 22px;
font:normal 11px arial, helvetica, sans-serif;
padding: 0px 10px;
display: inline-block;
margin:5px;
  border-top: 1px solid #4A1E24;
        border-bottom: 1px solid #4A1E24;
    background: url(https://i.imgur.com/LjAwlzH.jpg);
  font-variant-caps: small-caps;
}

/* Avatar réponse rapide */

#av_quickreply img {
    left: 15px;
    position: relative;
    top: 50px;
  width: 100px;
        height: 100px;
        border-radius: 100px;
  object-fit: cover;
object-position: top;
}
 
#av_quickreply {
    float: left;
    position : absolute;
}
/* Avatar réponse rapide */
.codebox dd:not(.code):not(.quote) {padding-left:20px;background-color:#212224}

/************************************************ LISTE SUJETS ************************************************/
.liste_sujet_header::after {
        content: "";
        display: block;
        clear: both;
}

/* HEADER */
.liste_sujet_header {
        width: 850px;
        margin: auto;
     font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujet_header .ls_fil_ariane {
        float: left;
        width: 80%;
}

.liste_sujet_header .ls_fil_ariane img {
       height: 50px;
}

.liste_sujet_header .ls_fil_ariane a {
       color: #8e8f8d;
}

.liste_sujet_header .ls_nouveau {
       float: right;
}

/* LISTE */
.liste_sujets {
        width: 850px;
        margin: 2% auto;
        background: #151a15;
     font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
        border-radius: 50px 50px 25px 25px;
}

.ls_header {
        background: url(https://www.zupimages.net/up/18/46/s4po.png);
        border-radius: 50px 50px 0 0;
        height: 130px;
        text-align: center;
        width: 100%;
        font-size: 35px;
        font-weight: normal;
        font-family: 'Berkshire Swash', cursive;
        padding: 5.5% 0 0 0;
        box-sizing: border-box;
}

.ls_content {
        width: 90%;
        margin: 2% auto;
        display: flex;
}

/* Dernier message */
.ls_dernier {
        background: rgba(0,0,0,.2);
        padding: 2%;
        width: 28%;
    font-size: 12px;
     box-sizing: border-box;
}

.ls_dernier a {
        text-transform: uppercase;
        font-size: 14px;
        margin: 0 2% 0 0;
}

/* Statut */
.ls_statut {
        margin: 0 2%;
        align-self: center;
    font-size: 12px;
}

/* Nom sujet */
.ls_nomsujet {
        width: 40%;
        margin: 0 2% 0 0;
        background: rgba(0,0,0,.2);
        padding: 2%;
}

.ls_nomsujet h2 {
        display: inline-block;
        margin: 0 0 0 2%;
     text-transform: uppercase;
}

.ls_auteur::before {
        content: "Composé par ";
        margin: 0 2% 0 0;
    font-size: 12px;
}

/* Avatar */
.ls_avatar img {
        width: 100px;
        height: 70px;
        object-fit: cover;
  object-position : top;
}

/* Statistiques */
.ls_stats {
        width: 15%;
        margin: 0 0 0 2%;
     align-self: center;
    font-size: 12px;
}

.ls_stats span {
        display: block;
        text-align: center;
        background: rgba(0,0,0,.2);
        padding: 3% 0;
        text-transform: uppercase;
    font-size: 12px;
}

.ls_stats span:nth-child(2) {
       margin: 10% 0 0;
}


.ls_footer {
        background: url(https://www.zupimages.net/up/18/46/lms2.png);
        border-radius: 0 0 25px 25px;
        height: 50px;
        width: 100%;
}

/* FOOTER */
.liste_sujets_footer {
        width: 850px;
        margin: auto;
     font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujets_footer .ls_fil_ariane {
        float: left;
        width: 80%;
}

.liste_sujets_footer .ls_fil_ariane img {
       height: 50px;
}

.liste_sujets_footer .ls_nouveau {
       float: right;
}

.liste_sujets_footer::after {
        display: block;
        clear: both;
        content: "";
}

/* BOUTONS */
.liste_sujets_boutons {
        margin: 2% auto;
        text-align: center;
        width: 850px;
        display: flex;
        justify-content: center;
     font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.liste_sujets_boutons a {
        background: #151a15;
        color: #8e8f8d;
        font-size: 14px;
        line-height: 3;
        text-transform: uppercase;
        width: 240px;
        display: block;
        margin: 0 10px;
}

span.ls_moderation {
       font-size: 0;
}

.liste_sujets_boutons a:hover {
        background: #556b4d;
        color: #8e8f8d !important;
}

a.credits_sujets {
        color: #8e8f8d;
        text-align: right;
        display: block;
        padding: 1.5% 3%;
        font-size: 10px;
        text-transform: uppercase;
}

/* Pagination */
.ls_pagination {
        text-align: right;
        font-size: 12px;
        margin: 2%;
     font-family: 'Oswald', sans-serif;
        color: #8e8f8d;
        line-height: 1.5;
        font-size: 14px;
}

.footersujet {
    background: #4A1E24;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 2% 0;
  }


/****************************************************** Liens utiles ******************************************************/

#menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu dl {
width: 150px;
margin: 1px;
padding: 0;
list-style-type: none;}

 
#menu dt {
cursor: pointer;
margin: 2px 0;;
height: 20px;
line-height: 20px;
text-align: center;
font-weight: bold;
border: 1px solid #4A1E24;
background: url(https://www.zupimages.net/up/20/17/9jli.png);
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu dd {
border: 1px solid #4A1E24;
margin: 0;
padding: 0;
list-style-type: none;}
 
#menu li {
text-align: center;
  font-size: 12px;
    height: 15px;
background: url(https://i.imgur.com/7GmRHxa.png); /*fond sous menu*/
margin: 0;
padding: 0;
list-style-type: none;
}
 
#menu li a, #menu dt a {
color: #d1cfcf;
text-decoration: none;
display: block;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
 

#menu li a:hover, #menu dt a:hover {
margin: 0;
padding: 0;
list-style-type: none;
background-color: hsla(0, 100%, 99%, 0.5);
}

/* CSS pour intérieur des messages */

.Titreintérieurmessage {
    background: #4A1E24;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 2% 0;
  }

.Soustitreintérieursujet {
    background: #4A1E24;
    width: 100%;
    display: block;
    color: #fff;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 0% 0;
  }

.logonewsujet {
    background: #5ceb46;
    width: 139px;
    display: block;
    color: #000;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 0% 0;
  letter-spacing: .2rem;
  }

.logochangementsujet {
    background: #eb9b46;
    width: 150px;
    display: block;
    color: #000;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 0% 0;
  letter-spacing: .2rem;
  }

.logosuppsujet {
    background: #eb4646;
    width: 140px;
    display: block;
    color: #000;
    text-align: center;
    font-size: 15px;
    text-transform: uppercase;
    font-family: georgia;
    padding: 0% 0;
  letter-spacing: .2rem;
  }

.postbody .content a {
    color: #38761D;
    border-bottom: 1px dotted;
}
 
.postbody .content a:hover {
    color: #595A5E;
    border-bottom: 1px dotted;
}

.ls_content.annonce {background-color:#8a8a8a!important;} /* Modifie la couleur de fond des annonces */
.ls_content.Note {background-color:#383838!important;} /* Modifie la couleur de fond des Note */


.postbody a {
        -moz-transition:all 0.5s; /* Mozilla Firefox */
        -webkit-transition:all 0.5s; /* Safari et Google Chrome */
        -o-transition:all 0.5s; /* Opera */
        transition:all 0.5s;
        background-color:#4A1E24;
        color:#D1CFCF; 
  font-variant-caps: small-caps;
}
 
.postbody a:hover {
        background-color:#D1CFCF;
  font-variant-caps: small-caps;
    }


/* Feuille de combat Duel */
#fiche_arene{
        width: 600px;
        height: auto;
        margin: 0 auto;
        background-image: url("https://2img.net/i.imgur.com/wWGQ8if.jpg");
    }
    .adversaire_1,
    .adversaire_2{
        width: 600px;
        height: auto;
        position: relative;
    }
    .adversaire_1 img,
    .adversaire_2 img{
        width: 600px;
        height: 250px;
        object-fit: cover;
        object-position: top;
    }
    .adversaire_1:hover .infos_adversaire,
    .adversaire_2:hover .infos_adversaire{
        opacity: 1;
    }
    .nom,
    .lvl,
    .stats_1 div,
    .stats_2 div{
        width: 100px;
        padding: 5px;
        font-weight: bolder;
        color: #9B9794;
        font-family: "Cinzel", cursive;
        text-align: center;
    }
    .nom,
    .lvl{
        margin: 10px;
        background-color: rgba(62,2,2,0.7);
    }
    .nom_lvl1{
        position: absolute;
        top: 85px;
        left: 400px;
    }
    .nom_lvl2{
        position: absolute;
        top: 85px;
        left: 60px;
    }
    .stats_1,
    .stats_2{
        display: flex;
        position: absolute;
        top: 230px;
        z-index: 1;
    }
    .stats_1 div,
    .stats_2 div{
        margin: 2px;
        font-size: 11px;
        background-color: #3E0202;
    }
    .stats_2{
        left: 140px;
    }
    .infos_adversaire{
        width: 100%;
        height: 250px;
        position: absolute;
        top: 0;
        background-color: rgba(0,0,0,0.7);
        opacity: 0;
        transition: .5s ease;
    }
    .passifs{
        height: 100px;
        margin: 10%;
        overflow: auto;
    }
    .degats_sorts{
        display: flex;
        margin: 15px;
    }
    .degats,
    .sorts{
        width: 250px;
        margin: 0 auto;
    }
    .sorts{
        height: 100px;
        overflow: auto;
    }

.boutonhautbas {
  text-align: center;

  height: 20px;
  width: 70px;
    bottom: 50px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;}

.boutonhautbas a,
.boutonbas a {
  background: #4A1E24;
    height: 20px;
  width: 70px;
        display: flex;
      align-self: center;
      align-items: center;
      justify-content: center;
}

.boutonhautbas,
.boutonbas {
      display: flex;
      align-self: center;
      align-items: center;
      justify-content: center;
}

.boutonhautbas:hover{
  text-align: center;
  background: #5c2a31;
  height: 20px;
  width: 70px;
    bottom: 50px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}

.boutonhautbas a:hover{
  text-align: center;
  background: #5c2a31;
  height: 20px;
  width: 70px;
    bottom: 50px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}

.boutonbas a:hover{
  text-align: center;
  background: #5c2a31;
  height: 20px;
  width: 70px;
    bottom: 20px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}

.boutonbas {
  background: #4A1E24;
  text-align: center;
  height: 20px;
  width: 70px;
    bottom: 20px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;}

.boutonbas:hover {
  background: #5c2a31;
  text-align: center;
  height: 20px;
  width: 70px;
    bottom: 20px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;}

.zoneneutre {background-color:#362c2c!important;text-align: center;}
.zoneoccupe {background-color:#9e1818!important;text-align: center;}

html {
  scroll-behavior: smooth;
}

Et la deuxième partie !
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Dim 20 Sep 2020 - 5:37

Re,
merci, ce n'est pas ta feuille de style qui génère ce dysfonctionnement.
Tu as modifié les images dans le script ici:
Code:
var M14_editoimgC="https://i.servimg.com/u/f37/19/77/56/49/tout_p10.jpg";

Dans le cas d'une réponse négative, merci de me donner un compte test que je puisse voir ce qui ne vas pas sur ton fofo ( de préférence en MP).

a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Dim 20 Sep 2020 - 6:09

Non, je n'ai touché à rien, l'image est restée la même.
Je te contacte via MP !
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Invité Dim 20 Sep 2020 - 6:36

Re,
merci, je viens de te répondre en MP Wink .
a++
Anonymous

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Ajout d'un icône dans le corps du message

Message par Thomas-Hilde Dim 20 Sep 2020 - 20:47

Le problème est résolu, un grand merci à Milouze pour son aide !
Thomas-Hilde

Thomas-Hilde
**

Masculin
Messages : 62
Inscrit(e) le : 10/06/2018

https://naggaroth.forumactif.com
Thomas-Hilde a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum