Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Page 2 sur 2 Précédent  1, 2

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

Résolu Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Ven 13 Fév 2015 - 10:50

Rappel du premier message :

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://footmanialabo.forumgratuit.be/

Description du problème

Bien le bonjour FA ,

Comme le titre l'indique , je cherche l'effet de l'avatar coulissant (ou en slide ou en transition ..) ..

J'ai bien trouvé ce sujet mais c'est pour phpbb2 : http://forum.forumactif.com/t335962-avatar-transition-laissant-apparent-les-infos-du-profil-au-survol-de-la-souris

Je l'ai testé et ça fonctionne mais le souci est qu'on y propose de remplacer entièrement le template viewtopic_body , ce qui a pour effet de changer multitude de réglages déjà effectués sur mon fofo test ..

Voilà voilà ..

D'avance merci pour vos aides très précieuses .. Wink

Alex.


Dernière édition par Alexlerouche le Sam 14 Fév 2015 - 23:05, édité 1 fois

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 13:04

De toute façon tu pourras toujours remodifier par la suite, donc tu peux à mon avis le faire dès maintenant Smile

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 13:11

Ok je me lance de ce pas , alors !

Merci pour ton aide , Maxmax ! thumright

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 13:22

Ca fonctionne impec' , Maxmax , encore merci !

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 13:28

Au cas où ce serait important pour R-Max , j'ai rajouté 2 lignes css à celui de Maxmax :

Code:
#profile-avatar img {
height : 150px;
width : 150px;
border : 1px solid black;
}

Voili voilu .. Je préfère les avatars en parfait carré .. Et avec une fine bordure faisant office de cadre .. Smile

Edit: Le résultat : http://footmanialabo.forumgratuit.be/t2-messages-d-invitation

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par R-max le Sam 14 Fév 2015 - 16:08

bonjour

bon j'ai fait quelques adaptation , c'est pas très concluent ..

en phpbb2 j'arrive a l’insérer et le transformer , mais la avec un thème phpbb3 , que je ne connais pas + que ça ,en + je n'est pas de thèmes de test en phpbb3 ..
pas moyen d'avoir quelques chose de correct .

ps: pour >maxmax , dans le code css que notre ami a trouvé il y avait déjà le redimensionnement de l'avatar en automatique
avec le widht:100%;
et le height:100%;
il me semble !!


donc plutôt que de faire traîné pour rien
je préfère passer la main a quelqu’un de plus compétant ..
bon wek-end



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 17:02

Je vais voir si j'arrive à quelque chose.
Lorsque tu survoles l'avatar, tu souhaites que les infos du membre apparaissent c'est ça ? Si oui quelles infos ?

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par R-max le Sam 14 Fév 2015 - 17:17

par contre j'ai tenter avec mon système d'avatar en phpbb2 , je ne me suis pas servit de celui du post que alexlerouche avait trouvé , peut être cela sera plus facile avec celui trouvé qui est déja intégrer dans du phpbb3.., mais ça revient a de la copie ,
bon bref c'est juste une précision..

les infos que tu recherche sont plus haut dans le sujet maxmax;)

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 17:28

Faut vraiment que j'apprenne à lire tout x)
Merci R-max !

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 17:33

Ok R-Max , merci bcp d'avoir essayé !! Et désolé si je t'ai fait perdre ton temps .. Sad

Je te remets tout de même tout au propre , Maxmax , et comme ça tu ne devras pas retourner en 1ère page :

Pour ce que j'aimerais cacher derrière l'avatar :
- Nombre de messages
- Les points (acquis quand on poste un sujet ou un commentaire)
- La date d'inscription
- L'âge
- La localisation

Ce qui doit rester et à placer sous l'avatar :
- Le pseudo
- Les rangs

Juste un petit ajout après ce que j'ai vu des tests de R-Max : Si faisable , les étoiles se rapportant au rang au-dessus des avatars ..
Sorry d'ajouter un "peu" de difficulté .. Laughing Enfin , si tu n'arrives pas à effectuer ce point , c'est pas bien grave , ce qu'il y a avant serait déjà super !

