Ajout d'un icône dans le corps du message
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Ajout d'un icône dans le corps du message
Détails techniques
Version du forum : phpBB2Poste 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é
Re: Ajout d'un icône dans le corps du message
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++
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++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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 ^^)
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 ^^)
Re: Ajout d'un icône dans le corps du message
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
Je t'explique le fonctionnement:
Pour le l'image du bouton Italic, mettre le lien entre les doubles guillemets.
Le contenu qui sera déposé dans l'éditeur au clic sur le bouton Italic,
mettre le texte entre les doubles guillemets.
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:
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:
Penses à cliquer sur le bouton
Si, tu désires que je te fasse les cinq autres boutons, soit bien explicite sur leurs fonctions .
a++
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";
- 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
Si, tu désires que je te fasse les cinq autres boutons, soit bien explicite sur leurs fonctions .
a++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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 :
Je n'ai "que" à faire ça et je peux gérer mes 8 boutons ?
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
Je n'ai "que" à faire ça et je peux gérer mes 8 boutons ?
Re: Ajout d'un icône dans le corps du message
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:
Toutes les variables se terminent par un C.
Donc le prochain sera par exemple avec U
Puis ajouté le bouton après le dernier:
Ce qui donnera:
Cette dernière partie doit être déposée avant cette fermeture tout en bas du script:
a++
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++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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
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 ^^
Cependant, l'affichage ne se semble pas trop aimer ces changements
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 ^^
Re: Ajout d'un icône dans le corps du message
Re,
hum, le script aurait été un plus .
a++
hum, le script aurait été un plus .
a++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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
Si jamais tu avais une idée !
Par contre, je t'avoue que je ne sais pas quoi faire avec mon problème d'affichage
Si jamais tu avais une idée !
Re: Ajout d'un icône dans le corps du message
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é .
a++
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é .
a++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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.
Pour le moment je n'ai inséré que le premier script que tu m'as présenté dans ton premier message.
Re: Ajout d'un icône dans le corps du message
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 .
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:
a++
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 .
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++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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é )
Par contre le nouveau script ne règle pas la disposition des boutons. Le problème est encore le même
(Désolé )
Re: Ajout d'un icône dans le corps du message
Re,
tu peux me donner le contenu de ta feuille de style stp car tout doit s'aligner..
a++
tu peux me donner le contenu de ta feuille de style stp car tout doit s'aligner..
a++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
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;
}
Re: Ajout d'un icône dans le corps du message
- 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 !
Re: Ajout d'un icône dans le corps du message
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:
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++
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++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
Non, je n'ai touché à rien, l'image est restée la même.
Je te contacte via MP !
Je te contacte via MP !
Re: Ajout d'un icône dans le corps du message
Re,
merci, je viens de te répondre en MP .
a++
merci, je viens de te répondre en MP .
a++
Invité- Invité
Re: Ajout d'un icône dans le corps du message
Le problème est résolu, un grand merci à Milouze pour son aide !
Sujets similaires
» Nom du posteur dans le corps du message
» Gifs dans corps du message.
» Problème avec "Corps du message" dans MP
» Problème pour intégrer un code javascript dans le corps d'un message
» Affichage du codage impossible dans le corps d'un message
» Gifs dans corps du message.
» Problème avec "Corps du message" dans MP
» Problème pour intégrer un code javascript dans le corps d'un message
» Affichage du codage impossible dans le corps d'un message
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum