Récupérer les champs des profils pour mise en forme

[Heine]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://eveil-de-cain.forumactif.com/

Description du problème

Bonjour à tous !

Voilà, j'ai envie de mettre un peu plus en forme mes différents champs, que ça soit dans les messages ou dans les profils. Ce que j'aimerai faire, c'est du coup récupérer chaque champ individuellement pour pouvoir les personnaliser graphiquement (niveau css) de manière individuelle du coup.

Il y a un moyen pour récupérer seulement certains champs ? J'aimerai faire ça pour tous les comptes, du coup.

Merci d'avance de votre aide !

[Invité]

Hello Heine,

voilà déjà pour le profil des messages:


Dans le template viewtopic_body:
Affichage/Templates/Général/viewtopic_body


Recherches ces trois variables:

Code:

  {postrow.displayed.profile_field.LABEL}{postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

Supprimes et remplaces par:

Code:

<div class="M14_ProfilPerso">                                 
  {postrow.displayed.profile_field.LABEL} <span class="M14_profilContent">{postrow.displayed.profile_field.CONTENT}</span>{postrow.displayed.profile_field.SEPARATOR}
</div> 

Penses à enregistrer puis à valider en cliquant respectivement sur puis


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches "Sur les sujets"

Déposes ceci:

Code:


$(function(){
$(".M14_ProfilPerso").attr( "id", function(div) {
return "M14_label_" +div;
})
});



Penses à cliquer sur le bouton VALIDER


Le plus simple est effectué.

Ensuite chaque champ va recevoir un identifiant .
Le premier sera:

Code:

#M14_label_0

Le deuxième:

Code:

M14_label_1

Etc etc.

Pour personnaliser le premier titre du premier champ, la ccs sera:

Code:


#M14_label_0 .label
{
TA CSS
}


Pour personnaliser le détail du titre 1, la css sera

Code:


#M14_label_0 .M14_profilContent
{
TA CSS
}


Et ainsi de suite


a++

[Heine]

Salut, et merci de ta réponse !

Alors, ce n'est pas exactement ce que je désirais. J'espérais surtout un code qui me permet de récupérer individuellement chaque valeur pour l'intégrer directement à un code déjà "mis en forme" histoire que tout soit bien plus simple. x) Mais étant donné que je ne pense pas que ça soit possible, j'ai donc tenté ta méthode...

Sans succès.

En fait, le code fonctionne... Mais seulement pour le premier message ! Pour les autres, il ne fonctionne plus. Tu peux en voir l'exemple ici en survolant les différents avatars présents.

Voici mes codes :

» Le Template

Code:

<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
        
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
 {
 if( $(this).is(":visible") )
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
 }
 else
 {
 $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
 }
 });
        }
    }
    catch(e) { }
    
 return false;
};

//]]>
</script>
<center><div class="titredusujet">{TOPIC_TITLE}</div>
<table width="861px" border="0" cellspacing="2" cellpadding="0" class="infosdutopic">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap">
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>
 <td class="nav" valign="right" width="100%" style="text-align:right;">
 <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}<br />{PAGINATION}
            </span>
 </td>
 </tr>
  </table></center>

<table class="sujetcont" width="100%" border="0" cellspacing="0" cellpadding="0" >
 {POLL_DISPLAY}
 <!-- BEGIN postrow -->
 <!-- BEGIN hidden -->
 <!-- END hidden -->
 <!-- BEGIN displayed -->
  <tr style="border:1px solid black;"><td colspan="2" style="border-bottom:0px;  border-top:1px solid black;
  border-left:1px solid black;
    border-right:1px solid black;"><div class="couleurgroupe"><img src="https://nsa39.casimages.com/img/2018/06/04/180604015238137967.png"/></div><div class="bottomgroupe"></div><div class="pseudocont"><div class="rank">{postrow.displayed.POSTER_RANK}</div><img src="https://nsa39.casimages.com/img/2018/05/28/180528015423252502.png"/><div class="pseudo2"><div class="poster_name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px; color:black!important"></a><strong style="color:black!important">{postrow.displayed.POSTER_NAME}</strong></div></div></div></td></tr>
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}" style="border-bottom:1px solid black;">
 <td  class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} class="propro" valign="top" style="background:url('https://nsa39.casimages.com/img/2018/05/30/180530093609590484.png');border-left:1px solid black;border-bottom:1px solid black;"><div class="profilcont">
                  <div class="avatcont2"><div class="texteprofil">
                  
          <!-- BEGIN profile_field --><div class="M14_ProfilPerso">                                
  {postrow.displayed.profile_field.LABEL} <div class="M14_profilContent">{postrow.displayed.profile_field.CONTENT}</div>{postrow.displayed.profile_field.SEPARATOR}