Merci de bien vouloir m'aider , Maxmax et encore un très grand merci à R-Max (manque plus que Nike Air Max .... MDR) !

A bientôt les gars .. Wink

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 20:03

Alors, remplace ton template viewtopic_body actuel par celui la (j'ai conservé la modification pour la taille de l'avatar) :
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 = {  };
    }

    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

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>

<h1 class="page-title">
  <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
  <div class="buttons">

      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
  </div>

  <div class="pathname-box">
      <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
  </div>

  <p class="right">
      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->
  </p>

  <div class="pagination">
      {PAGE_NUMBER}
      &nbsp;•&nbsp;
      <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
      <!-- BEGIN switch_plus_menu -->
      &nbsp;•&nbsp;
      <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_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
  </div>
  <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box"><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></p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
            <div class="clear"></div>
            <span class="corners-bottom"><span></span></span>
        </div>
      </div>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
        <div class="postbody">

            <ul class="profile-icons">
              <li>{postrow.displayed.THANK_IMG}</li>
              <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
              <li>{postrow.displayed.QUOTE_IMG}</li>
              <li>{postrow.displayed.EDIT_IMG}</li>
              <li>{postrow.displayed.DELETE_IMG}</li>
              <li>{postrow.displayed.IP_IMG}</li>
              <li>{postrow.displayed.REPORT_IMG_NEW}</li>
            </ul>

            <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
            <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />&nbsp;{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
            <div class="clearfix"></div>

            <!-- 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 style="display:none"></div>
            <div class="content clearfix">
              <div>{postrow.displayed.MESSAGE}</div>
                  <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                    <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                    <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file clearfix">
                          <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                          </dt>
                          <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->

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

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

                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                          </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                    </dd>
                  </dl>
                  <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->
        </div>

        <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
              <dt>
                  <div id="profile-avatar">{postrow.displayed.POSTER_AVATAR}</div>
              <div style="position:absolute; top:160px;">
                 <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
                 <br />{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
              </div>
              </dt>
              <dd>
            <div id="profile-info">
                  <!-- 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}
            </div>
              </dd>
              <dd><br /></dd>
              <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </dd>
            </dl>
        </div>

        <div class="clear"></div>

        <p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
  <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box"><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></p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
  <span class="corners-top"><span></span></span>
  <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
  <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
  <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
  <span class="corners-top"><span></span></span>
  <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
  <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
  <div class="clear"></div>
  <div>
      <!-- BEGIN link -->
      »&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
  </div>
  <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
  <span class="corners-top"><span></span></span>
  <div class="h3">&nbsp;{L_FORUM_RULES}</div>
  <div class="clear"></div>
  <table class="postbody">
      <tr>
        <!-- BEGIN switch_forum_rule_image -->
        <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
        </td>
        <!-- END switch_forum_rule_image -->
        <td class="rules content">
            {RULE_MSG}
        </td>
      </tr>
  </table>
  <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
  <div class="buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
  </div>

  <div class="pathname-box">
      <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
  </div>

  <div class="pagination">
      {PAGE_NUMBER}
  </div>
</div>
<div class="clear"></div>

<!-- BEGIN viewtopic_bottom -->
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
  <label>{L_JUMP_TO}:&nbsp;</label>
  {S_JUMPBOX_SELECT}&nbsp;
  <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<!-- END viewtopic_bottom -->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
  <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}" />
  <label>{L_MOD_TOOLS}:&nbsp;</label>
  {S_SELECT_MOD}&nbsp;
  <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
  <div class="h3">{L_TABS_PERMISSIONS}</div>
  {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', '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>

Ensuite ajoute le code suivant dans ton cc :
Code:
.postprofile {
    width:150px;    /* largeur avatar */
    height:150px;    /* hauteur avatar */
    border: 1px solid #0000FF;    /* couleur bordure avatar */
    overflow:hidden;      /* ne pas toucher */
    position:relative;    /* ne pas toucher */
}
 
#profile-avatar { 
    -webkit-transition:all 0.5s;    /* fait glisser l avatar */
    -moz-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    -o-transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    -ms-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    top:0;                /* ne pas toucher */
    right:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    position:absolute;    /* ne pas toucher */
    z-index:1;
}
 
