cadre blanc derrière la palette de couleur

[Mikki]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Internet Explorer
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : je jour de l'installation
Lien du forum : me le demander

Description du problème

Bonjour,

Je me permet de venir vous voir car j'ai suivi ce tuto et quand je regarde le résultat, j'ai un cadre blanc qui apparait. Du coup, je ne sais pas où se trouve le problème.

Pouvez-vous m'aider ?

La seul étape que je n'ai pas fais, c'est ceci : photo car je ne sais pas pourquoi je dois changer la couleur blanche.

Merci d'avance pour votre aide !!

[Toryudo]

Bienvenue sur le forum de support de Forumactif Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser : L'importance de garder secret l'email de fondation, Sécurité : ce qu'il ne faut pas faire, Liste des questions et réponses fréquentes, Liste des trucs et astuces, La fonction rechercher N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Bonjour !

J'obtiens le même résultat que vous quand je ne coche pas "palette simple".
Rendez-vous dans :

Panneau d'administration  Général  Messages et e-mails - Configuration

Et assurez-vous de bien avoir activé la palette simple.

[Mikki]

Merci beaucoup d'avoir pris le temps de regarder mon soucis.

Sachez que ma configuration est bien en "étendu".

Si je met le mode "étendu", j'ai ceci à l'écran :

Spoiler:

Si je met le mode "simple" : j'ai ceci :

Spoiler:

Je vous met mon CSS au cas où :

Code:

.post .name {
  display: block;
  text-align: center;
  padding-top: 5px;
  font-size:20px;text-transform:uppercase;
  font-family:Birch Std;
  }


/******** RANG INVISIBLE ********/
p {
  /* les paragraphes ne seront pas visibles */
  visibility: hidden;
}

p.coucou {
  /* sauf ceux avec la classe coucou */
  visibility: visible;
}