</div> <!-- END profile_field -->
                    </div><div style="opacity:0.3;margin-top:-1px;margin-left:-1px;      filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);" class="avataille">{postrow.displayed.POSTER_AVATAR}</div></div><div class="avatcont">{postrow.displayed.POSTER_AVATAR}</div>
                  </div><img src="https://nsa39.casimages.com/img/2018/05/31/180531114642505417.png"/><div class="clan"><img src="https://nsa39.casimages.com/img/2018/06/04/180604015752345787.png"/></div></td>
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="627px" height="28" style="border-right:1px solid black;">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr class="infopost">
                                  <td style="padding-left:35px;padding-top:1px"><span class="postdetails">{postrow.displayed.POST_DATE}</span></td>
 <td valign="top" nowrap="nowrap" class="post-options" style="padding-right:5px;padding-top:2px;">
 {postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}
 </td>
 </tr>
 <tr>
 <td colspan="2" style="border-bottom:1px solid black;">
 <!-- BEGIN switch_vote_active -->
 <div class="vote gensmall">
 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
 <!-- END switch_vote -->

 <!-- BEGIN switch_bar -->
 <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
 <!-- BEGIN switch_vote_plus -->
 <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
 <!-- END switch_vote_plus -->

 <!-- BEGIN switch_vote_minus -->
 <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
 <!-- END switch_vote_minus -->
 </div>
 <!-- END switch_bar -->

 <!-- BEGIN switch_no_bar -->
 <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
 <!-- END switch_no_bar -->

 <!-- BEGIN switch_vote -->
 <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
 <!-- END switch_vote -->
 </div>
 <!-- END switch_vote_active -->

 <div class="postbody">

 <div class="messageoui">{postrow.displayed.MESSAGE}</div>

 <!-- BEGIN switch_attachments -->

 <!-- END switch_attachments -->

 <div class="clear"></div>
 <!-- BEGIN switch_signature -->
 <div class="signaturedujoueur">
 {postrow.displayed.SIGNATURE}
 </div>
 <!-- END switch_signature -->

 </div>
 </td>
 </tr>
                          
                  </table>
 </td>
 </tr>
  <tr><td colspan="2"><img src="https://nsa39.casimages.com/img/2018/05/31/180531052733907903.png"/></td></tr>
 <!-- BEGIN first_post_br -->
</table>
<hr />
 <!-- END first_post_br -->
 <!-- END displayed -->
 <!-- END postrow -->
<table class="forumline noprint" width="861px" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;margin:auto;">
 <tr>
 <td class="row2" valign="top" {COLSPAN_PAGINATION} width="150"><span class="gensmall">{PAGE_NUMBER}</span></td>
 <!-- BEGIN topicpagination -->
 <td class="row1" align="right" valign="top" ><span class="gensmall">{PAGINATION}</span></td>
 <!-- END topicpagination -->
 </tr>
 <!-- BEGIN switch_user_logged_in -->
 <!-- BEGIN watchtopic -->
 <tr>
 <td class="row2" colspan="2" align="right" valign="top"><span class="gensmall">{S_WATCH_TOPIC}</span></td>
 </tr>
 <!-- END watchtopic -->
 <!-- END switch_user_logged_in -->
</table>

<!-- BEGIN promot_trafic -->
<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_close" style="display:none;margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><div class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</div></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
</table>

