Contour autour de l'avatar

[Valou78230]

Bonjour à tous,

J'aimerais savoir comment on peut faire pour qu'un cadre change autour de l'avatar s'il est en ligne ou hors ligne.

J'ai déjà pioché dans un sujet dans le template viewtopic-body j'ai remplacer ceci

Code:

<td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
        <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}

            {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="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

par ça :

Code:

 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
  </strong></span>
</div>
<span class="postdetails poster-profile">
  <div class="postrank">{postrow.displayed.POSTER_RANK}
</div>
<div align="center" class"postava">{postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}</div>
                 


<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span>
         

        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Et dans le css du forum j'ai mis :

Code:

div.post-pseudo, span.name a {
font-size: 19px;
padding: 7px;
}
div.postava, .poster-profile a img {
Background: #80B2D9;
border: 4px solid #80B2D9;
border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
-htm-border-radius: 5px;
}

Merci pour votre aide.

[kheino]

Bonjour Valou,

Tiens je reconnais cette structure du template viewtopic_body...

Ce que toi tu demandes est néanmoins un peu plus complexe.
Le plus "évident" me parait-il, c'est de :
- Créer un cadre-image pour le on_line et une autre pour le off_ligne
- Les placer dans leur champ respetif >> Mini-icônes des messages
- Enfin, essayer de les positionner avec l'identifiant par défaut : #i_icon_online

[Valou78230]

D'accord et qu'elle est le code a mettre ? A la place de quoi ?

[kheino]

L'identifiant mentionné plus haut n'est pas à mettre à la place d'autre chose, tout ce qu'on peut essayer, c'est de le positionner sur l'avatar, ce qui n'est pas une mince affaire.

Bien sûr dans le cadre, il faut que ce soit en transparence.

[Valou78230]

D'accord mais ou ce trouve la partie : Mini-icone des messages ?

[Valou78230]

Désolé du double poste mais quand vous dite que dans le cadre ça doit être transparent, tous mes avatar ne sont pas de la même taille donc ça va s'adapter ?

[kheino]

Ah pardon, c'est un identifaint pour le CSS.
PA >> Affichage >> Couleurs > Feuille de style CSS :

#i_icon_online {
propriétés CSS;
}

Créée déjà les images, mets-les à l'endroit indiqué et je t'aiderai pour le positionnement, si j'y arrive...
Il me semble que nous ne pourrons afficher par ce biais qu'une seule image, on-line ou off-line.

EDIT : Nous avons posté en même temps.
Euh là c'est carrément compliqué, mais nous pouvons voir.
La transparence dans le cadre est obligée, sinon pas moyen de voir les avatars.
Par Gimp ou autres éditeurs d'images, ce doit être faisable...

[Valou78230]

Voila j'ai mis le code dans les feuilles CSS et j'ai mis les images :



EDIT : Ca marche toujours pas X)

[kheino]

Peux-tu donner les liens de tes images,parce que je ne saurais le faire à vue.

[Valou78230]

D'accord les voici :

En ligne : https://i.servimg.com/u/f46/15/26/45/11/en_lig11.png

Hors ligne : https://i.servimg.com/u/f46/15/26/45/11/hors_l11.png

Merci de votre aide.

[kheino]

Bonsoir, bonjour Valou,

Alors nous allons tout d'abord placer l'image du "en-ligne" aussi dans :
Affichage >> Images > Mini-icônes ET > Boutons
Le hors-ligne juste dans : Mini-icônes

Ensuite, dans le template viewtopic_body cherche la variable :

Code:

{postrow.displayed.ONLINE_IMG}

- Coupe cette variable (Ctrl+X)
- Colle-la (Ctrl+V) avant la variable de l'avatar, d'après ton template :

Code:

<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>

Je ne sais pas si c'est toi ou bien le tuto sur lequel tu as pris la partie du profil qui a voulu que l'image du rang se retrouve avec l'avatar et non avec le bloc-rang, mais je l'ai remis en place dans le div-rang.
Voici toute la partie :

Code:

 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
<div align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
  </strong></span>
