Icon avatar du membre en dessous de barre de navigation

2 participants

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

Résolu Icon avatar du membre en dessous de barre de navigation

Message par Melodiam Lun 12 Mar 2018 - 20:22

Détails techniques

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

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :  

Description du problème

Bonjour !

J'espère ne pas poser la question au mauvais endroit...
J'ai essayé d'appliquer récemment ce tutoriel : https://forum.forumactif.com/t355862-afficher-l-avatar-du-membre-dans-la-toolbar#3028678

Or je ne sais pas comment le modifier, s'il est modifiable, pour que l'icon avatar du membre s'affiche en dessous du dernier bouton de la barre de navigation qui est latérale côté gauche.

J'ai modifié le screen pour que vous puissiez avoir une idée de ce que j'aimerais réaliser...

Est-ce possible et si oui, comment faire ?
Si besoin est, je peux fournir les codes templates/css etc

MERCI ! Smile


Dernière édition par Melodiam le Ven 16 Mar 2018 - 16:14, édité 1 fois
Melodiam

Melodiam
****

Messages : 343
Inscrit(e) le : 16/04/2012

http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icon avatar du membre en dessous de barre de navigation

Message par MasDan Jeu 15 Mar 2018 - 5:19

Bonjour Melodiam,

Un lien du forum aurait été grandement apprécié.

Essayer ce js (placement sur toutes les pages)
Code:
$(function(){
  if ( _userdata.user_id == -1) {
    var pseudo = "Invité"; 
  } else {
    pseudo = _userdata.username;   
  }
  $("a.mainmenu:first-of-type").closest("td").append("<div>" + _userdata["avatar"] + "<br />" + pseudo + "</div>"); 
});
MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icon avatar du membre en dessous de barre de navigation

Message par Melodiam Jeu 15 Mar 2018 - 20:16

Bonsoir Masdan !

Merci de ta réponse ! J'ai copié le code dans le module, or il ne marche pas, faut-il du css en plus ?
Voici le lien du forum : http://freaksinthecity.forumactif.com/ ; je suis désolée d'avoir oublié de le mettre !!!

Merci pour ta réponse en tous cas Smile
Melodiam

Melodiam
****

Messages : 343
Inscrit(e) le : 16/04/2012

http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icon avatar du membre en dessous de barre de navigation

Message par MasDan Ven 16 Mar 2018 - 5:59

Bonjour Melodiam,

Avec un template modifié, remplacer votre javascript par
Code:
$(function(){
  if ( _userdata.user_id == -1) {
    var pseudo = "Invité"; 
  } else {
    pseudo = _userdata.username;   
  }
  $("a.mainmenu:first-of-type").closest(".menu_toolbar").append("<div>" + _userdata["avatar"] + "<br />" + pseudo + "</div>"); 
});

et ajouter à votre CSS et compléter pour la fonte désirée et plus.
Code:
.menu_toolbar #mbr {
  background: #d84069;
  margin: auto;
  text-align: center;
  color: #fff;
  width: 100px;
  padding-top: 6px;
}

.menu_toolbar #mbr img {
  display: inherit;
  width: 80%;
  margin: auto;
}

MasDan

MasDan
Membre habitué

Masculin
Messages : 1538
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icon avatar du membre en dessous de barre de navigation

Message par Melodiam Ven 16 Mar 2018 - 12:59

Bonjour Masdan ! Smile


Alors, on voit effectivement le pseudo en noir mais aps d'icone avatar !
Saurais-tu pourquoi ? C'est dans le CSS ou le Java qu'il faut que je modifie ?

Je vous donne d'ailleurs le CSS au complet car je sais qu'un admin a modifié quelque chose pour qu'on ne voit pas toute la toolbar, peut-être que cela joue par conséquent...

Code:
.menu_toolbar #mbr {
  background: #d84069;
  margin: auto;
  text-align: center;
  color: #fff;
  width: 100px;
  padding-top: 6px;
}
 
.menu_toolbar #mbr img {
  display: inherit;
  width: 80%;
  margin: auto;
}


html,body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgblanc.png');
 
}

.bodyline{
  margin-left: 200px;
}

a {
  text-decoration: none;
  transition: all 0.2s ease-out;
}
a:hover {
  text-decoration: none!important;
  cursor:ne-resize;
  transition: all 0.2s ease-out;
 
}

::-webkit-scrollbar{
  width: 10px;
  height: 10px;
  background: black;
}

::-webkit-scrollbar-thumb{
  background: #DD4479;
}

.forumline{
  background: #fff;
}

.fofo-spacer{
  width:100vw;
  display:inline-block;
  margin:auto;
}

td.catBottom{
  border:none;
}
 