<table class="forumline" width="100%" border="0" cellpadding="1" cellspacing="0" id="ptrafic_open" style="display:'';margin: 1px 0px 1px 0px">
 <tr>
 <td class="catBottom" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="top"><div class="cattitle">&nbsp;{PROMOT_TRAFIC_TITLE}</div></td>
 <td align="right" valign="middle" width="10"><span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row2 postbody" valign="top">
 <!-- BEGIN link -->
 »&nbsp;<a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
 <!-- END link -->
 </td>
 </tr>
</table>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<table id="forum_rules" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 1px 0px 1px 0px">
 <tbody>
 <tr>
 <td class="catBottom">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tbody>
 <tr>
 <td valign="top">
 <div class="cattitle">&nbsp;{L_FORUM_RULES}</div>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td class="row1 clearfix">
 <table>
 <tr>
 <!-- BEGIN switch_forum_rule_image -->
 <td class="logo">
 <img src="{RULE_IMG_URL}" alt="" />
 </td>
 <!-- END switch_forum_rule_image -->
 <td class="rules postbody">
 {RULE_MSG}
 </td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
</table>
<!-- END switch_forum_rules -->

<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td class="row2" colspan="2" align="center" style="padding:0px">
 <!-- BEGIN switch_user_logged_in -->
 <a name="quickreply"></a>
 {QUICK_REPLY_FORM}<br />
 <!-- END switch_user_logged_in -->
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
 <tbody>
 <!-- BEGIN show_permissions -->
 <tr>
 <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
 <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
 </tr>
 <!-- END show_permissions -->
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <!-- BEGIN show_permissions -->
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_LESS_IMG}" alt="-" align="middle" border="0" /></a></span></td>
 <!-- END show_permissions -->
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
 <tr>
 <td style="margin:0; padding: 0;" colspan="2">
 <table border="0" cellpadding="0" cellspacing="0" width="100%" id="info_close" style="display:none;">
 <tbody>
 <tr>
 <td class="catBottom" colspan="2" height="28">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td valign="middle" width="100%"><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC_SECOND}</span></td>
 <td align="right" valign="middle"><span class="gensmall"><a href="javascript:ShowHideLayer('info_open','info_close');"><img src="{TABS_MORE_IMG}" alt="+" align="middle" border="0" /></a></span></td>
 </tr>
 </table>
 </td>
 </tr>
 </tbody>
 </table>
 </td>
 </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="861px" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
 <span class="nav">
 <!-- BEGIN switch_user_authpost -->
 <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>&nbsp;&nbsp;&nbsp;
 <!-- END switch_user_authpost -->
 <!-- BEGIN switch_user_authreply -->
 <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
 <!-- END switch_user_authreply -->
 </span>
 </td>

 <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}:&nbsp;{S_JUMPBOX_SELECT}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span></td>

 <!-- BEGIN moderation_panel -->
 <td align="center">
 <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
 </td>
 <td align="center" width="250">
 <span class="gensmall">&nbsp;</span>
 </td>
 <!-- END moderation_panel -->
 </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
 <tr>
 <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
 <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
 <input type="hidden" name="t" value="{TOPIC_ID}" />

 <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
 <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

 <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD}&nbsp;<input class="liteoption" type="submit" value="{L_GO}" /></span>
 </form>
 </td>
 </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

» Le CSS concernant la partie du profil codée

Code:

#M14_label_0 .label
{
  display:none;
}
 
#M14_label_0 .M14_profilContent
{
 width:98px;
  height:98px;
  border:1px solid #727478;
  margin:auto;
  position:absolute;
  margin-left:49px;
  border-radius:100px;
  margin-top:-50px;
  background:white;
  overflow:hidden;
}

Voilà voilà ! Merci d'avance de ton aide.

[Invité]

Hello Heine,
il faudrait donner le style complet concernant cette partie car là
je me trouve avec un truc tout moche  .

Ensuite qu'elle partie désires tu récupérer et de quelle façon ??

a++

[Heine]

Ah oui, désolé !

Voilà le reste du CSS concernant les profils :

» le CSS

Code:

.titredusujet
{
  width:861px;
  height:73px;
  overflow:hidden;
  text-align:center;
  margin:auto;
  background:url('https://nsa39.casimages.com/img/2018/05/28/180528012537995792.png');
    display: table-cell; /* comportement visuel de cellule */
  vertical-align: middle;
        font-family: "champ";
  font-size:30px;
  font-weight:bold;
  line-height:27px;
}

