avatar cachant une infobulle.

[Lii-aa]

Bonsoir,

J'ai eu une petite idée pour mon forum. Ca serait d'y mettre une infobulle, dans l'avatar.
C'est à dire, que quand la souris passera sur l'avatar, les informations du profil s'afficheront, dans une infobulle.

J'ai le code de l'infobulle, seulement, je n'arrive pas à l'installer. Ca me fait n'importe quoi.
Pourriez vous m'aider s'il vous plaît ?

Merci d'avance.
Lii-aa

[zako]

euh moi aussi jai un problem jai essayer ce code d'infobulle mais il marche pas je lai essayer en tent que signature et maintenant je n'ai plus acces a mon coin signature.j'ai bien activer la feuille de style css mais sa marche pas.
voici mon code:
<aclass="imginfo">http://www.deambulum.net/public/images/quotidianus/jeux_hitman_bm_3.jpg
<span>Toujurs a votre service!</span>
</a>

[Lixyr]

C'est gentil de donner le code html si tu ne donnes pas le code css qui va avec.

Lii-aa, on pourrait avoir le code entier que tu as ? (donc code html ET code Css )

[Lii-aa]

Voilà le template dans lequel je veux insérer l'infobulle.

Code:




<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}';
var multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}';
//]]>
</script>