/******** PAGE D'ACCUEIL ********/
/* PA */
.LST {
background:#E17A66; /* MODIFIABLE */
}
/* BLOC CONTEXTE PA */
.ctxtLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* CONTENU CONTEXTE PA */
.ctxtLST div {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* BLOC LIENS PA */
.lksLST {
background:rgba(255,255,255,0.6); /* MODIFIABLE */
}
/* LIENS PA */
.lksLST a {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* BLOC EVENEMENT PA */
.eventLST {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* TRIANGLE BLOC EVENEMENT PA */
.eventLST::before {
border-left-color:#E17A66 !important; /* MODIFIABLE */
}
/* LIEN EVENEMENT PA */
.eventLST a {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* BLOC NOUVELLES PA */
.newsLST {
background:white; /* MODIFIABLE */
}
/* CONTENU NOUVELLES PA */
.newsLST div {
background:white; color:#E17A66; /* MODIFIABLE */
}
/* PREDEFINIS PA */
.pfLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* PARTENAIRES PA */
.partLST {
background:rgba(255,255,255,0.6); /* MODIFIABLE */
}
/* BANDE STAFF & DISCLAIMER */
.bandLST {
background:rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* CONTENUS STAFF PA */
.staffLST div p {
background:rgba(255,255,255,0.9); color:#E17A66; /* MODIFIABLE */
}
/* DISPONIBLE PA */
.onLST {
background:lightgreen; color:#E17A66; /* MODIFIABLE */
}
/* INDISPONIBLE PA */
.offLST {
background:#E17A66; color:white; /* MODIFIABLE */
}
/* LIENS PROFILS STAFF PA */
.staffLST div p a {
color:#E17A66; /* MODIFIABLE */
}
/* DISCLAIMER PA */
.disLST {
background:rgba(0,0,0,0.2); color:white; /* MODIFIABLE */
}
/* COULEUR LIENS DISCLAIMER PA */
.disLST a {
color:#E17A66; /* MODIFIABLE */
}


/******** PROFIL MEMBRES ********/
/* AFFICHAGE DU PROFIL */
.PFIL {
margin:auto; width:800px; font-family:Birch Std;
}
/* BLOC ADMINISTRATION & DERNIERE VISITE PROFIL */
.lstPFIL {
margin-bottom:15px;
padding:2px 5px; border:1px solid;
font-size:10px; text-transform:uppercase; text-align:right;  
border-color:#FFFFFF; background:#E17A66; color:FFFFFF; /* MODIFIABLE */
}
/* ADMINISTRATION PROFIL */
.adminPFIL {
float:left; margin-top:1px;
font-size:9px; text-align:left; text-transform:uppercase;
color:white; /* MODIFIABLE */
opacity:0.7;
}
/* LIENS ADMINISTRATION PROFIL */
.adminPFIL a {
color:white; /* MODIFIABLE */
}
/* INTITULE DERNIERE VISITE PROFIL */
.lstPFIL span {
font-weight:bold; color:white; /* MODIFIABLE */
}
/* BLOC AVATAR PROFIL */
#avPFIL {
display:inline-block; vertical-align:top; margin-right:15px;
width:200px; padding:10px; border:1px solid;
border-color:white; background:#E17A66; /* MODIFIABLE */
}
/* AVATAR PROFIL */
.avPFIL {
margin-bottom:10px;
width:200px; height:320px; overflow:hidden;
}
/* SUJETS UTILISATEUR PROFIL */
.sbjPFIL {
display:inline-block; vertical-align:middle; margin-right:10px;
width:73px; height:21px; padding:7px 10px 0; border:1px solid;
text-transform:uppercase; text-align:center; font-size:10px; line-height:15px;
border-color:white; background:rgba(255,255,255,0.4); color:white !important; /* MODIFIABLE */
}
/* MESSAGES UTILISATEUR PROFIL */
.msgPFIL {
display:inline-block; vertical-align:middle;
width:73px; height:21px; padding:7px 10px 0; border:1px solid;
text-transform:uppercase; text-align:center; font-size:10px; line-height:15px;
border-color:white; background:rgba(255,255,255,0.4); color:white !important; /* MODIFIABLE */
}
/* PSEUDONYME & INFORMATIONS PROFIL */
.boxPFIL {
display:inline-block; vertical-align:top;
}
/* BLOC PSEUDONYME PROFIL */
.namePFIL {
margin-bottom:10px;
height:30px; padding:20px;
text-transform:uppercase; text-align:center; font-size:20px; line-height:30px;
background:#E17A66; /* MODIFIABLE */
}
/* TRIANGLE PSEUDONYME PROFIL */
.namePFIL::before {
content:''; float:left; margin-left:-35px; margin-top:3px;
width:0; height:0; border-style:solid; border-width:12.5px 15px 12.5px 0; border-color:transparent;
border-right-color:#E17A66; /* MODIFIABLE */
}
/* PSEUDONYME PROFIL */
.namePFIL span strong {
color:white; /* MODIFIABLE */
}
/* BLOC INFORMATIONS PROFIL */
.abtPFIL {
margin-top:15px;
width:541px; height:275px; padding:10px; overflow-y:auto;
border:1px solid; font-size:11px;
border-color:white; background:white; color:E17A66; /* MODIFIABLE */
}
/* INTITULES INFORMATIONS PROFIL */
.abtPFIL div span {
font-weight:bold; text-transform:uppercase; color:#E17A66; /* MODIFIABLE */
}
/* INFORMATIONS PROFIL */
.abtPFIL div {
padding:2px 0;
}
.abtPFIL .field_uneditable {
display:inline-block;
}
/* BLOC IMAGES CONTACT PROFIL */
#ktactPFIL {
margin-top:15px;
padding:10px 5px 10px 0; text-align:right;
background:rgba(0,0,0,0.8); /* MODIFIABLE */
}
/* IMAGES CONTACT PROFIL */
.ktactPFIL {
display:inline-block; vertical-align:middle; margin:0 5px;
max-height:25px; overflow:hidden;
}
.ktactPFIL img {
margin:auto; max-height:25px;
}
/* FEUILLE DE PERSONNAGE PROFIL */
.boxRPG {
margin-top:10px;
width:780px; padding:10px; border:1px solid;
border-color:white; background:#E17A66; /* MODIFIABLE */
overflow:hidden;
}
/* CONTENU FEUILLE DE PERSONNAGE PROFIL */
.boxRPG span {
text-transform:uppercase; font-size:10px; color:white; /* MODIFIABLE */
width:780px;
overflow:hidden;
}
.boxRPG div:nth-of-type(1) br {
display:auto;
width:780px;
}
/* MODERATION PROFIL */
.ajax-profil_edit {
position:absolute; z-index:15; margin-top:4px; margin-left:7px;
}
.ajax-profil_edit img{
width:7px;
}



/******** LISTE DES MEMBRES ********/
/* AFFICHAGE LISTE DES MEMBRES */
#LMBER {
margin:auto; width:775px;
}
/* ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
margin:0 auto 5px; width:765px;
background:rgba(255,255,255,0.5); /* MODIFIABLE */
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:Birch Std; font-size:16px;
background:#E17A66; color:white; /* MODIFIABLE */
}
/* BLOC MEMBRE */
.MBER {
float:left; margin:5px;
width:145px; padding-top:10px; text-align:center;
background:grey; /* MODIFIABLE - COULEUR PAR DEFAUT */
}
/* AVATAR */
.imgLMBER{
margin:auto; margin-bottom:-55px;
width:130px; height:130px; border-radius:130px; overflow:hidden;
}
.imgLMBER img{
width:130px;
}
/* NOMBRE DE MESSAGES */
.msgLMBER {
position:absolute; margin-top:10px; margin-left:10px;
width:80px; height:50px; padding-top:30px; border-radius:80px;
font-family:Birch Std; font-size:16px; text-align:center; font-weight:bold;
background:rgba(250,250,250,0.7); /* MODIFIABLE */
opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease;
}
.imgLMBER:hover .msgLMBER {
opacity:1;
}
/* BLOC PSEUDONYME & INSCRIPTION / DERNIERE VISITE / IMAGES MP & WWW */
.boxLMBER {
padding:45px 10px 7px;
font-family:Birch Std; text-align:center;
background:rgba(255,255,255,0.8); /* MODIFIABLE */
}
/* BLOC PSEUDONYME & INSCRIPTION */
.nameLMBER{
margin-top:20px; height:30px; padding:5px 0;
text-align:center; text-transform:uppercase; letter-spacing:-0.5px; font-family:Birch Std; font-size:12px;
background:#FEFEFE; /* MODIFIABLE */
}
/* DATE INSCRIPTION */
.joinLMBER{
font-size:10px; text-align:center; letter-spacing:0;
}
/* DERNIERE VISITE */
.lstvLMBER {
margin-top:5px; padding:2px 0;
background:rgba(255,255,255,0.6); /* MODIFIABLE */
font-size:9px; text-align:center;
}
/* IMAGES MP & WWW */
.btnLMBER {
margin-top:5px; height:15px;
}
.btnLMBER img{
max-height:15px; filter:grayscale(1); -webkit-filter:grayscale(1);
}





*/*********** SCROLLBAR ***********/
/*La scrollbar elle-même*/
::-webkit-scrollbar {
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}
/*L'espace sur lequel la barre de la scrollbarre défile*/
::-webkit-scrollbar-track {
  background: #E17A66;
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}
/*La barre de la scrollbar*/
::-webkit-scrollbar-thumb {
  background: #FFFFFF;
  width: 10px; /*Largeur pour les scrollbars verticales*/
  height: 10px; /*Hauteur pour les scrollbars horizontales*/
  border-radius: 5px;
}


/*À voir dans les pseudo-class plus bas*/
::-webkit-scrollbar-thumb:hover {
  background: #E9A69A;
}
::-webkit-scrollbar-thumb:active {
  background: #E9A69A;
}



/******** AVATAR MEMBRE TOOBART ********/
.fa_avatar img {
  width: 25px;
  height: 25px;
  position: relative;
  top: -3px;
  margin-right: 5px;
  border-radius: 5px;
  margin-bottom: -10px;
}


/******** HTAGS ********/
/* image du bouton hashtag */
.sceditor-button-hashtag div { background-image:url(https://i.servimg.com/u/f19/19/06/98/92/scehas11.png) !important }
 
/* menu déroulant des hashtags */
#fa-hashtag {
  background:url(https://i.servimg.com/u/f19/19/06/98/92/scehas11.png) no-repeat 3px 50% #E17A66;
  padding-left:22px;
}


/* hashtag style */
a.fa-hashtag {
  color:#000000;
  text-decoration:none;
  border-radius:3px;
  display:inline-block;
  padding:3px;
}
 
a.fa-hashtag:hover {
  color:#000000;
}


/* options du menu des hashtags */
.fa-hashtag-options {
  color:#666;
  font-size:11px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  line-height:14px;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:0 3px 6px rgba(0, 0, 0, 0.175);
  margin-top:20px;
  padding:3px;
  position:absolute;
  z-index:100;
}
 
/* options du titre */
.fa-hashtag-title {
  font-size:12px;
  border-bottom:1px solid #CCC;
  padding-bottom:3px;
  margin-bottom:3px;
}
 
/* options des liens */
.fa-hashtag-options a {
  color:#333;
  text-decoration:none;
  display:inline-block;
  padding:2px 6px 2px 0;
}
 
.fa-hashtag-options a:hover {
  color:#666;
  text-decoration:underline;
}
 
/* options des mots gras */
.fa-hashtag-options b {
  color:#333;
  padding-left:6px;
}
 
/* options des tags */
.fa-hashtag-tag {
  color:#FFFFFF;
  font-weight:bold;
}




/******** FLECHES HAUT ET BAS ********/
.boutonhautbas {
    bottom: 40px;
    right: 20px; /* remplacez right par left pour afficher les boutons à gauche */
    position: fixed;
    z-index: 100;
}


/******** Personnalisation des je t'aime  boutons ********/
 
/* Couleur du texte du bouton J'aime */
 
.fa_like {
  color: #FF5454;
}
 
/* Couleur du texte du bouton J'aime (active) */
 
.fa_liked {
  color: #FF5454;
}
 
/* Couleur du texte du bouton Je n'aime pas */
 
.fa_dislike {
  color: #E99262;
}
 
/* Couleur du texte du bouton Je n'aime pas (active) */
 
.fa_disliked {
  color: #D70000;
}
 
/******** Personnalisation avancée des boutons je t'aime ********/
 
.rep-button, .rep-button:active, .rep-button:focus {
 
    background: #FFFFFF; /* Couleur de fond */
    border: 1px solid #CE5328; /* Couleur de la bordure du bouton */
    border-radius: 4px; /* Bordure arrondis du bouton */
    box-shadow: 0 -1px 0 #CE5328 inset; /* Ombre de la bordure du bouton */
    font-family: Trebuchet MS; /* Police d'écriture du bouton */
    font-size: 11.4px; /* Taille de la police d'écriture du bouton */
    font-weight: 700; /* Taille de la police grasse du bouton */
    height: 17px; /* Hauteur des boutons */
    text-transform: initial; /* Pour mettre une majuscule aux noms des boutons */
}




/************************************** BASE DU FORUM **************************************/
/* BLOC TITRE CATEGORIE */
.tleCAT {
margin:5px auto 0; width:800px; padding:15px 0; text-align:center;
background-image:url('https://i.postimg.cc/3RykQSTY/00-2.png'); background-repeat:repeat;
border-radius: 30px 30px 10px 10px;
}
/* TITRE CATEGORIE */
.tleCAT h2 {
margin:0; font-size:32px; text-transform:uppercase; font-family:Birch Std;
color:white; /* MODIFIABLE */
}
/* CONTENU CATEGORIE */
.mdlCAT {
margin:auto;
width:800px; padding:25px 0 10px;
background:#FDCCB1; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.btmCAT {
margin:auto; margin-bottom:10px; width:800px;
height:15px;
background-image:url('https://i.postimg.cc/PJKwyLbR/00-1.png'); background-repeat:repeat;  
border-radius: 10px 10px 30px 30px;
}
/* BLOC FORUM */
.FRM {
margin:auto; margin-bottom:15px;
width:750px; text-align:center; font-family:Birch Std;
border-radius: 10px;
}
/* BLOC TITRE FORUM */
.tleFRM {
margin:auto; margin-bottom:10px;
width:750px; padding:5px 0;
text-align:left; font-size:14px; text-transform:uppercase; letter-spacing:3px;
background-image:url('https://i.postimg.cc/s225N4H4/00.png'); background-repeat:repeat;
border-radius: 10px;
}

/* TITRE FORUM */
.tleFRM a {
padding-left:7px;font-family:Birch Std;
color:#AF430E !important; /* MODIFIABLE */
}
/* DESCRIPTION FORUM */
#descFRM {
display:inline-block; vertical-align:top;
width:400px; height:100px; overflow:hidden;
background:rgba(250,250,250,0.3); color:#AF430E; /* MODIFIABLE */
}
.descFRM {
position:relative;
width:400px; height:100px; overflow:hidden;
}
.descFRM div {
width:390px; height:90px; padding:5px; overflow-y:auto;
font-size:10px; text-align:justify; line-height:15.5px;
}
/* IMAGE DESCRIPTIVE FORUM */
#descFRM img {
position:absolute; z-index:5; margin-top:-5px; margin-left:-5px;
width:400px; height:100px;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
#descFRM:hover img {
transform:translateX(-400px); -webkit-transform:translateX(-400px);
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.avaFRM {
display:inline-block; vertical-align:top; margin:0 10px;
width:50px; height:90px; border:5px solid;
border-color:rgba(250,250,250,0.3); background:#E17A66; /* MODIFIABLE */
border-radius: 10px;
}
.avaFRM div {
width:50px; height:90px; overflow:hidden;
border-radius: 10px;
}
.avaFRM div img {
width:60px;
border-radius: 10px;
}
/* BLOC SOUS-FORUMS */
.sfFRM {
display:inline-block; vertical-align:top; margin-right:10px;
width:100px; height:90px; padding:5px; overflow:hidden;
color:rgba(0,0,0,0); line-height:0;
background:#F4A275(250,250,250,0.5);  /* MODIFIABLE */
border-radius: 10px;
}
.sfFRM:hover {
overflow-y:auto;
border-radius: 10px;
}
/* LIENS SOUS-FORUMS */
.sfFRM a {
display:block; margin-bottom:5px; padding:3px 0;
text-transform:uppercase; line-height:12px;
background:white; color:#AF430E !important; /* MODIFIABLE */
border-radius: 10px;
}
/* BLOC ICÔNES / DERNIER MESSAGE FORUM / NOMBRE SUJETS & MESSAGES FORUM */
.boxFRM {
display:inline-block; vertical-align:top;
width:150px;
border-radius: 10px;
}
/* BLOC ICÔNES FORUM / DERNIER MESSAGE FORUM */
.lmsgFRM {
margin-bottom:5px;
width:150px; height:75px;
border-radius: 10px;
}
/* ICÔNES FORUM */
.imgFRM {
width:150px; height:75px;
}
/* DERNIER MESSAGE FORUM */
.lmsgFRM div {
position:absolute; margin-top:-75px;
width:140px; height:75px; padding:0 5px; overflow:hidden;
text-align:center; font-size:10px;
background:rgba(255,255,255,0.9); color:#AF430E; /* MODIFIABLE */
opacity:0; transition:opacity 0.65s ease; -webkit-transition:opacity 0.65s ease;
}
.FRM:hover .lmsgFRM div {
opacity:1;
}
/* COULEUR TITRE SUJET DERNIER MESSAGE FORUM */
.lmsgFRM a {
text-transform:uppercase; color:#AF430E; /* MODIFIABLE */
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.nbFRM {
width:150px; height:17px; padding-top:3px; overflow:hidden;
text-transform:uppercase; font-size:10px; letter-spacing:-0.5px; line-height:15px;
background:rgba(250,250,250,0.3); color:#AF430E; /* MODIFIABLE */
border-radius: 30px;
}

/************************************** QEEL **************************************/

/* QEEL */
#QEEL {
margin:auto; width:800px; font-family:Birch Std;
border-radius: 30px;
}
/* BLOC TITRE QEEL */
.tleQEEL {
width:800px; padding:10px 0;
text-align:right; text-transform:uppercase;
background-image:url('https://i.postimg.cc/3RykQSTY/00-2.png'); background-repeat:repeat;
border-radius: 30px 30px 10px 10px;

}
/* TITRE QEEL */
.tleQEEL a{
margin-right:10px; font-family:Birch Std; font-size:36px;
color:#FFFFFF; /* MODIFIABLE */
}
/* BLOC GAUCHE QEEL */
#blocQEEL {
display:inline-block; vertical-align:top;
border-radius: 0px 0px 0px 30px;
}
.blocQEEL {
position:relative; width:300px; height:275px; overflow:hidden;
border-radius: 0px 0px 0px 30px;
}
#blocQEEL img{
position:absolute;
transition:transform 0.80s linear; -webkit-transition:transform 0.80s linear;
border-radius: 0px 0px 0px 30px;
}
/* BLOC MEMBRES EN LIGNE / 24H QEEL */
#ondayQEEL {
width:300px; height:265px; padding-top:10px; text-align:center;
background:rgba(250,250,250,0.3); /* MODIFIABLE */
transform:translateX(300px); -webkit-transform:translateX(300px);
transition:transform 0.80s linear; -webkit-transition:transform 0.80s linear;
}
#blocQEEL:hover #ondayQEEL {
transform:translateX(0px); -webkit-transform:translateX(0px);
}
#blocQEEL:hover img{
transform:translateX(-300px); -webkit-transform:translateX(-300px);
}
/* MEMBRES CONNECTES QEEL */
.onlineQEEL {
margin:auto; margin-bottom:10px;
width:270px; height:100px; padding:5px; overflow:auto;
background:rgba(250,250,250,0.7); color:#AF430E;  /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* 24H QEEL */
.dayQEEL {
margin:auto; width:270px; height:125px; padding:5px; overflow:auto;
background:rgba(250,250,250,0.7); /* MODIFIABLE */
font-size:10px; text-align:justify;
}
.dayQEEL .row1 {
padding:0; background:none;
}
/* COULEUR TEXTE 24H QEEL */
.dayQEEL .row1 .gensmall {
font-family:Birch Std;
color:#FDCCB1; /* MODIFIABLE */
}
/* STATISTIQUES QEEL */
.stsQEEL {
display:inline-block; vertical-align:top;
width:275px; height:260px; padding-top:15px; overflow:hidden;
background:rgba(250,250,250,0.2); color:#AF430E; /* MODIFIABLE */
text-align:center; font-size:11px;
}
/* INTITULES STATISTIQUES QEEL */
.stsQEEL div {
margin:5px auto; width:75%; padding:5px 0;
text-transform:uppercase; font-weight:bold; text-align:center;
border-bottom:1px solid #AF430E; color:#AF430E; /* MODIFIABLE */
}
/* ANNIVERSAIRES QEEL */
.anvQEEL {
display:block; margin:10px auto 0;
width:195px; height:65px; padding:5px; overflow:hidden;
border-radius: 10px 10px 10px 10px; font-weight:normal; text-align:justify;
background:#F8BF9F; /* MODIFIABLE */
transform:scale(0.5); -webkit-transform:scale(0.5); transition:transform 0.65s ease; -webkit-transition:transform 0.65s ease;
}
.anvQEEL:hover {
overflow:auto; transform:scale(1); -webkit-transform:scale(1);
}
.anvQEEL .row1{
padding:0; background:none !important;
}
/* COULEUR TEXTE ANNIVERSAIRES QEEL */
.anvQEEL .row1 .gensmall {
font-family:Birch Std;
color:#FFFFFF; /* MODIFIABLE */
}
/* BLOC DROITE QEEL */
#blocIIQEEL {
display:inline-block; vertical-align:top;
border-radius: 0px 0px 30px 0px;
}
.blocIIQEEL {
position:relative; width:225px; height:275px; overflow:hidden;
border-radius: 0px 0px 30px 0px;
}
#blocIIQEEL:hover .GQEEL {
transform:translateX(0px); -webkit-transform:translateX(0px);
border-radius: 0px 0px 30px 0px;
}
#blocIIQEEL img {
position:absolute; width:225px; height:275px;
transition:transform 0.80s linear; -webkit-transition:transform 0.80s linear;
border-radius: 0px 0px 30px 0px;
}
#blocIIQEEL:hover img{
transform:translateX(225px); -webkit-transform:translateX(225px);
border-radius: 0px 0px 30px 0px;
}
/* BLOC GROUPES QEEL */
.GQEEL {
width:225px; height:255px; padding:10px 0;
text-align:center; color:rgba(0,0,0,0); line-height:8px;
background:rgba(250,250,250,0.3); /* MODIFIABLE */
transform:translateX(-225px); -webkit-transform:translateX(-225px);
transition:transform 0.80s linear; -webkit-transition:transform 0.80s linear;
border-radius: 0px 0px 30px 0px;
}
/* GROUPES QEEL */
.GQEEL a {
display:block; padding:5px;
text-transform:uppercase; font-weight:bold; text-align:center;
font-size:16px; font-family:Birch Std; /* MODIFIABLE */
}