.infosdutopic
{
  width:861px;
  height:93px;
  background:url('https://nsa39.casimages.com/img/2018/05/28/180528012537818302.png');
  padding-right:40px;
  padding-left:40px;
  background-repeat: no-repeat;
}

.sujetcont
{
  width:856px;
  border-top:0px;
  margin:auto;
  cellpadding:0;
}
.couleurgroupe
{
  border-bottom:1px solid #88909f;
  width:859px;
    height:24px;

}

.bottomgroupe
{
    background:url('https://nsa39.casimages.com/img/2018/05/28/18052801542311603.png');
  width:859px;
    height:24px;
}

.pseudocont
{
  position:absolute;
  z-index:1;
    text-align:right;
      width:640px;
  height:48px;
  overflow:hidden;
  margin-top:-49px;
  margin-left:219px;
  padding-bottom:8px;

}

.pseudo2
{
  background:url('https://nsa39.casimages.com/img/2018/05/28/180528015423508124.png');
    height:33px;
  float:right;
      display: table-cell; /* comportement visuel de cellule */
  vertical-align: middle;
    padding-right:10px;
    padding-left:10px;
    text-align:center;
      width:300px;
  overflow:hidden;
  padding-top:16px;

}

.poster_name a
{
    font-size:25px;
  color:black!important;
      font-family: "vampyr";
  text-decoration:none;
}

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


.rank
{
width:300px;
  position:absolute;
  margin-top:25px;
  font-size:12px;
}

.profilcont
{
  width:232px;
  text-align:center;
    background:url('https://nsa39.casimages.com/img/2018/05/28/18052801542311603.png');
  height:380px;
}



.infopost
{
  height:21px;
  width:627px;
  background:url('https://nsa39.casimages.com/img/2018/05/30/180530091954542220.png');
}

.propro
{
  background:url('https://nsa39.casimages.com/img/2018/05/30/180530093609590484.png');
}

.postbody
{

}

.messageoui
{
width:586px;
overflow:hidden;
border:1px solid #3e4654;
border-right:0px;
  border-bottom:0px;
  background:white;
padding:20px;
  margin:auto;
  text-align:justify;
  min-height:520px;
}

.signaturedujoueur
{
  border-left:1px solid #3e4654;
    background:#ebebeb;
  text-align:center;
  padding:10px;
  width:606px;
}

.signaturedujoueur br:nth-child(1) {
display:none;
}
.signaturedujoueur br:nth-child(2) {
display:none;
}

.lienprofil
{
  position:absolute;
  border-radius:50px;
  width:98px;
  height:98px;
  overflow:hidden;
  opacity:0;
  margin-left:51px;
  margin-top:-48px;
}

.clan
{
  position:absolute;
  margin-top:-38px;
  margin-left:83px;
  width:66px;
  height:66px;
}

.profilabel3
{
  padding-right:3px;
  margin:auto;
  height:16px;
   margin-top:5px;
  font-size:10px;
  background:white;
  text-align:right;
}

.profilabel3t
{
float:left;
  background:url('https://nsa39.casimages.com/img/2018/06/04/180604010730282625.png');
  height:16px;
  width:46px;
  text-align:center;
  font-size:12px;
  padding-right:7px;
}

.profilabel2
{
  width:181px;
  padding-right:3px;
  margin:auto;
  height:16px;
   margin-top:5px;
  font-size:10px;
  background:white;
  text-align:right;
}

.profilabel2t
{
float:left;
  background:url('https://nsa39.casimages.com/img/2018/06/04/180604010729979401.png');
  height:16px;
  width:57px;
  text-align:center;
  font-size:12px;
  padding-right:7px;
}

.profilabel1
{
  width:181px;
  padding-right:3px;
  margin:auto;
  height:16px;
   margin-top:60px;
  font-size:10px;
  background:white;
  text-align:right;
}

.profilabel1t
{
float:left;
  background:url('https://nsa39.casimages.com/img/2018/06/04/180604010729979401.png');
  height:16px;
  width:57px;
  text-align:center;
  font-size:12px;
  padding-right:7px;
}