/**** Bannière latérale ***/
.header_left{
  z-index:10;
  width:30vw;
}

.header_left > img{
  height: 100%;
  position: fixed;
  left:0px;
  max-width:30vw;
 
}

.band_lat{
  position: fixed;
  left:21%;
  height: 100%;
  width: 150px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png') center repeat;
  display: inline-block;
}

.menu_toolbar{
  margin-top: 100px;
}

.menu_toolbar a{
  font: arial 10px;
  display: block;
  width:100px;
  min-height: 25px;
  background: #D84069;
  color: white;
  a:white;
  text-decoration: none;
  padding-top:6px;
  box-sizing:border-box;
  margin:auto;
  text-transform: uppercase;
  transition: all ease .5s;
  text-align: center;
}


.menu_toolbar img{
  display:none;
}

.menu_toolbar a:hover{
  color:white;
}


/********************************************** PA BY ETILYA ************************************************/
.epa_cadre{
  width:750px;
  height: 240px;
  background: #fff;
  position: relative;
 
}

.epa_cadre > div{
  box-sizing:border-box;
  position: absolute;
}

.epa_cadre span{/* pour les mots qu'on veut mettre en jaune*/
  color: #FFDF3D;
}

.epa_cadre ab{/* pour les mots qu'on veut mettre en noir*/
  color: #121212;
  font-weight: bold;
}

.epa_bloc-staff{
  left:10px;
  top:10px;
}

.epa_img-staff{/*icônes du staff*/
  width: 50px;
  padding-left: 1px;
}

.epa_staff{/* bloc de la description du staff qui changent au survol de l'image correspondante */
  background: #DD4479;
  width: 220px;
  height:50px;
  color: white;
  padding: 3px;
  box-sizing: border-box;
  font: 11px "VT323", sans-serif;
  text-transform: uppercase;
  text-align: justify;
  position: absolute;
}

.staff-containt img{/* texte de la description - 4 lignes max !*/
  position: absolute;
  z-index:10;
  top: -10px;
}

#tr1{/* position des pointeurs roses*/
  left: 10px;
}

#tr2{
  left: 65px;
}

#tr3{
  left:120px;
}

#tr4{
  left:175px;
}

.epa_staff a{
  color: black;
  text-decoration: none;
  font-weight: bold;
}

.epa_staff a:hover{
  text-decoration: none;
}

.epa_staff > div{
  display:none;
}

.epa_staff > div.active{/* pour afficher chaque onglet au survol (avec un code JS)*/
  display:block;
}

.epa_ctxt-news{
  width: 275px;
  height:105px;
  padding: 10px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png') center repeat;
  color: white;
  font-size:11px;
  overflow: auto;
  text-align: justify;
}

#epa_ctxt{
  left:237px;
  top:10px;
}

#epa_news{
  left:10px;
  bottom:10px;
}

.epa_tt-news{
  font: 25px 'Bangers', sans-serif;
  color: #FFDF3D;
}

.epa_predef{
  right:10px;
  top: 10px;
  width: 220px;
  height:45px;
  text-align: center;
}

.epa_predef-img{
  width:52px;
  padding: 1px;
  box-sizing: border-box;
  border: 1px solid;
}

.orange{/* ces codes sont pour la couleur de la bordure de chaque image de prédef, on peut changer les noms des classes,
  mais il ne faut pas oublier de le faire aussi sur la zone de texte de la page d'accueil*/
  color:#DE9945;
}

.violet{
  color:#925CD1;
}

.rouge{
  color: #C73E3E;
}

.vert{
  color: #4FBD69;
}

.bleu{
  color: #41A2EB;
}

.epa_predef-top{
  width: 220px;
  border: 1px solid;
  box-sizing: border-box;
  padding: 1px;
}

.epa_partos{
  position: absolute;
  left:290px;
  bottom: 10px;
  height:105px;
  width:160px;
  text-align: center;
}

.epa_partos img{
  width:50px;
  border: 1px solid #DD4479;
  padding:1px;
  box-sizing: border-box;
}

.epa_top-sites{
  width: 105px;
  height: 105px;
  background: #FFDF3D;
  bottom: 10px;
  right: 188px;
  padding-top: 5px;
  text-align: center;
}

.epa_top-sites img{
  width: 45px;
}

.epa_comments{
  right: 10px;
  bottom:10px;
  height: 105px;
}

.epa_comments > div{
  width: 170px;
  height:21%;
  background: #DD4479;
  font: 11px 'VT323', sans-serif;
  color: white;
  box-sizing: border-box;
  text-align: center;
  padding-top:5px;
}