<table width="100%" border="0" cellspacing="2" cellpadding="0">
   <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="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 insert_plus_menu -->
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <script type="text/javascript">
            //<![CDATA[
               insert_plus_menu('f{FORUM_ID}&t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
         </span>
      </td>
      <!-- END insert_plus_menu -->
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr align="right">
      <td class="catHead" colspan="2" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" nowrap="nowrap" class="t-title"><h1 class="cattitle">&nbsp;<!-- google_ad_section_start -->{TOPIC_TITLE}<!-- google_ad_section_end --></h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
      <td class="row1 pagination" colspan="2" align="right" valign="top"><span class="gensmall">{PAGINATION}</span></td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- BEGIN postrow -->
   <!-- BEGIN displayed -->
   <tr class="post">
   <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
      <div style="font-size:9px;">
  <div class="cadreava">
      <span class="name">
        <a name="{postrow.displayed.U_POST_ID}">
        </a>
      </span>
                <center> <font size=4> <SPAN style="FONT-FAMILY: futura hv"> {postrow.displayed.POSTER_NAME} </SPAN></font>
 <br> <font size=3><font color=#FFFFFF>••••••••••••••••••• </font> </font> <br>

           

<SPAN class=postbody><SPAN class=postbody><A class=imginfo>{postrow.displayed.RANK_IMAGE} <font color=#FFFFFF>{postrow.displayed.POSTER_RANK} </font></br></center> <br>
<div align="center"><span class="postdetails poster-profile">
                  {postrow.displayed.POSTER_AVATAR}</div> <FONT color=black>

</FONT><SPAN><FONT color=black>&nbsp; </FONT>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>WILLOW THOMPSON</FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><A class=imginfo><FONT color=black>
</FONT></A></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>
 <div class="profilentour"><span class="postdetails poster-class="profilentour"><span class="postdetails poster-profile">
 <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                  <!-- END profile_field -->  <center> {postrow.displayed.POSTER_RPG}</center> </span></div></div>



<BR></FONT></TD></TR>
<TR align=middle><FONT color=black></FONT></TR></TBODY></TABLE></SPAN></A>
 
<div align="top center">

            </div></div>
    <br><br>

           
 
 
        </span><br />
<br />        <img src="http://2img.net/i/fa/vide.gif" alt="" style="width: 150px; height: 1px;" />
      </td>      </td>
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="100%" height="28" colspan="2">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td><span class="postdetails"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" border="0" />{L_POST_SUBJECT}: {postrow.displayed.POST_SUBJECT}&nbsp; &nbsp;<img src="{postrow.displayed.MINI_TIME_IMG}" alt="" border="0" />{postrow.displayed.POST_DATE}</span></td>
               <td valign="top" nowrap="nowrap" class="post-options">
                  {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" class="hr">
                  <hr />
               </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- 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 -->

                  <span class="postbody">
                     <!-- google_ad_section_start -->
                     {postrow.displayed.MESSAGE}
                     <!-- google_ad_section_end -->
                     {postrow.displayed.SIGNATURE}
                  </span>
                  <span class="gensmall">{postrow.displayed.EDITED_MESSAGE}</span>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr>
      <td class="{postrow.displayed.ROW_CLASS} browse-arrows"{postrow.displayed.THANK_BGCOLOR} align="center" valign="middle" width="150">
         <a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a>
      </td>
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <!-- BEGIN first_post_br -->
</table>
<br />
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th class="thLeft" nowrap="nowrap" width="150px" height="26">{L_AUTHOR}</th>
      <th class="thRight" nowrap="nowrap" colspan="2">{L_MESSAGE}</th>
   </tr>
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails {postrow.hidden.ROW_CLASS}" colspan="2" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td class="row1" colspan="2" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="2" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint">&nbsp;</td>
               <td align="center" nowrap="nowrap" class="t-title"><a name="bottomtitle"></a><h1 class="cattitle">{TOPIC_TITLE}</h1></td>
               <td align="right" nowrap="nowrap" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a>&nbsp;<a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a>&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

<table class="forumline noprint" width="100%" border="0" cellspacing="1" cellpadding="0">
   <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 -->
   <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="100%" 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>
      <!-- BEGIN viewtopic_bottom -->
      <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>
      <!-- END viewtopic_bottom -->
      <!-- 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}" />
            <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 -->

Ensuite voilà mon code infobulle (j'ai perdu le code vierge malheureusement)

Code:

<SPAN class=postbody><A class=imginfo><FONT color=black><IMG src="http://img11.imageshack.us/img11/4338/sanstitre4wu.png"></FONT><SPAN><FONT color=black>&nbsp; </FONT>
<TABLE border=0 cellSpacing=1 cellPadding=1 width=125>
<TBODY>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>WILLOW THOMPSON</FONT></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><A class=imginfo><FONT color=black><IMG src="http://illiweb.com/fa/pbucket.gif"></FONT></A></TD></TR>
<TR>
<TD style="TEXT-ALIGN: center"><FONT color=black size=1>Fondatrice &amp; Admin<BR></FONT></TD></TR>
<TR
align=middle><FONTcolor=black></FONT></TR></TBODY></TABLE></SPAN></A>

Ainsi que le CSS

Code:

/* INFOBULLES */
a.imginfo {
  position: relative;
  color: #7d7d7d;
  text-decoration: none;
  border-bottom: 0px #7d7d7d solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: 30px; /* on positionne notre infobulle */
  left: 20px;
  background: white;
  color: 7d7d7d;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #b6b6b6;
  border-right: 3px solid #b6b6b6;
  border-top: 3px solid #b6b6b6;
  border-bottom: 5px solid #b6b6b6;
}

Voilà ♥

[Lixyr]

OKay,

Le premier code correspond à quel template ?

et ces codes-là tu les as trouvé où en fait ?? Il n'y a pas d'indications ?
Parce que je ne suis pas vraiment qualifiée en template, alors je ne saurai te dire où placer exactement le code à mettre dans le template.

[Lii-aa]

Le 1er code, c'est mon template viewtopic_body

Quant aux deux autres codes, je les ai trouvé ici, mais il y a super super longtemps alors je ne saurai pas te dire dans quel topic.

[Forami]

Bonjour
Je pense que tu en fais tout un fromage!...Car une image cliquable avec un texte qui d'affiche fait cela

[Lii-aa]

Oui, je sais tout celà, seulement, je ne sait pas du tout comment il faut faire pour que l'infobulle se déclenche au survol de l'avatar.

[Lixyr]

En faire tout un fromage, certes, mais bon si tu as une autre solution beaucoup plus simple et beaucoup plus détaillée, ne te gêne pas.
Le problème résulte dans le fait, qu'on ne sait pas où placer les codes dans le template. Que ce soit une image cliquable avec une def ou pas, ça ne rendra pas le même effet en plus.

[-Tiffa-]

Bonjour,

Moi aussi, je voudrais que lorsque la souris passe sur l'avatar, les infos s'affichent. Un peu comme dans ce forum: Pensionnat Naoko

[Lixyr]

Je up comme je suis aussi intéressée.

*edit*

Bon ben j'ai une bonne nouvelle, j'ai réussi à mettre mon info bulle sur mon avatar.

Lii-aa si tu as eu un bugg c'est que ton code est bourré de fautes. Moi même n'y ayant rien compris j'ai pris un des miens, beaucoup plus simple. Si quelqu'un veut savoir comment on fait, je suis là. C'est très simple à faire en fait.

[kakale]

Bonjour! Je suis intéressée pour savoir comment mettre une infos bulle sans se casser la tête!

Merci d'avance en espérant que sa n'embête pas !

[demeter1]

Vous avez un tutoriel sur le sujet sur un forum d'entre aide
http://www.atelier-forum.com

[Lixyr]

Alors d'une part on se rend dans le Panneau.

Affichage >> Images et couleurs >> Couleur >> CSS. On rentre ce code :

Code:

/*----- INFOBULLES ------*/



.lock  {
  position: relative;
}
.lock .lock-hidden {
  /* center */
  display: none;
  position: absolute;
  padding-left : 5px;
  padding-right : 5px;
  padding-top  : 2px;
  padding-bottom : 2px;
    top: 50px;
    left: 200px;
  /* style du bloc qui apparait */
  border: 3px groove #C91010;
  border-radius: 5px;
  background-color: #ffffff;
  -moz-border-radius: 5px;
  text-align: center;
    visibility: visible;
width: 150px;
height: 170px;
}
.lock:hover .lock-hidden {
  display: block;
}



Et on clique sur .


Les champs que vous pouvez modifier sont (en rouge, mais ce qui apparait entre parenthèse sont mes indications, ne mettez pas ça dans votre code css, si vous voulez mettre vos commentaires dans le css pour vous rappelez de ce que c'est mettez ça : /*COMMENTAIRE/INDICATION*/) :


padding-left : 5px; (marge entre le bord gauche de l'info bulle et le contenu)
padding-right : 5px; (marge entre le bord droitde l'info bulle et le contenu)
padding-top : 2px; (marge entre le bord supérieur de l'info bulle et le contenu)
padding-bottom : 2px; (marge entre le bord inférieur de l'info bulle et le contenu)
top: [/color]50[/color]px; (position de l'info bulle en fonction du bord supérieur de l'info bulle et l'avatar)
left: [color]200[/color]px; (position de l'info bulle en fonction du bors gauche de l'info bulle et l'avatar)

border: 3px groove #C91010; (épaisseur du bord, style de la bordure (groove c'est un effet de relief), couleur de la bordure)
background-color: #ffffff; (couleur de fond de l'info bulle)
text-align: center; (position du contenu dans l'info bulle)
width: 150px; (largeur de l'info bulle)
height: 170px; (hauteur de l'info bulle)


Ensuite on va dans les templates :

Affichage >> templates >> général >> viewtopic_body : Affichage d'un sujet

On clique sur .

Dans le template on cherche

Code:

{postrow.displayed.POSTER_AVATAR}

(pour aller plus vite vous cliquer sur ctrl+f et vous rentrez la variable dans la zone de texte.

Ça, c'est la variable qui correspond à l'avatar.

Alors c'est simple, vous l'enlevez, et à la place vous mettez :

Code:

<table>
    <tr>
      <td> 
      <div class="lock"> {postrow.displayed.POSTER_AVATAR}<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>

Donc en fait, j'ai juste entouré, ici le "{postrow.displayed.POSTER_AVATAR}" du code pour l'info bulle, qui est :

Code:

<table>
    <tr>
      <td> 
      <div class="lock"> CE QUE L'ON PASSE AVEC LA SOURIS<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>

Ensuite on clique sur


Nous revoilà sur la page des tamplate, avec un petit à côté du template qu'on vient de modifier. Alors avant de l'enregistrer, faite un aperçu en cliquant sur la toute petite icone blanche juste à gauche de la croix verte. Vous allez dans vos sujets et vous testez en passant la souris sur l'avatar. (evidemment oubliez pas de remplir le contenu de l'info bull : "CE QUI APPARAITRA AU PASSAGE DE LA SOURIS" si vous voulez voir quelque chose.

(si ça ne marche pas, actualisez en cliquant sur ctrl+f5 jusqu'à ce que vous voyez l'info bulle, ça m'arrive souvent sur mon fofo )

Et si c'est bon, vous allez tout de suite enregistrer en cliquant sur .



Voilà voilà.

[Invité]

Bonjour,

Et merci, ça marche du tonnerre!
En remplaçant

Code:

{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span>
         <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />

Par

Code:

<table>
    <tr>
      <td>
    <span class="gensmall"> <div class="lock"> {postrow.displayed.POSTER_AVATAR}<span class="lock-hidden">
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}</span>
         <img src="https://2img.net/i/empty.gif" alt="" style="width:150px;height:1px" />
</div></span>
      </td>
    </tr>
</table>

J'ai pu mettre toutes le infos du profil et la feuille de personnage dans l'infobulle!
Merci beaucoup

[Lixyr]

x) de rien.
Hey on va travailler ensemble toutes les deux, décidemment. MDR !

Et si on ne veut mettre que quelques points du profil, on fait comment ? (genre, le nombre de message, les points)

[Invité]

Re,

En fait comme j'ai déplacer ce qui gère les champs du profil en général, pour choisir ce que je veux afficher ou non, il me suffit de passer par
Panneau d'administration > Utilisateurs et groupes > Profil > champs du profil
et je coche oui à ceux que je veux voir affiché dans les messages.

[Lixyr]

Vouais, mais comme je voulais certaines choses dans l'info bulle et certaines choses sous l'avatar... 3)

[kakale]

Pour ma part sa ne marche pas...
Sa m'affiche 4 fois le profil O_O

Sinon pouvez vous me faire un copier coller de votre template s'il vous plait?
Sa sera beaucoup plus rapide!

Sachant que j'aime bien l'info bulle de ton forum avec les levels!

[Lixyr]

Le problème étant que je n'ai pas modifié mon template que pour ça, tu auras toutes mes autres modifications avec.

Le mieux ce serait que tu nous donnes tout ce que tu as enregistré pour les info bulles, qu'on puisse voir ce qui ne va pas.

[kakale]

Hé bien, j'ai fais comme tu as dis ci-dessus, sauf que, des que je remplace le poster-avatar, j'ai profil qui se mette ^^'...


EDIT: sa marche par je ne sais qu'elle miracle... AH ! oui j'ai du remettre le template par défault ^^'

Sinon, connaissez vous un moyen de changez le style du calque et de l'écriture ^^?

[Lixyr]

T'es sûr que tu as fais exactement comme j'ai dit ? x) :

Code:

<table>
    <tr>
      <td>
      <div class="lock"> {postrow.displayed.POSTER_AVATAR}<div class="lock-hidden">
CE QUI APPARAITRA AU PASSAGE DE LA SOURIS
</div></div>
      </td>
    </tr>
</table>

Tu as rentré le code css ?

[kakale]

Oui j'ai rentré le code CSS mais maintenant, si tu regarde sur mon forum, sa fait horrible car on voit le profil + l'info bulle qui a un fond blanc et un cadre super moche ^^'

[Lixyr]

Pour le fond et le cadre j'ai expliqué ce qu'il fallait modifier. x)

Le problème, c'est que tu voit le profil en dessous ET dans l'info bulle, c'est ça ?

[kakale]

oui exact

[Lixyr]

Donc pour changer le style du cadre :
Dans le code css on change ça :

border: 3px groove #C91010;

EXPLICATION :

- 3 c'est l'épaisseur du cadre
- groove c'est un cadre en relief. Pour l'avoir un pointiller on met : dashed. Pour n'avoir qu'une ligne normal on met solid.
- #C91010 c'est la couleur. Là c'est en rouge.

Pour changer le style d'écriture on doit rajouter une ligne en dessous :

Code:

font-family: Bleeding Cowboys, Evanescent;

Je vous laisse choisir la police vous-même.


Ensuite, pour que le profil ne s'affiche QUE dans l'info bulle, il faut retourner dans le template.
A un endroit vous avez

Code:

{postrow.displayed.POSTER_RANK}

{postrow.displayed.RANK_IMAGE}

<br><hr>
<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
        </span>

Vous enlevez tout ça :

Code:

<!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->

Vous enregistrez, vous faite l'aperçu pour voir si c'est bon, et si c'est bon vous cliquez sur la petite croix verte.

[kakale]

Je vous remercie de votre rapidité et de votre patience, cela fait des mois que je cherchai pour faire une infobulle.

Je vous remercie encore une fois et je test cela !


EDIT : même après effacement, on voit toujours cela, le template est bien toujours le même que tout à l'heure viewtopic_body Affichage d'un sujet ?

EDIT2 : Sinon , je n'arrive pas à mettre par exemple, dans l'infobulle les coordonnées du personnages In game, et dans les profils de la personne ( c'est à dire en dessous de l'avatar ) les coordonnées IRL : âge ect... Est-ce possible?

[Lixyr]

Séparer les données, je n'ai pas su faire, malheureusement.

Oui le topic reste le même. C'est dans viewtopic-body qu'il faut faire les manip.
Il faudrait, sinon, que vous mettiez les coordonner IRL dans le Profil, et les Coordonnées du jeu dans la Feuille de Personnage.
Ça, c'est possible de séparer.

[kakale]

Hmm d'accord, je vous remercie ^^

[Lixyr]

Fais cela, et ensuite tu préviens que je te donne le code à rentrer. Il faudra juste que tu précises ce que tu veux sous l'avatar et ce que tu veux dans l'info bulle.