.enligne
{
 width:98px;
  height:98px;
  border:1px solid #727478;
  margin:auto;
  position:absolute;
  margin-left:49px;
  border-radius:100px;
  margin-top:-50px;
  background:white;
  overflow:hidden;
 
}

.enligne2
{
  position:absolute;
  margin-top:-50px;
  margin-left:49px;
}

.enligne2 img
{
  height:100px;
}

.avatcont
{
  position:absolute;
  margin-top:-40px;
  margin-left:16px;
  z-index:3;
 width:200px;
  height:400px;

}

.avataille img
{
  width:200px;
  height:400px;
}

.avatcont img
{
  width:200px;
  height:400px;
}

.avatcont2:hover
{
  opacity:1;
    transition:opacity 1s;
}

.avatcont2
{
  position:absolute;
  margin-top:-40px;
  margin-left:16px;
  z-index:4;
 width:198px;
  height:398px;

    opacity:0;
  background:white;
  border:1px solid #555c67;
  
  transition:opacity 1s;
}

.texteprofil
{
  width:198px;
  height:398px;
  position:absolute;
  z-index:10;
}

Bon, y a la totalité du code de mes messages aussi dedans. xD

Concernant ce que je désire, eh bien c'est de simplement de "récupérer" les informations pour l'inclure de manière individuelle dans un code. Par exemple, je mets une div avec comme class "label0" et via le javascript (j'imagine) la donnée apparaîtra dans la dite div. Histoire que j'ai un contrôle total sur la chose.

Dans l'idée, voilà à quoi ça devrait ressembler :

La première image est un champ aussi (en image du coup). C'est un template que j'ai graph sur php, mais j'ai déjà codé à l'avance la chose (avec des données pré-écrites vu que je n'arrive pas à récupérer l'information seule) et je pensais simplement "inclure" dans chaque ligne le point correspondant du profil.

Après, je peux aussi m'en sortir avec ta technique même si ça risque d'être plus long / compliqué x)

Encore merci de ton aide !

[Invité]

Re,
donc en faite tu ne souhaites pas donner du style au profil actuel mais récupérer ce qui se trouve lorsque l'on visite le profil d'un membre comme ici ?

https://forum.forumactif.com/u108808

a++

[Heine]

Ça, oui, pour le profil.

Mais pour les messages, je veux juste récupérer le contenu (pas le titre, juste la donnée genre le nombre de messages, le sexe, ou le contenu de champs personnalisés) des champs qui doivent apparaître dans les messages, pour ensuite les inclure.

[Invité]

Re,

maitrises tu le code source sur une page html ?

Juste pour information:
Cette image servira donc pour la visite sur un profil ? :



a++

[Heine]

Sur les pages html forumactif que tu inclus avec une iframe ? oui y a pas de soucis

Et non, cette image représente ce qui apparaîtra lorsqu'on survolera l'avatar dans les messages.

[Invité]

Re,
mon ami Ange tuteur a déployé ce script:
Il faudra supprimer le mien et la css associée .

Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mets un titre explicite.
Coches  Sur les sujets

Déposes ceci:

Code:



$(function() {
  for (var field = $('.M14_ProfilPerso'), i = 0, j = field.length; i < j; i++) {
    field[i].className += ' field_' + $('.label', field[i]).text().toLowerCase().replace(/ : /, '').replace(/[^a-z0-9]/g, function(s) {
        var c = s.charCodeAt(0);
        if (c == 32) return '-';
        return '__' + ('000' + c.toString(16)).slice(-4);
    });
  }
});



Penses à cliquer sur le bouton VALIDER

Il ne te reste plus qu'à regarder le code source pour modifier le profil des messages    .
a++

[Heine]

Alors, le script fonctionne vu que je vois qu'en effet des class sont ajoutées !...

mais le CSS ne marche pas. °°

La page d'exemple : http://eveil-de-cain.forumactif.com/t1-votre-1er-sujet

Je surveille donc les choses associées et j'essai deux trois trucs :

Code:

.m14p field_image .label
{
 display:none;
}