.postprofile:hover #profile-avatar {
    margin-right:150px;      /* fait glisser l avatar a droite */
}
 
#profile-info {
    background-color:#333 !important;    /* fond infos */
    padding: 7px;
    top:0;                /* ne pas toucher */
    left:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    z-index:0;
}

Dis moi quand tu y as mis en place, même s'il y a certains bugs, comme ça je verrais directement ce qui ne va pas Smile (j'ai pas de forum de test en phpbb3 ^^)

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 21:24

Yep c'est installé .. Smile

Ca fonctionne mais effectivement y'a des petits réglages à faire : http://footmanialabo.forumgratuit.be/t2-messages-d-invitation

Voilà je suppose que tu vas voir les petits réglages qu'il y a à apporter .. Smile

Punaise , un très très grand merci !!!! Yes

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 21:55

Sinon si jamais ça peut t'aider à alléger le taf , vu que les avatars ont des coins à angles droits , ça ne me dérangerait pas du tout que les cadres profils se trouvant derrière les avatars aient aussi des angles droits .. C'est p-ê plus facile pour toi tout calibrer ? C'est comme tu le sens , c'es toi le boss .. Smile

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 22:15

Hop, voici une nouvelle version qui devrait être supérieure à la 1ère. (j'ai arrondis les angles de l'image aussi Smile)

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 = {  };
    }

    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

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>

<h1 class="page-title">
  <a href="{TOPIC_URL}">{TOPIC_TITLE}</a>
</h1>
<div class="topic-actions">
  <div class="buttons">

      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
  </div>

  <div class="pathname-box">
      <p itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
            <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
  </div>

  <p class="right">
      <!-- BEGIN switch_fb_likebtn -->
      <script>(function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/{LANGUAGE}/all.js#xfbml=1";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));</script>
      <span class="fb-like" data-href="{FORUM_URL}{TOPIC_URL}" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span>
      <!-- END switch_fb_likebtn -->
  </p>

  <div class="pagination">
      {PAGE_NUMBER}
      &nbsp;•&nbsp;
      <a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=forumotion">{L_SHARE}</a>
      <!-- BEGIN switch_plus_menu -->
      &nbsp;•&nbsp;
      <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_new('f{FORUM_ID}&amp;t={TOPIC_ID}','{JS_SESSION_ID}', {JS_AUTH_FAVOURITES});
      //]]>
      </script>
      <!-- END switch_plus_menu -->
  </div>
  <div class="clear"></div>
</div>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->
<p class="left-box"><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></p>
<div class="clear"></div>
{POLL_DISPLAY}

<!-- BEGIN postrow -->
  <!-- BEGIN hidden -->
      <div class="post {postrow.hidden.ROW_COUNT}">
        <div class="inner">
            <span class="corners-top"><span></span></span>
            <p style="text-align:center">{postrow.hidden.MESSAGE}</p>
            <div class="clear"></div>
            <span class="corners-bottom"><span></span></span>
        </div>
      </div>
  <!-- END hidden -->
  <!-- BEGIN displayed -->
      <div id="p{postrow.displayed.U_POST_ID}" class="post {postrow.displayed.ROW_COUNT}{postrow.displayed.ONLINE_IMG_NEW} post--{postrow.displayed.U_POST_ID}"{postrow.displayed.THANK_BGCOLOR} style="{postrow.displayed.DISPLAYABLE_STATE}">
        <div class="inner"><span class="corners-top"><span></span></span>
            <div style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></div>
        <div class="postbody">

            <ul class="profile-icons">
              <li>{postrow.displayed.THANK_IMG}</li>
              <li>{postrow.displayed.MULTIQUOTE_IMG}</li>
              <li>{postrow.displayed.QUOTE_IMG}</li>
              <li>{postrow.displayed.EDIT_IMG}</li>
              <li>{postrow.displayed.DELETE_IMG}</li>
              <li>{postrow.displayed.IP_IMG}</li>
              <li>{postrow.displayed.REPORT_IMG_NEW}</li>
            </ul>

            <h2 class="topic-title">{postrow.displayed.ICON} <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a></h2>
            <p class="author"><img src="{postrow.displayed.MINI_POST_IMG}" alt="{postrow.displayed.L_MINI_POST_ALT}" title="{postrow.displayed.L_MINI_POST_ALT}" />&nbsp;{L_TOPIC_BY}&nbsp;{postrow.displayed.POSTER_NAME} {postrow.displayed.POST_DATE_NEW}</p>
            <div class="clearfix"></div>

            <!-- 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 style="display:none"></div>
            <div class="content clearfix">
              <div>{postrow.displayed.MESSAGE}</div>
                  <!-- BEGIN switch_attachments -->
                  <dl class="attachbox">
                    <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                    <dd class="attachments">
                        <!-- BEGIN switch_post_attachments -->
                        <dl class="file clearfix">
                          <dt>
                              <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt=""/>
                          </dt>
                          <dd>
                              <!-- BEGIN switch_dl_att -->
                              <span><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}</span>
                              <!-- END switch_dl_att -->

                              <!-- BEGIN switch_no_dl_att -->
                              <span>{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}</span>
                              <!-- END switch_no_dl_att -->

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

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

                              <span>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</span>
                          </dd>
                        </dl>
                        <!-- END switch_post_attachments -->
                    </dd>
                  </dl>
                  <!-- END switch_attachments -->
            </div>
            {postrow.displayed.EDITED_MESSAGE}
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->
        </div>

        <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
              <dt>
                  <div id="profile-avatar">{postrow.displayed.POSTER_AVATAR}</div>
              <div id="profile-name">
                <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
                <br />{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}
              </div>
              </dt>
              <dd>
            <div id="profile-info">
                  <!-- 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}
            </div>
              </dd>
              <dd><br /></dd>
              <dd>
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </dd>
            </dl>
        </div>

        <div class="clear"></div>

        <p class="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;<a href="#bottom">{L_GOTO_DOWN}</a></p>
        <span class="corners-bottom"><span></span></span></div>
      </div>
      <!-- BEGIN first_post_br -->
      <hr id="first-post-br" />
      <!-- END first_post_br -->
  <!-- END displayed -->