</div>
<span class="postdetails poster-profile">
  <div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>
  <br /><br />
<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span> 
          <br />
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>

Bien sûr tu peux replacer la variable de l'image-rang avec l'avatar.

Enfin, dans le CSS nous allons pouvoir placer ce cadre (petit, non ?) sur l'avatar :

#i_icon_online {
display: inline;
position: relative;
top: 120px;
width: 40px;
hight: 40px;
margin: 0 auto;
}

C'est depuis le haut (en rouge) que tu vas chercher à placer ce cadre.
Tout dépend ce que tu as placer dans le "div-avatar", pour moi, trois fois la hauteur du cadre (40px) le place pile au milieu de l'avatar.

[Valou78230]

EDIT : Ancien poste supprimé.

Je ne comprend pas comment on peut placer la cadre ? Mais si je choisis la taille ca veut dire que le cadre ne s'adapte pas au contour de l'image si ?

2eme Edit : moi quand je met 40px déjà il est au milieu du forum, et je le vois que pour une personne pas sur tout les messages.

[kheino]

Bonjour Valou,

Pas oublié, juste le temps qui souffle très vite...

Alors reprenons ça seulement depuis la partie de la variable "online" coupée et placée avec le div de l'avatar.
En fait, mon erreur a été de ne pas rendre ces deux images "parents" afin que l'on puisse utiliser la position absolue pour le cadre, dont voici comment se présente le code HTML au final :

Code:

<div align="center" class="imgava">
  {postrow.displayed.POSTER_AVATAR}
  <p class="imgaround"> {postrow.displayed.ONLINE_IMG} </p>
</div>

Que tu mets en lieu et place de :

Code:

<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>

Nous avons attribué deux différents "class" afin de pouvoir ensuite les positionner dans le CSS :

div.imgava, .poster-profile a img {
display: inline block;
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
p.imgaround, #i_icon_online img {
display: inline block;
position: absolute;
top: 20px;
left: 60px;
width: 40px;
height: 40px;
z-index: 1;
}