.m14p field_messages .label
{
  display:none;
}

m14p field_messages .m14p2
{
  background:white;
}

Bon déjà j'ai changé .M14_ProfilPerso par m14p pour plus de facilité (dans le css et dans le codejavascript)
J'ai pris le field_nomduchamp directement sur la page en l'inspectant et j'ai tenté de modifier tout ça dans le css, mais ça ne marche pas D:

J'ai fait quelque chose de mal ?

[Invité]

Hello Heine,

ah ah , il faut relier les class:

Code:


.m14p.field_image .label
{
 display:none;
}
 
.m14p.field_messages .label
{
  display:none;
}
 
m14p.field_messages .m14p2
{
  background:white;
}

Ensuite afin de ne pas saturer ta feuille de style.
Au lieu de prendre chaque class pour la mettre en display none, tu peux utiliser:

Code:


.texteprofil .label
{
display:none;
}


a++

[Heine]

ça maaarche \o/

Mais du coup, ce javascript fonctionnerait aussi pour récupérer les données dans les profils ? J'ai juste à changer le nom de la div "référence", le cocher que sur les profils et entourer ce qui génère les champs avec la dite div ?

[Invité]

Re,
pour récupérer les champs dans le profil du membre visité,
Sur ton fofo:
le lien sur le membre ayant l'id 1:
http://eveil-de-cain.forumactif.com/u1

Et toujours avec le code source, tu trouveras les informations nécessaires:

L'image pour être plus explicite:



La div contenant toutes les lignes:

Code:


#profile-advanced-details


Ensuite pour la première, on voit bien l'id field_id1
La css sera alors:

Code:


#profile-advanced-details #field_id1
{

}


a++

[Heine]

Ah donc dans le profil, les informations ont déjà une id que je peux utiliser sans passer par un javascript ?

Et je peux les "modifier" via le css de la même manière que je le fais pour ce qui est affiché dans les messages, du coup ? Vu que je cherche à avoir un résultat similaire.

[Invité]

Hello Heine,

Ah donc dans le profil, les informations ont déjà une id que je peux utiliser sans passer par un javascript ?

Et je peux les "modifier" via le css de la même manière que je le fais pour ce qui est affiché dans les messages, du coup ? Vu que je cherche à avoir un résultat similaire.

Normalement oui .

a++

[Heine]

D'accord, je vois !

Dernière petite chose, est-il possible de retirer les ":" des labels ? Du coup ils gênent, au niveau de la taille. Vu comment est mis en forme la chose, je n'en ai pas besoin !

EDIT: autre problème, concernant le sexe !