.epa_comments div:nth-child(2), .epa_comments div:nth-child(3), .epa_comments div:nth-child(4) {
  margin-top:5px;
}
/********************************************** PA BY ETILYA - FIN ************************************************/

/********************************************** CATEGORIES BY ETILYA ************************************************/

.ecat_tt{
  display:inline-block;
  font-family:'Bangers', sans-serif;
  font-size: 30px!important;
  color: #DD4479;
  margin-bottom: -13px;
}

.ecat_cadre{
  width:750px;
 
  background: white;
  position: relative;
}

.ecat_cadre td > div{
  height:100px;
}

.ecat_img{
  width:70px;
  height:80px;
}

.ecat_tt-fofo{
  font: 20px 'Bangers', sans-serif;
  color: #e90c63;
}

.ecat_descr{
  width:295px;
  box-sizing:border-box;
  padding: 5px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png');
}

.ecat_descr > div:nth-child(2){
  height: 55px;
  color:#fff;
  font-size: 11px;
  overflow:auto;
  text-align: justify;
  margin-bottom:5px;
}

.ecat_last-msg{
  position: absolute;
  text-transform: uppercase;
  font: 12px 'VT323', sans-serif;
  color: #e90c63;
  width:285px;
  text-align:right;
}

.ecat_last-msg a{
  display: inline-block;
  padding: 0px 4px;
}

.ecat_last-msg span{
  font: 12px 'VT323', sans-serif;
}

.ecat_last-msg br{display:none;}



.ecat_ss-fofo{
  width: 200px;
  height:80px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png');
  display:flex;
  color: #e90c63;
  overflow:auto;
  box-sizing:border-box;
  padding:5px;
}

.ecat_ss-fofo > div{
  width: 120px;
  font: 0px 'VT323', sans-serif;
  text-transform: uppercase;
  margin:auto;
  text-align:center;
}

.ecat_ss-fofo > div > a{
  display: block;
  border-bottom: 1px solid #fff;
  margin:auto;
  padding-bottom:2px;
  font-size:12px;
}

.ecat_ss-fofo > div > a:last-child{
  border-bottom:none;
}

.ecat_stats{
  width:80px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png');
  font: 12px 'VT323', sans-serif;
  text-transform:uppercase;
  color: #e90c63;
  text-align:center;
  padding-top:15px;
  box-sizing:border-box;
}

.ecat_stats span{
  font: 45px 'Bangers', sans-serif;
  color:#f9e521;
}


/********************************************** CATEGORIES BY ETILYA - FIN ************************************************/

/*********************************************** QEEL BY ETILYA *************************************************/
.eqeel_cadre{
  width: 750px;
  height: 230px;
  background: white;
  margin:auto;
  position: relative;
}

.eqeel_cadre a:first-child img{
  margin-left: 10px;
}

.eqeel_cadre a:nth-child(2) img{
  margin-left: 5px;
}

.eqeel_cadre a:nth-child(3) img{
  margin-left: 5px;
}
.eqeel_cadre a:nth-child(4) img{
  margin-left: 5px;
}
.eqeel_cadre a:nth-child(5) img{
  margin-left: 5px;
}

.eqeel_img-gp{
  width: 80px;
  margin-top: 10px;
}

.eqeel_new{
  position: absolute;
  top: 10px;
  right: 95px;
  width: 220px;
  height: 80px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png');
  text-align: center;
}

.eqeel_new span{
  font: 25px 'Bangers', sans-serif;
}

.eqeel_new div{
  padding-top:5px;
  padding-bottom:5px;
  font: 12px 'VT323', cursive;
  text-transform: uppercase;
  margin: auto;
  width: 95px;
  color: white;
 
}

.eqeel_stats{
  position: absolute;
  top: 10px;
  right:10px;
  width:80px;
  height:80px;
  background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png');
  text-align: center;
  font:10px 'VT323', sans-serif;
  color: white;
  text-transform: uppercase;
}

.eqeel_stats > div > div{
  font: 25px 'Bangers', sans-serif;
  color: #FFDE3D;
}

.eqeel_stats > div:first-child{
  border-bottom: 1px solid;
  width: 70px;
  margin: auto;
  padding-bottom:2px;
}

.eqeel_connect, .eqeel_24h{
  position: absolute;
  bottom: 10px;
  width: 340px;
  border: 5px solid silver;
  height:100px;
  padding:5px;
    overflow: auto;
  font-family: 'VT323', sans-serif;
  text-transform: uppercase;
}

.eqeel_connect{
  left:10px;
  font-size: 13px;
}

.eqeel_connect > div:last-child{
  margin-top:5px;
  height: 90px;
  overflow: auto;
}

.eqeel_24h{
  right:10px;

}