<!-- END postrow -->

<a name="bottomtitle"></a>

<!-- BEGIN topicpagination -->
<p class="pagination">{PAGINATION}</p>
<!-- END topicpagination -->

<p class="left-box"><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></p>

<div class="clear"></div>

<div class="noprint">
<!-- BEGIN switch_user_logged_in -->
<!-- BEGIN watchtopic -->
<p class="right">{S_WATCH_TOPIC}</p>
<!-- END watchtopic -->
<!-- END switch_user_logged_in -->
</div>

<!-- BEGIN promot_trafic -->
<div class="post row2" id="ptrafic_close" style="display:none;font-size:1.3em;line-height:1.4em">
  <span class="corners-top"><span></span></span>
  <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_MORE_IMG}" alt="+" align="" border="0" /></a></span>
  <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
  <span class="corners-bottom"><span></span></span>
</div>
<div class="post row2" id="ptrafic_open" style="display:'';font-size:1.3em;line-height:1.4em">
  <span class="corners-top"><span></span></span>
  <span class="gensmall"><a href="javascript:ShowHideLayer('ptrafic_open','ptrafic_close');"><img src="{TABS_LESS_IMG}" alt="-" align="" border="0" /></a></span>
  <span class="ptrafic">&nbsp;{PROMOT_TRAFIC_TITLE}</span>
  <div class="clear"></div>
  <div>
      <!-- BEGIN link -->
      »&nbsp;<a href="{promot_trafic.link.U_HREF}" target="_blank" title="{promot_trafic.link.TITLE}" rel="nofollow">{promot_trafic.link.TITLE}</a><br />
      <!-- END link -->
  </div>
  <span class="corners-bottom"><span></span></span>
</div>
<!-- END promot_trafic -->