Comme vous pouvez le voir ici ( http://eveil-de-cain.forumactif.com/t3-reglements-generaux#6 ) le label ne s'affiche pas et pour cause, quand on vérifie dans le code en inspectant la page, on se rend compte que le mot "sexe" n'apparaît pas du tout.

J'ai tenté de changer pour "genre" en me disant que c'est peut-être de la censure, mais là encore, le label n'apparaît pas.

Une solution ?

[Invité]

Hello Heine,

Dernière petite chose, est-il possible de retirer les ":" des labels ? Du coup ils gênent, au niveau de la taille. Vu comment est mis en forme la chose, je n'en ai pas besoin !

Dans le template , recherches ce commentaire de fin:

Code:

 <!-- END profile_field -->

Juste avant déposes ceci:

Code:

  <script type="text/javascript">$('.label').each(function(){$(this).html($(this).html().replace(/:/g,""));});</script>

Comme vous pouvez le voir ici ( http://eveil-de-cain.forumactif.com/t3-reglements-generaux#6 ) le label ne s'affiche pas et pour cause, quand on vérifie dans le code en inspectant la page, on se rend compte que le mot "sexe" n'apparaît pas du tout.

Hum , étonnant car je peux modifier comme bon me semble ce libellé !!
Il faut t'assurer de ne pas laisser d'espace avant dans ce champ.


Ensuite tu peux via un script supprimer l'image du champ "Sexe" et le remplacer par le texte du alt de l'image,
c'est à dire que les images des deux sexes ont un alt, ont va donc supprimer le scr de l'image et par défaut le alt s'affichera:
A placer sur les sujets:

Je pars avec mon code html de base, à toi de t'octroyer la bravoure des autres .

Code:

.
$(function(){
$('.M14_ProfilPerso').find('img[alt="Masculin"],img[alt="Féminin"]').removeAttr('src');
});


a++

[Heine]

Merci beaucoup pour les ":" o/

Concernant le label du sexe, bah y a pas d'espace justement ! Y a rien du tout, c'est juste écris "sexe", et même si je le change (là j'ai changé pour "genre") bah le label n'apparaît pas ! ><

Merci, mais je souhaite garder la petite icone pour ça, donc ça va ! Mais je ne comprend vraiment pas comment ça se fait... Quand on inspecte, on voit qu'il n'y a aucun nom donné à la div, comme si le javascript ne prenait pas en compte le nom du label qui n'existe pas !

Et ne t'inquiètes pas, je ne suis pas du genre à "m’octroyer" le travail des autres. Dans les crédits du forum je préciserai les différentes personnes qui m'ont aidés et vu ton aide, tu mérites clairement ta place. x)

Merci encore et merci d'avance si tu peux m'aider à résoudre cette énigme !

EDIT: Encore un petit soucis, c'est cette fois sur les profils que cela se passe. Tu m'expliquais que normalement les différents champs avaient déjà une class "générée" qui permettait de les modifier, mais malheureusement je n'en vois aucune ! Je vois rapidement une input qui a une ID que je ne peux pas utiliser, et de toute manière elle concerne le Label ET le champ, je ne peux donc pas modifier les deux de manière indépendante ! Je pense que je dois là aussi passer par le javascript. j'ai tenté d'adapter le code que tu m'as fournis mais malheureusement ça ne fonctionne pas. x_x

[Invité]

Hello Heine,

Concernant le label du sexe, bah y a pas d'espace justement ! Y a rien du tout, c'est juste écris "sexe", et même si je le change (là j'ai changé pour "genre") bah le label n'apparaît pas ! ><

Hum, effectivement cela est assez étonnant!!
Aurais tu un compte ayant des droits en mp stp ?

Et ne t'inquiètes pas, je ne suis pas du genre à "m’octroyer" le travail des autres. Dans les crédits du forum je préciserai les différentes personnes qui m'ont aidés et vu ton aide, tu mérites clairement ta place. x)

Ok, bien reçu .

EDIT: Encore un petit soucis, c'est cette fois sur les profils que cela se passe. Tu m'expliquais que normalement les différents champs avaient déjà une class "générée" qui permettait de les modifier, mais malheureusement je n'en vois aucune ! Je vois rapidement une input qui a une ID que je ne peux pas utiliser, et de toute manière elle concerne le Label ET le champ, je ne peux donc pas modifier les deux de manière indépendante ! Je pense que je dois là aussi passer par le javascript. j'ai tenté d'adapter le code que tu m'as fournis mais malheureusement ça ne fonctionne pas. x_x

Tu as surement modifié un template mon ami ou un script qui met le bazar !!!
a++

[Heine]

En effet, c'était bien le cas ! xDDD J'ai tellement de mal avec les codes de forumactif, désolé encore !

Je t'envois ça par MP !

[Invité]

Re,
hum l'erreur venait de l'interprétation du champ,
en fait tu avais demandé a avoir une icône et non un texte,
voilà pourquoi tu n'avais rien mon ami.
Tu avais ceci:


Tout est réglè .

a++

[Heine]

Oww, d'accord, je vois ! Eh bien merci énormément ! xD

Eh bien merci pour tout, on peut considérer ça comme résolu, du coup ! Je n'hésiterai pas à te MP lors de l'ouverture du forum, pour que tu vois ton joli pseudo dans la page des crédits, pour te remercier de ton temps et de ta patience ! Vraiment, merci beaucoup pour ton aide !

[Invité]

Re,
de rien Heine .

Je n'hésiterai pas à te MP lors de l'ouverture du forum, pour que tu vois ton joli pseudo dans la page des crédits, pour te remercier de ton temps et de ta patience !

Merci, c'est gentil .

a++