.eqeel_24h td.row1{
  font-family: 'VT323', sans-serif;
 
}

.eqeel_24h td.row1 span{
  font-size: 13px!important;
}

/************************************************* QEEL BY ETILYA - FIN *************************************************/

/********************************************** LA PARTIE SUJET AVEC MESSAGE ET PROFIL  ****************************************/

/* LA DATE ET LES PETITS TRUCS */
.datePOST {
text-align:left; font-family: VT323,sans-serif; font-size: 12px; text-transform: uppercase;
background:#D84069; height: 10px; padding: 5px; color: white; text-shadow: 1px 1px 1px #c1365b;
}

.grandfonblanc {
  background: red;
  padding:10px; width: 938px;
}

/* BARRE INFOS DU DESSUS */
.namePOST {
width:100%; height:20px; padding:5px;
text-align:center; text-transform:uppercase;
background:url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png'); /* MODIFIABLE */
}

/* LE PSEUDO DU MEMBRE */
.PSEUDO {
width:230px; height: 30px; border: 10px solid black; background: white;
font-family: Bangers, sans-serif; font-size: 30px;
letter-spacing: 1px; padding: 10px; text-align: center; margin-top: 10px; margin-bottom: 10px;
}

/* LES TOOLS DE MODERATION */
.toolsPOST {
float:right;
}

/* APPARENCE DU MESSAGE */
div.postbody {
padding:10px; min-height:360px; margin-top:10px;
background:white; border: 10px solid black; color:black; /* MODIFIABLE */
text-align:justify;
}
/* LE BLOC JOUEUR */
.boxPOST {
margin-right:-75px; margin-left:10px; margin-top:7px; width:200px; text-align:center;
}
/* LE BLOC AVATAR */
#blocAVA {
width:250px; height:350px; border: 10px solid black; padding: 5px;
  margin:-6px auto 0; overflow:hidden;
}
.blocAVA {
position:relative; width:250px; height:350px; overflow:hidden;
}
/* AVATAR */
.avaPOST {
width:250px; height:350px;
transition:transform 0.75s linear; -webkit-transition:transform 0.75s linear;
}
#blocAVA:hover .avaPOST {
transform:translateX(250px); -webkit-transform:translateX(250px);
}
/* BLOC INFORMATIONS JOUEUR */
.abtPOST {
position:absolute; margin-top:-350px;
padding:5px; width:240px; height:340px; overflow:auto;
background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgblanc.png');
transform:translateX(-250px); -webkit-transform:translateX(-250px);
transition:transform 0.75s linear; -webkit-transition:transform 0.75s linear;
}
#blocAVA:hover .abtPOST {
transform:translateX(0px); -webkit-transform:translateX(0px);
}
/* CONTENU INFORMATIONS JOUEUR */
.abtPOST div{
width:220px; padding:5px;
font-family: VT323,sans-serif; font-size:11px; text-align:justify;
color:#202020; background: white;
}
/* TITRES INFORMATIONS JOUEUR */
.abtPOST div span{
text-transform:uppercase; color: #D84069 !important;
}
/* REDIMENSIONNEMENT IMAGES BLOC INFORMATIONS */
.abtPOST div img{
margin:auto; max-width:170px;
}
/* BLOC IMAGE RANG / RANG / IMAGES CONTACT */
#rankPOST {
margin-top:10px;
width:250px; padding-top:15px; overflow:hidden;
background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgblanc.png');
}
/* LE PETIT TEXTE RANG */
.rankPOST {
margin:auto; font-family: VT323,sans-serif; font-size: 12px;
text-transform:uppercase; text-align:center;
color:#D84069;
}
/* ICONES DE CONTACT DU MEMBRE */
.ktactPOST {
position:relative; z-index:3; margin:auto; margin-top:5px;
width:200px; text-align:center;
opacity:0.7;
}
/* BOOOM IMG DU RANG SISI */
.imgrankPOST img{
margin-top:-25px; width:200px;
transform:rotate(180deg); -webkit-transform:rotate(180deg);
}