<!-- BEGIN switch_forum_rules -->
<div class="post row1" id="forum_rules">
  <span class="corners-top"><span></span></span>
  <div class="h3">&nbsp;{L_FORUM_RULES}</div>
  <div class="clear"></div>
  <table class="postbody">
      <tr>
        <!-- BEGIN switch_forum_rule_image -->
        <td class="logo">
            <img src="{RULE_IMG_URL}" alt="" />
        </td>
        <!-- END switch_forum_rule_image -->
        <td class="rules content">
            {RULE_MSG}
        </td>
      </tr>
  </table>
  <span class="corners-bottom"><span></span></span>
</div>
<!-- END switch_forum_rules -->

<!-- BEGIN switch_user_logged_in -->
<a name="quickreply"></a>
{QUICK_REPLY_FORM}
<!-- END switch_user_logged_in -->

<hr />

<div class="topic-actions">
  <div class="buttons">
      <!-- BEGIN switch_user_authpost -->
      <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" class="{POST_IMG_CLASS}" alt="{L_POST_NEW_TOPIC}" /></a>&nbsp;&nbsp;&nbsp;
      <!-- END switch_user_authpost -->

      <!-- BEGIN switch_user_authreply -->
      <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" class="i_reply" alt="{L_POST_REPLY_TOPIC}" /></a>
      <!-- END switch_user_authreply -->
  </div>

  <div class="pathname-box">
      <p><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_SEP}<a class="nav" href="{U_ALBUM}">{L_ALBUM}</a>{NAV_CAT_DESC}</p>
  </div>

  <div class="pagination">
      {PAGE_NUMBER}
  </div>
</div>
<div class="clear"></div>

<!-- BEGIN viewtopic_bottom -->
<form action="{S_JUMPBOX_ACTION}" method="get" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<fieldset class="jumpbox">
  <label>{L_JUMP_TO}:&nbsp;</label>
  {S_JUMPBOX_SELECT}&nbsp;
  <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<!-- END viewtopic_bottom -->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
<fieldset class="quickmod">
  <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}" />
  <label>{L_MOD_TOOLS}:&nbsp;</label>
  {S_SELECT_MOD}&nbsp;
  <input class="button2" type="submit" value="{L_GO}" />
</fieldset>
</form>
<div class="clear"></div>
<p class="right">{S_TOPIC_ADMIN}</p>
<!-- END viewtopic_bottom -->

<!-- BEGIN show_permissions -->
  <div class="h3">{L_TABS_PERMISSIONS}</div>
  {S_AUTH_LIST}
<!-- END show_permissions -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody .content', '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>

Code css :
Code:
.postprofile {
    width:150px;    /* largeur avatar */
    height:200px;    /* hauteur avatar */
    border: 1px solid #0000FF;    /* couleur bordure avatar */
   padding: 0px;
    position:relative;    /* ne pas toucher */
}

.postprofile dt {
   margin-left: 0px;
}
 
#profile-avatar {
    -webkit-transition:all 0.5s;    /* fait glisser l avatar */
    -moz-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    -o-transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    -ms-transition:all 0.5s;      /* fait glisser l avatar autre navigateur */
    transition:all 0.5s;        /* fait glisser l avatar autre navigateur */
    top:0;                /* ne pas toucher */
    right:0;              /* ne pas toucher */
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    position:absolute;    /* ne pas toucher */
    z-index:1;
}

#profile-avatar img {
   height: 150px;
   width: 150px;
   border-radius: 10px;
}
 
.postprofile:hover #profile-avatar {
    margin-right:150px;      /* fait glisser l avatar a droite */
}
 
#profile-info {
    width:100%;          /* ne pas toucher */
    height:100%;        /* ne pas toucher */
    z-index:0;
   margin-top: 50px;
}

#profile-name {
   position: absolute;
   top: 160px;
   width: 100%;
   margin: auto;
}

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 22:23

Merveilleuuuux !! Smile Smile Smile

Juste 2 petites choses , toujours si faisable , et ce sera impec ..