/************************************** BARRE DE NAVIGUATION **************************************/
/* NAVIGATION */
.navSIT {
position:absolute; top:100px; margin-left:800px; /* MODIFIABLE - DETERMINE LA POSITION */
line-height:0px; border-top:2px solid;
border-top-color:white; /* MODIFIABLE */
}
.mainmenu img{
display:none;
}
/* LIENS NAVIGATION */
.navSIT a.mainmenu {
display:block;
width:135px; padding:5px 0; border:2px solid; border-top:none;
text-align:center; line-height:normal;
text-transform:uppercase; font-size:11px; font-family:Birch Std; /* MODIFIABLE */
background:#E17A66; border-color:white; color:white; /* MODIFIABLE */
}
/* SURVOL LIEN NAVIGATION */
.navSIT a.mainmenu:hover {
background:#FCBC9A; /* MODIFIABLE */
}
/* DECONNEXION */
a#logout.mainmenu {
font-size:0px;
}
a#logout.mainmenu::after {
display:inline-block; vertical-align:middle;
font-size:11px !important; content:'Déconnexion'; /* MODIFIABLE */
}
/* MENU RECHERCHE */
#search_menu {
top:80px !important; left:-50px !important;
}
/* COULEUR FOND MENU RECHERCHE */
#search_menu td.row2 {
background:lightgrey !important; font-family:Birch Std; /* MODIFIABLE */
}
/* COULEUR TEXTE MENU RECHERCHE */
#search_menu td.row2 span.genmed {
color:#F4A275 !important; /* MODIFIABLE */
}
/* TITRE MENU RECHERCHE */
#search_menu th.thHead {
text-transform:uppercase; font-family:Birch Std; /* MODIFIABLE */
background:grey; color:white; /* MODIFIABLE */
}
/* BARRE MENU RECHERCHE */
#search_menu input.post {
height:23px !important; border:none !important;
background:white; color:#F4A275; /* MODIFIABLE */
}
/* BOUTON MENU RECHERCHE */
#search_menu input.button {
height:25px; border:none !important; text-transform:uppercase;
background:grey; color:white !important; /* MODIFIABLE */
}
/* RECHERCHE AVANCEE */
#search_menu a{
display:block; margin-bottom:5px; width:235px;
background:none !important; border:none !important;
text-transform:uppercase; font-weight:bold; color:#AF430E !important; /* MODIFIABLE */
}

