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

2 participants

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
*

Féminin
Messages : 31
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 : 3888
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
*

Féminin
Messages : 31
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

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