- Y'a moyen de centrer le cadre dans sa zone sur la largueur (pas la hauteur..) ?
- Et quand l'avatar à glissé à fond vers la gauche , on voit un petit bord de l'image .. Bon , ça , si ça reste ainsi , c'est pas grave , c'est pas dérangeant .. Mais si jamais tu sais y faire quelque chose .. (oui je sais , je suis chiant .. Laughing )

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 22:26

Arf , j'ai rajouté les étoiles de rang , pour voir , car pas installées sur ce forum test , et elles touchent un peu le bas du cadre .. :/

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 22:40

Dans ton code css repère le passage :
Code:
.postprofile {
    width:150px;    /* largeur avatar */
    height:200px;    /* hauteur avatar */
    border: 1px solid #0000FF;    /* couleur bordure avatar */
  padding: 0px;
    position:relative;    /* ne pas toucher */
}
Remplace le par :
Code:
.postprofile {
    width:150px;    /* largeur avatar */
    height:250px;    /* hauteur avatar */
    border: 1px solid #0000FF;    /* couleur bordure avatar */
    padding: 0px;
    position:relative;    /* ne pas toucher */
    overflow: hidden;
}

N'hésite pas à dire les modif' que tu souhaites Smile

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 22:49

On approche l'excellence ! Smile Superbe travail !!

La seule petite chose à améliorer , mais vraiment c'est de "l'enquiquinage" de ma part , ce serait , si possible , de centrer le postprophile dans sa zone , ou du moins qu'il soit moins collé sur la gauche .. Plus près de la zone texte ..


Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 22:51

J'ai édité car j'ai bredouillé des choses incompréhensibles .... mdr

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 22:58

Dans ton css cherche :
Code:
.postprofile dt {
  margin-left: 0px;
}
Remplace par :
Code:
.postprofile dt {
  margin-left: 0px!important;
}

Ensuite en dessous de :
Code:
.postprofile {
Ajoute :
Code:
margin-left: 100px;

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 23:04

Ben voilà , c'est résolu ! Very Happy Very Happy Very Happy Mais souci ... Ca ne me plait pas ... Mdr Mr. Green Razz Razz Comment te remercier .. Je ne peux que te dire que tu as fait un travail du tonnerre ..

Giga merci Maxmax .. Wink Wink

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 23:05

Et merci aussi à R-Max ! Super les gars ! Yes

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par R-max le Sam 14 Fév 2015 - 23:06

ba j'ai rien fait Very Happy mdr

R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Alexlerouche le Sam 14 Fév 2015 - 23:09

Ben quand même .. Il me semble que tu as passé un bon p'tit temps à travailler sur ce topic .. Tu as donc aussi apporté ta contribution .. Wink

Alexlerouche
***

Masculin
Messages : 160
Inscrit(e) le : 25/04/2014

http://footmania.forumgratuit.be/
Alexlerouche a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par Maxmax le Sam 14 Fév 2015 - 23:11

De rien Wink

Maxmax
***

Masculin
Messages : 159
Inscrit(e) le : 29/09/2012

http://lanefdesfous.forumgratuit.org/
Maxmax a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Avatar en slide (coulissant) de la droite vers la gauche au survol de la souris

Message par R-max le Dim 15 Fév 2015 - 1:10

@Alexlerouche a écrit:Ben quand même .. Il me semble que tu as passé un bon p'tit temps à travailler sur ce topic .. Tu as donc aussi apporté ta contribution .. Wink

ba non pas temps que ça , j'ai voulu adapté le mien mais ça ne marcher pas !!

je vient de le re-modifier pour un phpbb2 qui coulisse par le haut
avec le texte intérieur qui slide aussi ,le pseudo aussi en slide
rajouté un contour en plus ..
il est instalé nickel en 1 h .

mais sur ton template pas moyen ..
bon c'est pas grave maxmax et passer par içi ..



R-max
# Tropactif #

Masculin
Messages : 1450
Inscrit(e) le : 08/01/2015

http://graphcode.forumactif.org/
R-max a été remercié(e) par l'auteur de ce sujet.

Page 2 sur 2 Précédent  1, 2

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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