Avatar coulissant dans les messages

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

Résolu Avatar coulissant dans les messages

Message par Shiyami le Lun 13 Fév 2017 - 5:12

Bonjour à tous !
J'ai vu sur plusieurs forums les avatars des membres qui coulissaient et laissaient apparaître des informations qui viennent des champs des profils. J'aimerai savoir comment on peut faire ça, car ça pourrait être très pratique !
(J'ai trouvé des sujets sur ce forum qui pouvaient y répondre, mais ce n'était pas assez précis et j'ai peur de faire des bêtises, donc si vous pouvez être le plus précis possible pour le tuto, ce serait super !)
Merci d'avance !


Dernière édition par Shiyami le Sam 18 Fév 2017 - 0:09, édité 1 fois
avatar

Shiyami
**

Messages : 65
Inscrit(e) le : 10/02/2017

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

Résolu Re: Avatar coulissant dans les messages

Message par Shiyami le Mar 14 Fév 2017 - 10:57

Toujours d'actualité
avatar

Shiyami
**

Messages : 65
Inscrit(e) le : 10/02/2017

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

Résolu Re: Avatar coulissant dans les messages

Message par lmc38510 le Mer 15 Fév 2017 - 5:19

Bonjour "Shiyami"

Pour ton Avatar coulissant un truc de ce genre te conviendrait -> < Voir >

Les informations qui viennent des champs du profil sont dessous  Wink

Comme tu es en phbb3 il me faudrait ton Template "viewtopic_body" pour modifications
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant dans les messages

Message par Shiyami le Mer 15 Fév 2017 - 8:09

Oui, c'est quelque chose dans ce genre qui me conviendrait Smile Voici mon Template viewtopic_body :

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

$(function(){
    if(typeof(_atc) == "undefined") {
        _atc = {  };
    }
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }

        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }

   return false;
};

//]]>
</script>

<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>
            <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
            <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
            {NAV_CAT_DESC}
        </p>
   </div>

   <p class="right">
        <!-- BEGIN switch_twitter_btn -->
        <span>
            <a href="https://twitter.com/share" class="twitter-share-button" data-via="{TWITTER}">Tweet</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        </span>
        <!-- END switch_twitter_btn -->
      <!-- 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 = "https://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="#">{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}';
         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>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- 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}
               </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>

<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>

<!-- 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="//s7.addthis.com/js/300/addthis_widget.js#pubid=forumotion" type="text/javascript"></script>

Je te remercie pour ton aide Smile
avatar

Shiyami
**

Messages : 65
Inscrit(e) le : 10/02/2017

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

Résolu Re: Avatar coulissant dans les messages

Message par lmc38510 le Mer 15 Fév 2017 - 20:59

Parfait "Shiyami" Very Happy

Dans un premier temps .. modification du Template -> viewtopic_body

De la ligne 213 à 229 tu as le "postprofile" :
Code:
         <div class="postprofile" id="profile{postrow.displayed.U_POST_ID}">
            <!-- div class="online2"></div-->
            <dl>
               <dt>
                  {postrow.displayed.POSTER_AVATAR}
                  <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
               </dt>
               <dd>{postrow.displayed.POSTER_RANK_NEW}{postrow.displayed.RANK_IMAGE}</dd>
               <dd><br /></dd>
               <dd>
                  <!-- 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}
               </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>

Remplace le par ceci :
Code:
<div class="postprofile" id="profile{postrow.displayed.U_POST_ID}"> <!-- Debut postprofile -->
                            <!-- div class="online2"></div-->
  <div class="user-identiter"> <!-- Début 1 -->
                <div class="user-identiter-img"> <!-- Début 2 -->
      <dl>
         <dt>
         {postrow.displayed.POSTER_AVATAR}
         <br /><strong style="font-size:1.2em">{postrow.displayed.POSTER_NAME}</strong>
         </dt>
         <dd>{postrow.displayed.POSTER_RANK_NEW}
                            {postrow.displayed.RANK_IMAGE}</dd>
              </dl>
              </div>  <!-- Fin 2 -->
              <div class="user-information"> <!-- Début 3 -->
                <dl>
         <dd><br /></dd>
         <dd>
         <!-- 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}</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> <!-- Fin 3 -->
  </div>  <!-- Fin 1 --> 
</div>  <!-- Fin postprofile -->

Ventilé différemment avec annotations des "div" installées de 1 à 3 précisant le "Début" et la "Fin"

Dans un premier temps modifie ton Template comme indiqué ... cette modification n'entrainera aucun changement de l'affichage de ta colonne de Gauche ...
Confirme moi que tout est "OK"

C'est le CSS qui va s'en charger ... je fais quelques réglages Hauteur ... Largeur ... Couleur ...
et te le communique dans la foulée ...

Ps: c'est la 2ème fois que je rédige se Topic -> maintenance répétée sur ForumActif affraid
peux tu me donné le code couleur de ton fond d'écran

(le Code et Css tourne nickel)
avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant dans les messages

Message par Shiyami le Ven 17 Fév 2017 - 6:13

Merci pour ta réponse, je vais tester ça tout de suite ! J'éditerai ce message quand ce sera fait Smile

Edit : Alors en effet, ça ne change pas grand chose Smile Mais ça a l'air de tourner ! Le code couleur du fond d'écran c'est lightgrey et lightblue Smile Si tu veux plus de précisions, tu peux me demander
avatar

Shiyami
**

Messages : 65
Inscrit(e) le : 10/02/2017

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

Résolu Re: Avatar coulissant dans les messages

Message par lmc38510 le Ven 17 Fév 2017 - 10:12


Bon si ça tourne c'est bon signe ... normalement doit y avoir 0 changement par rapport à avant ... Very Happy

Maintenant dans ton CSS tu vas mettre ceci :
Code:
/* Infos posteur CACHEES panneau Coulissant */
.user-identiter {
  width: 250px;    /* à Ajuster si besoin*/
  height: 400px;    /* à Ajuster si besoin*/
  overflow: hidden;
  position: relative;
  padding: 0px 0px 0px !important;
  }
.user-information {
  width:250px;      /* à Ajuster si besoin */
  height:400px;      /* à Ajuster si besoin*/
  padding: 5px;
  overflow: auto;
  top: 0;
  left: 0; 
  }
.user-identiter-img {
  background-color:lightgrey;  /* voir avec -> lightblue */
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -htm-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
  }
.user-identiter:hover .user-identiter-img {
  top: 100%;
  }

voir si la couleur est "OK" ... et si quelques ajustement à faire ...

tient moi au courant ...

avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Avatar coulissant dans les messages

Message par Shiyami le Sam 18 Fév 2017 - 0:05

Et bah franchement, ça tourne nickel ! Merci beaucoup pour ton aide ! Smile
avatar

Shiyami
**

Messages : 65
Inscrit(e) le : 10/02/2017

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

Résolu Re: Avatar coulissant dans les messages

Message par lmc38510 le Sam 18 Fév 2017 - 0:09


C'est ce que je viens de voir sur ton Fofo .... bin c'est -> génial Wink



avatar

lmc38510
*****

Masculin
Messages : 891
Inscrit(e) le : 22/02/2012

http://lacaverneauxgrimoire.forumactif.org/
lmc38510 a été remercié(e) par l'auteur de ce sujet.

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