pour répondre à ta question sur les dimensions de ces deux images, ton cadre est bel et bien trop petit.
Il me semble que si tu prenais des dimensions comme par exemple 160*210 pixels
tu pourrais ensuite limiter les dimensions des avatars (en demandant à tes membres d'en tenir compte lors du choix de leur avatar) avec dans le CSS :

.poster-profile a img {
max-width: 150px;
max-height: 200px;
min-width: 140px;
min-height: 190px;
}

Pour arriver à avoir quelque chose de pas trop déséquilibrer.
Les dimensions ne sont qu'à titre d'exemple.

[Valou78230]

J'ai bien remplacer le code HTML mais c'est au niveau du CSS que je bloque. Je ne sais pas si j'ai bien fais. Voici mon code css de mon forum personnalisé :

Code:

.forumline, td.row3Right, td.catBottom { border: 1px solid black; }
input, select, textarea { border: 1px solid white; padding: 3px; margin: 3px; }
td.catHead { padding: 3px; border: 1px solid black; padding-left: 10px; letter-spacing: 1px; }
td.row1.over, div.topictitle { padding: 10px; }
th { padding: 5px; }
td.bodyline { padding-top: 0px; margin: 0px; }
a.mainmenu { display: block; }

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

body{
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
        .genmed a,.genmed a:active{
        font-size:0.8em;
        text-decoration:none;
        }
        .genmed a:hover{
        text-decoration:underline;
        }
div.post-pseudo, span.name a {
font-size: 19px;
padding: 7px;
}
div.imgava, .poster-profile a img {
display: inline block;
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
p.imgaround, #i_icon_online img {
display: inline block;
position: absolute;
top: 5px;
left: 60px;
width: 40px;
height: 40px;
z-index: 1;
}

L'image en ligne apparaît dans les raccourcis de contact (en fin de message) et il n’apparaît qu'une fois et pas pour chaque message.

[kheino]

Je ne vois rien au niveau du CSS.

Peux-tu me redonner le template viewtopic_body en entier et un lien sur un sujet que je puisse voir en tant qu'invité ?

[Valou78230]

Template entier :

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(){
   _atc.cwait = 0;
   $('.addthis_button').mouseup(function(){
      if ($('#at15s').css('display') == 'block') {
         addthis_close();
         addthis_close();
      }
   });
});
//]]>
</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>   
         <!-- 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 align="left" valign="middle" nowrap="nowrap">
         <!-- BEGIN switch_twitter_btn -->
         <span id="twitter_btn" style="margin-left: 6px; ">
         <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a>
         <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
         </span>
         <!-- END switch_twitter_btn -->
         <!-- BEGIN switch_fb_likebtn -->
         <span id="fb_likebtn" style="margin-left: 6px; ">
            <iframe src="http://www.facebook.com/plugins/like.php?href={FORUM_URL}{TOPIC_URL}&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
         </span>
         <!-- END switch_fb_likebtn -->
      </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>
      <td align="right" valign="bottom" nowrap="nowrap" width="100%">
         <span class="gensmall bold">
            <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
             | 
            <script type="text/javascript">//<![CDATA[
               var url_favourite = '{U_FAVOURITE_JS_PLUS_MENU}';
               var url_newposts = '{U_NEWPOSTS_JS_PLUS_MENU}';
               var url_egosearch = '{U_EGOSEARCH_JS_PLUS_MENU}';
               var url_unanswered = '{U_UNANSWERED_JS_PLUS_MENU}';
               var url_watchsearch = '{U_WATCHSEARCH_JS_PLUS_MENU}';
               var url_tellfriend = '{U_TELLFRIEND_JS_PLUS_MENU}';
               insert_plus_menu('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
            //]]>
            </script>
         </span>
      </td>
   </tr>
</table>

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0" style="border-bottom: 0px;">
   <tr align="right">
      <td class="catHead" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" class="t-title">
                  <h1 class="cattitle"> {TOPIC_TITLE}</h1>
               </td>
               <td align="right" width="9%" class="browse-arrows"><a href="{U_VIEW_OLDER_TOPIC}">{L_VIEW_PREVIOUS_TOPIC}</a> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#bottom">{L_GOTO_DOWN}</a> </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 align="center"><span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}
  </strong></span>
</div>
<span class="postdetails poster-profile">
  <div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class="imgava">
  {postrow.displayed.POSTER_AVATAR}
  <p class="imgaround"> {postrow.displayed.ONLINE_IMG} </p>
</div>
  <br /><br />
<div align="center" class="postinfos">
<!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
</div>
<div align="center" class="postrpg">{postrow.displayed.POSTER_RPG}</div>
</span> 
          <br />
        <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </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}   <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 -->

                  <div class="postbody">

                     <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                     <div class="clear"></div>
                     <div class="signature_div">
                        {postrow.displayed.SIGNATURE}
                     </div>

                  </div>
                  <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> <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 -->
               </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="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
   <tr align="right">
      <td class="catBottom" colspan="3" height="28">
         <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td width="9%" class="noprint"> </td>
               <td align="center" 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> <a href="{U_VIEW_NEWER_TOPIC}">{L_VIEW_NEXT_TOPIC}</a> <a href="#top">{L_BACK_TO_TOP}</a> </td>
            </tr>
         </table>
      </td>
   </tr>
</table>
<table class="forumline noprint" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin: 0 0 1px 0; border-top: 0px;">
   <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"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></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"><h1 class="cattitle"> {PROMOT_TRAFIC_TITLE}</h1></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 -->
         » <a style="text-decoration:none" href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}">{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">
                        <h1 class="cattitle"> {L_FORUM_RULES}</h1>
                     </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}" />
                  </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="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>   
            <!-- 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}: {S_JUMPBOX_SELECT} <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"> </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} <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="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>

http://frdark.gameproforums.com/t1-hey-toi-tu-veux-rentrer-dans-ma-team

[kheino]

Mais je ne vois rien du tout dans ton sujet : Il n'y a ni avatar, ni cadre !
Si je souhaite voir un sujet, c'est pour me rendre compte de ce que ça fait chez toi.