/************EVVIE CREDITS - DO NOT DELETE*************/
.evcredit { width: 300px; color: #333; font-size: 9px; }
.evcredit a { color: #333; font-size: 9px; }

/***********GENERAL TEMPLATE**********/
.gentemp { width: 350px; height: auto; background-color: #f8f8f8; border: 1px solid #ddd; padding: 10px; }
.gentemphead { width: 320px; height: auto; background-color: #D94169; border-bottom: 1px solid #fff; border: 1px solid #ddd; padding: 10px; font-size: 35px; line-height: 75px; text-shadow: 1px 1px #000; color: #fff; font-family:Bangers; font-style: italic; text-align: center;}
.gentempbody { width: 320px; height: auto; background-color: #fff; padding: 10px; border: 1px solid #ddd; border-top: 0; text-align: justify; font-size: 10px; line-height: 10px;}
.gentempsub { text-align: center;font-size: 20px; line-height: 20px; font-family: oswald; color: #000; width: auto; height: auto; padding: 10px; border-bottom: 1px solid #ddd;}
.break { width: 90%; height: 1px; margin: 10px; background-color: #ddd; }

/*************CLAIMS [MOSTLY FACE CLAIM]************/
.claimbody { width: 320px; height: auto; background-color: #fff; padding: 10px; border: 1px solid #ddd; border-top: 0; overflow: auto; text-align: justify; font-size: 10px; line-height: 10px; }
.claimcontain { width: 300px; height: 280px; padding: 10px; margin-top: 30px; }
.claimtabs { width: 300px; height: 280px; margin: 0px auto; position: relative; }
.claimtab { float: left;}
.claimtab label {  float: left; font-family: fira sans extra condensed; font-size: 10px; color: #fff; background-color:#D94169;  text-transform: uppercase;  text-align: center;  padding:10px; width: 49px; margin: 3px; position: relative; left: 0px; top: -20px; z-index: 3;}
.claimtab label a { font-size: 10px; }
.claimtab input[type=radio]:checked ~ label { background: #000; z-index: 2;}
.claimtab input[type=radio] { display: none; /* DON'T EDIT */}
.claimcontent { position: absolute; top: 25px; bottom: 0px; left: 0px; right: 0px; text-transform: uppercase; overflow:auto; padding: 20px; font-family: fira sans extra condensed; font-size: 9px; background-color:#f7f7f7; border: 1px solid #ddd; }
.claimcontent a { font-size: 9px; }
.claimtab input[type=radio]:checked ~ label ~ .claimcontent {z-index: 1;}
.claimsub {text-align: center;font-size: 20px; line-height: 20px; font-family: oswald; color: #000; width: auto; height: auto; padding: 10px; border-bottom: 1px solid #ddd;}

/***********SHIPPER APP TEMPLATE*************/
.appback { width: 550px; height: 340px; padding: 10px; border: #ddd solid 1px; background-color: #eaeaea; }
.appbody { width: 510px; height: 320px;  padding: 10px; background-color: #fff; border: 1px solid #ddd; }
.appimage { width: 200px; height: 300px; padding: 10px; position: relative; top: -2px; left: -144px; background-color: #fff; border: 1px solid #ddd; }
.appright { width: 260px; height: 300px; position: relative; top: -324px; left: 117px; padding: 10px; border: 1px solid #ddd; }
.appname { width: auto; height: auto; padding: 10px;  background-color: #D94169; line-height: 50px; font-family: bangers; font-style: italic; color: #fff; text-shadow: 1px 1px #000; font-size: 20px; text-align: center; }
.apptabs { width: auto; height: auto; position: relative; }
.apptab { float: left;}
.apptab label {  display: block; width: 50px; line-height: 50px; font-size: 25px; color: #000; z-index: 3; text-align: center; margin-top: -15px; margin-left: 12px; overflow: hidden; }
.apparea { width: 260px; height: 230px; margin: 10px auto; }
.appcontent { width: 240px; height: 170px; padding: 10px; border: 1px solid #ddd; overflow: auto;  background-color: #fff; position: absolute; top: 30px; bottom: 0px; left: 0px; text-align: justify; }
.apptab input[type=radio]:checked ~ label { color: #D94169; z-index: 2;}
.apptab input[type=radio] { display: none; /* DON'T EDIT */}
.apptab input[type=radio]:checked ~ label ~ .appcontent {z-index: 1;}
.appsub { text-align: left; font-size: 15px; line-height: 15px; font-family: oswald; color: #000; width: auto; height: auto; padding: 3px; border-bottom: 1px solid #ddd;}
.appresp { text-align: right; font-size: 10px; font-family: fira sans extra condensed; line-height: 95%; }

/****MEMBER DIRECTORY &&& ACCEPTED/PENDING/SHIPPER RESPONSES*******/
.directtemp { width: 250px; height: auto; background-color: #fff; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }
.directname { width: 220px; height: auto; background-color: #D94169; border-bottom: 1px solid #fff; border: 1px solid #ddd; padding: 10px; font-size: 25px; line-height: 50px; text-shadow: 1px 1px #000; color: #fff; font-family: oswald; font-style: italic; text-align: center; }
.directbody { width: 220px; height: auto; background-color: #f7f7f7; padding: 10px; border: 1px solid #ddd; border-top: 0; text-align: justify; font-size: 10px; line-height: 10px; }
.directbody a { font-size: 10px; }
.directicon { width: 50px; height: 50px; background-color: #fff; padding: 5px; border: #ddd solid 1px;  display: block; margin: 5px 0px 5px 0px;}
.directtext { display: block; width: 136px; height: 50px; padding: 5px; border: #ddd solid 1px; background-color: #eaeaea; overflow: auto; font-size: 10px; line-height: 9px; margin: 5px 0px 5px 0px; }
.directcharname, .directcharname a { font-size: 12px; text-align: center; font-family: oswald; border-bottom: 1px #ddd solid; padding: 5px; padding-bottom: 0px; margin-bottom: 5px; line-height: 14px;}

/* AFFICHAGE LISTE DES MEMBRES */
/* BLOC ENTÊTE - RECHERCHER UN UTILISATEUR OU MODIFIER ORDRE AFFICHAGE */
.tleLMBER {
margin:0 auto 10px; width:800px;
background:rgba(255,255,255,0.5); /* MODIFIABLE */
}
/* TITRE ENTÊTE */
.tleLMBER th {
margin-bottom:5px; padding:5px 0;
text-transform:uppercase; font-family:Arial; font-size:16px;
background:black; color:white; /* MODIFIABLE */
}
/* BLOC MEMBRE */
.LMBER {
margin:0 auto 10px; width:800px; height:124px; overflow:hidden; font-family:Arial;
}
/* BLOC AVATAR & NOMBRE MESSAGES */
.imgLMBER{
display:inline-block; vertical-align:top; margin-top:-25px;
width:175px; height:125px;
}
/* AVATAR */
.imgLMBER img{
width:125px; height:175px;
transform:rotate(90deg); -webkit-transform:rotate(90deg);
}
/* NOMBRE DE MESSAGES */
.imgLMBER div{
position:absolute; margin-top:-137px; margin-left:15px;
width:145px; height:60px; padding-top:40px; font-size:11px;
background:rgba(255,255,255,0.7); color:black; /* MODIFIABLE */
opacity:0; transition:opacity 0.45s ease; -webkit-transition:opacity 0.45s ease;
}
.imgLMBER:hover div{
opacity:1;
}
/* BLOC PSEUDONYME / INSCRIPTION / DERNIERE VISITE / INFORMATION / BANDE GROUPE */
.boxLMBER {
display:inline-block; vertical-align:top; width:625px;
}
/* IMAGES MP * WWW */
.btnLMBER {
float:left;
}
.btnLMBER img{
max-height:15px;
}
/* PSEUDONYME */
.nameLMBER{
margin-left:10px; width:595px; height:15px; padding:10px;
text-align:right; text-transform:uppercase; letter-spacing:2px;
background:#191919; /* MODIFIABLE */
}
/* DATE INSCRIPTION */
.joinLMBER{
display:inline-block; margin:7px 5px; margin-left:10px;
width:260px; height:15px; padding:5px;
font-size:11px; text-align:center;
background:rgba(250,250,250,0.5); color:black; /* MODIFIABLE */
}
/* DERNIERE VISITE */
.lstvLMBER {
display:inline-block; margin:7px 0;
width:330px; height:15px; padding:5px;
background:rgba(250,250,250,0.3); color:black; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* INFORMATION : HUMEUR, FT. */
.infoLMBER {
margin-left:10px; width:605px; height:22px; padding:7px 5px 0; overflow:hidden;
text-align:center; font-size:12px;
background:rgba(250,250,250,0.2); color:black; /* MODIFIABLE */
}
/* BANDE COULEUR GROUPE */
.grpLMBER {
margin-top:7px; margin-left:10px;
width:615px; height:15px; 
}

/**** PRES ****/

.aeclair {
    background-color: #111;
    color: #FFF;
    font-family: poppins;
    font-size: 12px;
    font-weight: 700;
    padding: 17px;
    text-transform: uppercase;
  }
 
  .aecon {
    border: 7px solid #EEE;
    width: 100px; height: 100px;
        float: right;
        overflow: hidden;
        border-radius: 100%;
        }
       
        .aestats {
          font-family: poppins;
          font-size: 9px;
          width: 260px;
        border-bottom: 1px solid #EEE;
        padding: 3px;
        text-transform: uppercase;
        }
       
        .aestatz {
          color: #D94169;
          font-weight: bold;
          font-size: 11px;
          text-transform: uppercase;
        }
       
        .aetxt {
          width: 90%;
          background-color: #FDFDFD;
          padding: 14px;
 border-left: 6px solid #D94169;
 margin-top: 15px;
 font-size: 1Apx;
 font-family: poppins;
 text-align: justify;
 color: #000;
 line-height: 13px;
 font-weight: 400;
        }
       
        .aetxt b {
          color: #D94169;
          font-size: 12px;
          float: left;
        }


/***RS***/

.spjwcre {
      color: #555;
      font: 8px calibri;
      letter-spacing: 1px;
      text-decoration: none;
      text-transform: uppercase;
    }
   
    .spjwcre a {
      text-decoration: none;
      color: #HEXCODE;
      text-transform: uppercase;
    }

#charriename .spdwtitle b, .spdwtxt b, .spdwtxt i {
 color: #HEXCODE;
}

#charriename2 .spdwtab {
 background: #HEXCODE;
}


::-webkit-scrollbar {width:4px; height:16px; background: #ffffff; border-radius: 100%; }
::-webkit-scrollbar-thumb { background-color: #333333; }

.spdwtab {
 width: 100px;
 line-height: 100%;
 padding: 4px;
 font-family: bangers;
 text-align: center;
 color: #FFF; font-size: 15px;
  background: #D94169;
}

.spdwtab2 {
 width: 100px;
 line-height: 100%;
 background: #888;
 padding: 4px;
 font-family: bangers;
 text-align: center;
 color: #FFF; font-size: 15px;
}

.spddecoutline {
 background-color: #FCFCFC;
 padding: 5px;
 border: 1px solid #C7C6C6;
 height: 130px;
 margin: 5px;
}

.spdwtitle {
font-family: Bangers;
color: #444;
text-transform: lowercase;
font-size: 23px;
text-align: right;
text-shadow: 2px 2px #EEE;
line-height: 100%;
margin-bottom: 3px;
}

.spdwtxt {
font-family: roboto;
padding: 7px;
font-size: 10px;
font-weight: 400;
line-height: 100%;
        text-align: justify;
color: #333;
height: 83px;
overflow: auto;
}

 .spdwantimg {
  width: 130px;
  height: 130px;
 }

/* BOUTON SELECT */
.selectCode { float:right; text-transform: uppercase; cursor:pointer; }
div.cont_code { clear: right; }

/* FIN */

/****TOOLBAR FA****/
#fa_toolbar{
    background-color:#333!important;
    width:150px!important;
  height:10px;
    left:auto!important;
  position:relative;
  margin-top:-10px;
  right:-75%;
 
}

#fa_menu:hover :visited, #fa_toolbar > #fa_right.notification > #fa_notifications {
    background-color:#fff;
  height:auto;
  color:#333;}
 
.fa_toolbar_XL_Sized {
    min-width:150px;
    }
.fa_toolbar_L_Sized {
    min-width:150px;
    }
.fa_toolbar_M_Sized {
    min-width:150px;
    }
/* liens masqués */
.fa_tbMainElement#fa_search,
.fa_tbMainElement#fa_share,
#fa_menu,
.rightHeaderLink#fa_hide,
.fa_tbMainElement#fa_right a.rightHeaderLink{
display:none!important;
}
.fa_tbMainElement#fa_left{
display:none!important;
}

#fa_toolbar_hidden #fa_show {
display:none!important;
}

/* On affiche le lien "notification" */
.fa_tbMainElement#fa_right a.rightHeaderLink#fa_notifications{
    display:block !important;
    width:150px;
    padding: 0 2px; /* Pour info : Haut/bas droite/gauche */
    text-align:center;
    background:#333;
  font-size:9px;
  text-transform:uppercase;
  position:fixed;
  top:0px;
 
}

/* On indique une référence pour placer la liste des notifications */
#fa_toolbar #fa_right.fa_tbMainElement{
    position:relative;
    }
   
/* On met en page la liste des notifications */
#fa_toolbar #fa_right.notification{
    z-index: 999;
}
#fa_toolbar #fa_right.notification #notif_list{
    width:150px;
    right:0;
    left:-20px; !important;
  height:200px;
  overflow:auto;
  position:fixed;
  top:30px;
  overflow-x:hidden;
}
/* Taille des différents points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .content,
#fa_toolbar #fa_right #notif_list li{
    width:140px !important;
    }
   
/* Taille des blocs textes des points de la liste de notif' */
#fa_toolbar #fa_right #notif_list li .contentText{
    overflow:visible !important;
    width:100% !important ;
    height:auto !important;
}
/* Bloc "notifs non lues" */
.fa_tbMainElement#fa_right a.rightHeaderLink.unread#fa_notifications{
    width:149px; /* On supprime 1px à la largeur car la bordure fera 1px d'épaisseur */
    border-left:1px solid black;
}
/* Mise en page du bloc "voir toutes les notifications" */
#fa_toolbar #fa_right #notif_list li.see_all{
    width:90%!important;
    text-align:center!important;
}

#fa_toolbar_hidden {
 display:none!important;
}


/* AFFICHAGE DU PROFIL */
.PFIL {
margin:auto; width:800px; font-family:Arial;
}
/* ADMINISTRATION PROFIL */
.adminPFIL {
margin-bottom:3px;
font-size:9px; text-align:left; text-transform:uppercase;
color:black; opacity:0.7; /* MODIFIABLE */
}
/* LIENS ADMINISTRATION PROFIL */
.adminPFIL a {
color:black; /* MODIFIABLE */
}
/* BLOC SUJETS & MESSAGES / PSEUDONYME PROFIL */
.topPFIL {
height:37px; padding:20px; overflow:hidden; margin-bottom: 15px;
text-transform:uppercase; text-align:right; line-height:34px;
background:#4A4A4A; color:white; /* MODIFIABLE - COULEURS PAR DEFAUT */
}
/* SUJETS UTILISATEUR PROFIL */
.sbjPFIL {
display:block; margin-bottom:3px;
width:58px; height:15px; padding:1px 0; padding-left:2px;
text-transform:uppercase; text-align:center; font-size:9px; letter-spacing:2px; line-height:15.5px;
background:rgba(255,255,255,1); color:black !important; /* MODIFIABLE */
}
/* MESSAGES UTILISATEUR PROFIL */
.msgPFIL {
display:block;
width:60px; height:15px; padding:1px 0;
text-transform:uppercase; text-align:center; font-size:9px; line-height:15.5px;
background:rgba(255,255,255,1); color:black !important; /* MODIFIABLE */
}
/* PSEUDONYME PROFIL */
.namePFIL span strong {
color:white; font-size:35px;  font-family: Bangers,sans-serif; letter-spacing: 2px;
/* MODIFIABLE */
}

/* BLOC INFORMATIONS PROFIL */
.abtPFIL {
display:inline-block; vertical-align:top;
width:480px; height:360px; padding:10px; overflow-y:auto;
font-size:11px; margin-right: 15px;
background:white; color:black; /* MODIFIABLE */
}
/* INTITULES INFORMATIONS PROFIL */
.abtPFIL div span {
font-weight:bold;
text-transform:uppercase; color:black !important; /* MODIFIABLE */
}
/* INFORMATIONS PROFIL */
.abtPFIL div {
padding:2px 0;
}
.abtPFIL .field_uneditable {
display:inline-block;
}
/* BLOC AVATAR PROFIL */
.avPFIL {
display:inline-block; vertical-align:top;
width:250px; height:350px; padding:15px; overflow:hidden;
background: white;
}
.avPFIL img {
max-width:250px !important;
}
/* BLOC IMAGES CONTACT & DERNIERE VISITE PROFIL */
.btmPFIL {
padding:10px; margin-top: 15px;
background: url('https://image.noelshack.com/fichiers/2017/41/2/1507643953-bgnoir.png'); /* MODIFIABLE */
}
/* BLOC IMAGES CONTACT PROFIL */
#ktactPFIL {
display:inline-block; vertical-align:middle;
width:60%; text-align:left;
}
/* IMAGES CONTACT PROFIL */
.ktactPFIL {
display:inline-block; vertical-align:middle; margin-right:10px;
max-height:25px; overflow:hidden;
}
.ktactPFIL img {
max-height:25px;
}
/* DERNIERE VISITE PROFIL */
.lstPFIL {
display:inline-block; vertical-align:middle;
width:40%;
font-size:10px; text-transform:uppercase; text-align:right;
color:white; /* MODIFIABLE */
}
/* INTITULE DERNIERE VISITE PROFIL */
.lstPFIL span {
font-weight:bold; color:white; /* MODIFIABLE */
}

/* MODERATION PROFIL */
.ajax-profil_edit {
position:absolute; z-index:15; margin-top:4px; margin-left:7px;
}
.ajax-profil_edit img{
width:7px;
}


Merci beaucoup !
Melodiam

Melodiam
****

Messages : 343
Inscrit(e) le : 16/04/2012

http://funkytown-bakemono.forumactif.com
Melodiam a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Icon avatar du membre en dessous de barre de navigation

Message par Melodiam Ven 16 Mar 2018 - 16:14

Désolée du double post ! C'est bon j'ai trouvé comment faire, il fallait juste que je rajoute un bout de script direct dans le template o/


ENCORE MERCI
bisouuuus
Melodiam

Melodiam
****

Messages : 343
Inscrit(e) le : 16/04/2012

http://funkytown-bakemono.forumactif.com
Melodiam 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