/************************************** LISTE SUJETS **************************************/
/* PRESENTATION LISTE SUJETS */
/* BLOC SUJET */
.LSBJ {
width:800px; margin:5px auto; font-family:Birch Std;
}
/* OUTIL MODERATION SUJET */
.modSBJ {
position:absolute; z-index:3; margin-left:-25px; margin-top:15px;
}
/* ICÔNES SUJET */
.imgSBJ {
display:inline-block; vertical-align:top; margin-right:5px;
width:50px; height:50px;
}
/* TITRE / STATISTIQUES / DERNIER MESSAGE / AUTEUR SUJET */
.boxSBJ {
display:inline-block; vertical-align:top; width:720px;
}
/* BLOC TITRE SUJET */
.tleSBJ {
display:inline-block; vertical-align:top;
width:455px; height:60px; padding:0 5px 0 10px; overflow:hidden; border-bottom:5px solid;
background:#FDCCB1; border-color:#F4A275; color:#E17A66; /* MODIFIABLE */
text-align:left; text-transform:uppercase;
}
/* TITRE SUJET */
.tleSBJ a {
color:#AF430E !important; /* MODIFIABLE */
}
/* DESCRIPTION SUJET */
.descSBJ {
color:#FDCCB1; /* MODIFIABLE */
font-size:10px; text-align:justify;
}
/* BLOC DERNIER MESSAGE & AUTEUR SUJET */
.boxIISBJ {
display:inline-block; width:250px;
}
/* DERNIER MESSAGE SUJET */
.lmsgSBJ {
height:15px; padding:5px; overflow:hidden;
background:rgba(250,250,250,0.5); color:#AF430E; /* MODIFIABLE */
font-size:8px; text-align:center;
}
/* AUTEUR SUJET */
.nameSBJ {
height:20px; padding:13px 5px 7px 5px; overflow:hidden;
background:#FDCCB1; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* VUES SUJET */
.vuesSBJ {
display:inline-block; vertical-align:top;
width:85px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:#AF430E; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* REPONSES SUJET */
.repSBJ {
display:inline-block; vertical-align:top; margin:0 5px;
width:95px; height:20px; padding-top:5px;
background:rgba(250,250,250,0.8); color:#AF430E; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* LISTE DES PAGES */
.gotoSBJ {
display:inline-block; vertical-align:top; margin-top:5px;
width:530px; font-size:10px; text-align:right;
color:#E17A66; /* MODIFIABLE */
}
.gotoSBJ a{
color:#E17A66 !important; /* MODIFIABLE */
}
.gotoSBJ br:nth-of-type(1) {
display:none;
}

/************************************** PALLETTE COULEUR **************************************/
/* Icônes couleur dans la palette */
.color-option {
display: inline-block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
border: 2px solid #fff !important;  /* cadre blanc sur l'icône couleur */
margin: 3px !important;   /* espace entre chaque icône */
box-shadow: 0 0 2px #778899;   /* ombre */
cursor: pointer !important;
}
.color-option span{
display: block !important;
width: 15px !important;  /* largeur de l'icône couleur */
height: 15px !important;  /* hauteur de l'icône couleur */
}
.color-option, .color-option span {
border-radius: 2px;  /* arrondi */  
}
 
/* Palette complète - la largeur influence le nombre d'icônes affichées */
.sceditor-dropdown.sceditor-color-picker {
width: 200px !important;  /* largeur de la palette complète */
height: 100px !important;  /* hauteur de la palette complète */
padding: 5px !important;
border-radius: 5px !important;
}

/************************************** ASSOCIER UN PERSONNAGE A GAUCHE **************************************/
:root { /*MODIFIABLE */
  --color-text: rgba(255, 255, 255, 0.87);
  --color-delete: #E7683C;
  --color-tooltip: #E17A66;
  --color-squircle: #E17A66;
  --color-accent: #E17A66;
  --color-button: #FDCCB1;
  --color-pill: #ffffff;
  --gap-size: 16px;
  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.43, 0.09, 0.38, 2.56);
border-color:white; /* MODIFIABLE */
border-radius: 10px;
}

.switcheroo {
  color: var(--color-text);
  background-color: var(--color-bg);
  font-size: 16px;
}
.switcheroo[position="static"] {
  position: relative;
}
.switcheroo[position="top"] {
  position: fixed;
  top: 50;
  left: 0;
  z-index: 100;
}
.switcheroo[position="bottom"] {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
}
.switcheroo[direction="horizontal"] {
  width: 100%;
}
.switcheroo[direction="vertical"] {
  height: 100%;
}

.switcheroo__squircles {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  padding: var(--gap-size);
  gap: var(--gap-size);
}
.switcheroo[direction="horizontal"] .switcheroo__squircles {
  flex-direction: row;
}
.switcheroo[direction="vertical"] .switcheroo__squircles {
  flex-direction: column;
}

/* squircle */
.switcheroo[theme="discord"] .switcheroo__squircle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-squircle);
}
.switcheroo[theme="discord"] .switcheroo__squircle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: border-radius 128ms var(--ease);
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover {
  border-radius: 36%;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  top: 50%;
  transform: translate(-100%, -50%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background-color: var(--color-pill);
  position: absolute;
  border-radius: 4px;
  left: 50%;
  transform: translate(-50%, -100%) scale(0);
  transition: transform 128ms, opacity 64ms;
  pointer-events: none;
  opacity: 0;
}
.switcheroo[theme="discord"] .switcheroo__squircle.active {
  border-radius: 36%;
  cursor: default;
}
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-50%, -100%) scale(0.5);
}

