Espace trop grand entre le pseudo et l'icone du rang

2 participants

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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

Résolu Espace trop grand entre le pseudo et l'icone du rang

Message par Mikki Ven 2 Aoû 2024 - 14:50

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 : après avoir mis en invisible le rang
Lien du forum : me le demander

Description du problème

Bonjour,

J'ai mis mes rangs en invisible, c'est à dire que j'ai créer un texte pour les sélectionnés mais sur le forum, ils sont invisible et ceux grâce au code "< P >, voici ce que j'ai fais :
Spoiler:

Donc l'intitulé de mon rang est invisible mais l'icone est nickel. Sauf qu'entre le rang et le pseudo il y a un grand espace. Comment le rétrécir ? C'est sur le CSS ?

Voici le code de mon CSS :

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

Mikki
Nouveau membre

Féminin
Messages : 26
Inscrit(e) le : 30/07/2024

https://welcometocharleston.forumactif.com/
Mikki a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Espace trop grand entre le pseudo et l'icone du rang

Message par Bipo Ven 2 Aoû 2024 - 22:53

Espace trop grand entre le pseudo et l'icone du rang 4qhGdLE
Bienvenue @Mikki sur le forum de support de Forumactif

Puisque vous êtes nouveau, voici quelques sujets susceptibles de vous intéresser :
N'hésitez pas à ouvrir un nouveau sujet si vous ne trouvez pas votre réponse.

Tout d'abord, il est risqué de mettre ceci dans votre CSS :

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

En effet, Forumactif utilise, nativement, les balises <p> et </p> afin de créer des paragraphes. De ce fait, cela risque de faire disparaître des éléments de votre forum par effet de bord. Je vous invite à retirer ce code de votre CSS.

Ensuite, concernant la problématique soulevée, je vous enjoins à créer une class spécifique pour faire disparaître les rangs de votre forum comme :

Code:
<p class="rankhidden">Membre du mois</p>

Et avec comme code CSS associé :

Code:
p.rankhidden {
    /* Les rangs (textes) ne sont pas visibles */
    display: none;
}

Normalement, le problème d'espace ne devrait plus être.

Belle soirée sur Forumactif.
Bipo.
Bipo

Bipo
Rédactif
Rédactif

Messages : 3882
Inscrit(e) le : 23/09/2010

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

Résolu Re: Espace trop grand entre le pseudo et l'icone du rang

Message par Mikki Dim 4 Aoû 2024 - 14:23

Oh je ne savais pas pour la balise "p".

Merci beaucoup, c'est parfait !!!
Mikki

Mikki
Nouveau membre

Féminin
Messages : 26
Inscrit(e) le : 30/07/2024

https://welcometocharleston.forumactif.com/
Mikki a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum

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