EDIT : Voici ce que ça donne chez moi avec ton template et le CSS donné plus haut, deux avatars de taille différente :

[Valou78230]

Moi voici ce que ca fait :

[kheino]

Je ne vais pas reprendre tout le tuto, alors je me contenterai de récapituler les étapes :
1°- Insérer les images on-offline dans les mini-icônes
2°- Insérer l'image online dans son champ dans les boutons
3°- Supprimer la variable en la copiant online de son emplacement d'origine du template (voir tuto plus haut)
4°- Coller la variable selon dernier HTML du template donné plus haut
5°- Installer le nouveau CSS à la place de l'ancien (attention, dans la feuille de style c'est le dernier code sur la feuille qui prévaut en cas de double identifiants)

Il n'y a pas de raison que ça donne autre chose chez toi alors que j'ai mis ton template et ton CSS et que j'ai le résultat montré plus haut...


EDIT : Zut, crotte et pataflûte, bien sûr qu'en invité on ne voit pas le "online" !

[Valou78230]

J'ai refait le tuto est toujours pas. J'ai peut-être fait une erreur quelques part ? Je me demanderais si vous aurez l'amabilité de faire une assistance via team viewer ?

Merci tout de même de votre aide !

[kheino]

C'est ton CSS qui a posé problème et c'est réglé.
Il faut que tu regardes celui qui a le pseudo "petitcochon".

Refais des cadres avec des dimensions correctes, ajuste le positionnement et c'est encore sympa comme idée.

[Valou78230]

Oui ! Excellent merci maintenant je dois le mettre en 160*210 comme vous m'avez dit.

EDIT : Encore un problème ^^' j'ai essayé de placer mon cadre au top : 0px je suis pas assez haut.

[kheino]

Exactement et penser à limiter les avatare avec 5 ou 10 pixels de moins.

Bonne soirée.

[Valou78230]

Oui oui c'est ce que j'ai fais j'ai limiter au rectangle qu'il y a dans le cadre et ca marche toujours pas.

Bonne soirée et merci encore !

[kheino]

Essaie d'augmenter le z-index: 10; et ainsi de suite...

[Valou78230]

C'est bon j'ai réussit en fait z-indez ne fesait rien c'était bizzare alors pour top j'ai mis un nombre négatif (-25px) et c'est nikel maintenant le problème c'est que ça cache le rang

[kheino]

Eh bien mets quelques sauts de ligne entre l'avatar et le rang .

Code:

<br />

Ou dans le CSS avec le class du div_rank tu peux mettre un margin-bottom ou un margin-top de ??px;

Ton image-cadre est bizarrement déformée et ce n'est pas très beau...
Pourquoi ne pas refaire un cadre aux bonnes dimensions avec un éditeur d'images comme Gimp ou photoshop ?

[Valou78230]

J'en ai refait un cadre car c'est vrai que celui là n'étais pas très bonne qualité.

JE comprend pas trop ce que vous avez mis pour mettre des espaces entre le rang et l'avatar

[kheino]

Eh bien il y a deux solutions pour l'espace entre le rang et l'avatar :
1°- D'après la partie concernée dans ton template que je t'avais mis plus haut, il y a :

Code:

 <div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>

Dans le CSS tu peux donner un margin-bottom: ??px; au div du rang.
Ou un margin-top: ??px; au div de l'avatar.

2°- Tu peux placer deux (ou plus) sauts de ligne après le bloc (div) du rang :

Code:

 <div class="postrank">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}
</div>
<br /><br />
<div align="center" class"postava">{postrow.displayed.ONLINE_IMG}{postrow.displayed.POSTER_AVATAR}
</div>

[Valou78230]

Voilà ça marche à merveille je te montre une image pour te faire voir ce que ca donne, car sans toi je n'y aurais pas réussit.



Voilà (et non il manque un truc à ma demande ^^' désolé si je te suis pénible)

Il faudrait que quand la personne est hors ligne le cadre change (enfin que ça soit un autre cadre quoi) est-ce que c'est possible ? Si oui comment ?