.switcheroo[theme="discord"][direction="vertical"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-85%, -50%) scale(0.2);
  border-radius: 50%;
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__squircle.active:before {
  opacity: 1;
  transform: translate(-50%, -85%) scale(0.2);
  border-radius: 50%;
}


/* tooltip */
.switcheroo__popper {
  background-color: var(--color-tooltip);
  padding: 0.68rem 1rem;
  position: absolute;
  width: -webkit-max-content;
  width: max-content;
  border-radius: 4px;
  z-index: 0;
  opacity: 0;
  transition: opacity 64ms var(--ease), transform 128ms var(--ease-bounce);
  pointer-events: none;
  color: #ffffff;
}
.switcheroo[direction="vertical"] .switcheroo__popper {
  left: 155%;
  top: 50%;
  transform-origin: left;
  transform: translateY(-50%) scale(0.98);
}
.switcheroo[direction="horizontal"] .switcheroo__popper {
  top: 155%;
  left: 50%;
  transform-origin: top;
  transform: translateX(-50%) scale(0.98);
}
.switcheroo__popper:before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  background-color: var(--color-tooltip);
  z-index: -1;
}
.switcheroo[direction="vertical"] .switcheroo__popper:before {
  left: -2px;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}
.switcheroo[direction="horizontal"] .switcheroo__popper:before {
  left: 50%;
  top: -2px;
  transform: translateX(-50%) rotate(-45deg);
}

.switcheroo[direction="vertical"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.switcheroo[direction="horizontal"] .switcheroo__squircle:hover .switcheroo__popper {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.switcheroo__squircle:hover:before {
  opacity: 1;
  transform: translate(-100%, -50%) scale(0.5);
}

/* avatar */
.switcheroo[theme="discord"] .switcheroo__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.switcheroo[theme="discord"] .switcheroo__avatar img {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* divider */
.switcheroo[theme="discord"][direction="vertical"] .switcheroo__divider {
  width: 100%;
  height: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
.switcheroo[theme="discord"][direction="horizontal"] .switcheroo__divider {
  width: 2px;
  background-color: var(--color-pill);
  border-radius: 1px;
  opacity: 0.06;
  transform: scale(0.8);
}
/* delete button */
.switcheroo[theme="discord"] .switcheroo__delete {
  display: flex;
  justify-content: center;
  position: absolute;
  width: 16px;
  line-height: 14px;
  height: 16px;
  top: -2px;
  right: -2px;
  border-radius: 50%;
  background-color: var(--color-delete);
  transform: scale(0);
  opacity: 1;
  transition: transform 128ms var(--ease), opacity 64ms var(--ease);
  cursor: pointer;
  font-size: 13px;
}
.switcheroo[theme="discord"] .switcheroo__squircle:hover .switcheroo__delete {
  opacity: 1;
  transform: scale(1);
}
/* logo */
.switcheroo[theme="discord"] .switcheroo__logo {
}
.switcheroo[theme="discord"] .switcheroo__logo img {
  width: 32px;
}
.switcheroo[theme="discord"] .switcheroo__logo:hover {
  background-color: var(--color-accent);
}
/* buttons */
.switcheroo[theme="discord"] .switcheroo__squircle--button {
  transition: border-radius 128ms var(--ease);
  color: var(--color-button);
}
.switcheroo[theme="discord"] .switcheroo__squircle--button:hover {
  color: #fff;
  background-color: var(--color-button);
}
/* modal */
.switcheroo__form {
  padding: 48px;
}
.switcheroo__form-row {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 16px;
}
.switcheroo__form-label {
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--color-text) !important;
}
.switcheroo__form-input {
  padding: 6px !important;
  font-size: 16px !important;
  border-radius: 4px !important;
  width: 100% !important;
  border-bottom: 2px solid var(--color-accent) !important;
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  cursor: text !important;
}
.switcheroo__form-button {
  border-radius: 8px;
  padding: 8px;
  border: none;
  outline: none;
  box-shadow: none;
  text-transform: uppercase;
  font-size: 14px;
  align-self: flex-end;
  color: #fff;
  background-color: var(--color-accent);
}

.monomer-overlay {
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: rgba(0, 0, 0, 0.6);
}

.monomer-modal {
  position: fixed;
  z-index: 999;
  top: 50%;
  left: 50%;
  opacity: 0;
  width: 94%;
  padding: 24px 20px;
  transition: 0.2s opacity ease;
  transform: translate(-50%, -50%);
  border-radius: 2px;
  background: var(--color-squircle);
  color: var(--color-text);
}

.monomer-modal.monomer-open.monomer-anchored {
  top: 20px;
  transform: translate(-50%, 0);
}

.monomer-modal.monomer-open {
  opacity: 1;
}

.monomer-overlay.monomer-open {
  opacity: 1;
}

.monomer-close {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  width: 24px;
  height: 24px;
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 5px;
  cursor: pointer;
  color: #fff;
  border: 0;
  outline: none;
  background: var(--color-delete);
  border-radius: 50%;
  padding: 0;
}
.monomer-close:hover {
  opacity: 0.8;
}



/*** ------------------------------- ***/
/*Cadre avatar*/
.avatar_cadre {
  margin-top: 3px;
  width: 200px;
  height: 320px;
  background-color: white;
  padding: 5px;
  border-radius: 10px 10px 10px 10px;
  border: groove 1em #E17A66;
}
/*Redimensionnement avatar*/
.avatar_cadre img {
  width: 200px;
  height: 320px;
  border-radius: 10px 10px 10px 10px;
}

/*** PROFIL SYSTEME ONGLET --------------- ***/
/* .systab .tab => les onglet */
.systab .tab {
  padding: 2px 10px; /*contrôle la largeur et longueur des rectangles "onglet 1, 2 et 3"*/
  margin-left: 10px; /* créée un espace entre les 3 titres d'onglets*/
  color: #AF430E;
  background: #FDCCB1;
  border: 2px solid #E17A66;
  cursor: pointer;
  border-radius: 20%;
}
/* .systab .tab:hover => les onglets survolés */
.systab .tab:hover {
  background: #FDCCB1;
  color: #AF430E;
  border-color: #E17A66;
  border-radius: 20%;
}
/* .systab .tab.selected => les onglets sélectionnés */
.systab .tab.selected{
  color: #FFFFFF;
  border:2px solid #E17A66;
  background: #E17A66;
}
/* .systab .contents => les conteneurs des contenus associés aux onglets  */
.systab .contents {
  margin-bottom: 10px;
  color: #AF430E;
  background: #FDCCB1;
  border:2px solid #E17A66;
  padding-top:10px;
}
/* style des onglets si ils sont à gauche ou à droite */
.systab.s_float .tab,.systab.s_float .tab {
  display: block;
  margin: 10px;
}
/* flottement des conteneurs si les onglets sont à gauche où à droite */
.systab.s_float .tabs,.systab.s_float .contents {
  float: left;
}


Du coup, je préfère la version "étendu" car y'a plus de choix de couleur...

[Toryudo]

Bonjour !

Mais, je n'ai pas compris : quand vous mettez le mode "simple", vous avez exactement le même rendu que le tuto https://forum.forumactif.com/t357566-personnaliser-la-palette-de-couleurs-de-lediteur


C'est donc bon, non ? Ce n'est pas ce que vous voulez ?

[Mikki]

Ahhhhhhhhhhhh mais pardon, c'est moi !!! J'ai compris le tuto à l'envers !!! Je voulais avoir l'autre version (étendu) et j'ai cru qu'il fallait mettre modifier le CSS ect...

Du coup, je me suis compliqué la vie pour rien !! Mais grâce à vous, j'ai vu mon erreur !! Je suis vraiment vraiment désolé pour le dérangement !!!