Isolement champs derrière avatar au survol

[Lana Cleevest]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,

J'ai suivi plusieurs tutoriels (isoler les champs pour faire des onglets dans le profil, ou isoler la feuille personnage pour la mettre derrière l'avatar) mais je n'ai trouvé aucun tutoriel combinant ce que je souhaite faire ou bien les liens sont brisés. Toujours est-il que j'aimerais beaucoup isoler 3 champs spécifiques du profil pour les placer derrière l'avatar et qui seraient visibles uniquement au survol de l'avatar, j'ai fait plusieurs recherches sur google mais tous les scripts fournis concernent d'autres fonctions pour ces isolements...

Actuellement c'est ma feuille personnage qui est derrière l'avatar, mais je souhaiterai la désactiver et la remplacer par certains champs du profil du coup

Merci infiniment pour la réponse

viewtopic_body :

Code:

<br />
<!----------------------------------------------->
<!-- LIENS DE NAVIGATION -------------->

<div class="navigation_links">

    <!-- Chaîne de lien : Catégorie > Forum > Sous-fo -->
    <span class="navigation_chain">
        {NAV_CAT_DESC}
    </span>

    <!-- Pagination -->
    <span class="right pagination page-topic">
        {PAGINATION}
    </span>

</div>

<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->

<div class="links_bar">
    <span>
        <!-- Boutons : nouveau -->
        <!-- BEGIN switch_user_authpost -->
        <a class="buttons" href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow">Nouveau</a>
        <!-- END switch_user_authpost -->

<!-- Espace -->
&nbsp; &nbsp;

        <!-- Bouton : répondre -->
        <!-- BEGIN switch_user_authreply -->
        <a class="buttons" href="{U_POST_REPLY_TOPIC}" class="buttons">Répondre</a>
        <!-- END switch_user_authreply -->
    </span>

</div>


<!----------------------------------------------->
<!-- MESSAGE -------------->


<!-- Contenenur des messages -->
<div class="container">

    <!-- Titre du poste -->
    <h1 class="page-title">{TOPIC_TITLE}</h1>


    <!-- Sondage (template : viewtopic_poll_ballot /// viewtopic_poll_result) -->
    {POLL_DISPLAY}


    <!-- Affichage d'un message -->
    <!-- BEGIN postrow -->
    <!-- BEGIN displayed -->
    <div id="{postrow.displayed.U_POST_ID}"></div>
    <div class="post_row" id="p{postrow.displayed.U_POST_ID}">

        <!-- Conteneur informations du message-->
        <div class="post_details">

            <span class="post_date">
                <!-- Lien d'ancre vers le message -->
                <a href="{postrow.displayed.POST_URL}">{postrow.displayed.POST_SUBJECT}</a> &nbsp;

                <!-- Date du message -->
                &nbsp;{postrow.displayed.POST_DATE_NEW}
            </span>
              
                <!-- Boutons d'édition de message -->
                <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>
                </ul>
          
                <!-- Conteneur du bouton like -->
                <!-- BEGIN switch_likes_active -->
                <div class="like_button">

                    <!-- Bouton "j'aime" -->
                    <button class="rep-button {postrow.displayed.switch_likes_active.C_VOTE_LIKE}" data-href="{postrow.displayed.switch_likes_active.U_VOTE_LIKE}" data-href-rm="{postrow.displayed.switch_likes_active.U_VOTE_RM_LIKE}">

                        <!-- Texte "j'aime" -->
                        <span class="like_text">{postrow.displayed.switch_likes_active.L_LIKE}</span>
                        <!-- Compte des "j'aime" -->
                        {postrow.displayed.switch_likes_active.COUNT_VOTE_LIKE}

                    </button>
                </div>
                <!-- END switch_likes_active -->
                <!-- Fin du bouton like -->


        </div>
        <!-- Fin détails -->


        <!-- Colonne de profil -->
      <div class="post_profil">
          
        <!-- Avatar -->
          <div class="description4">
          <div style="display: block; text-align: center; height:320px;">
          {postrow.displayed.POSTER_AVATAR}
          <div class="description4_contenu" style="margin-top:-320px;">
        <!-- Champs de profil de la feuille de personnage -->
            <div style="OVERFLOW: auto; height: 100%;"><span id="rpgone"><span class="rpgsheetbr">{postrow.displayed.POSTER_RPG}</span></span>
<script type="text/javascript">jQuery('#rpgone').html(jQuery('#rpgone').html().replace('I of the storm','')).removeAttr('id')</script>
          </div></div></div></div>
            
            <center>
        <!-- Pseudo -->
              <span class="post_pseudo">{postrow.displayed.POSTER_NAME}</span>
        <!-- Rang -->
                <span class="post_rank">
                <span class="postdetails poster-profile">
                  {postrow.displayed.POSTER_RANK}
                  {postrow.displayed.RANK_IMAGE}</span></span></center>
              <div class="post_userinfo">
              
               <!-- Champs de profil -->
                <!-- BEGIN profile_field -->
                
                <!-- Label d'un champs de profil -->
                <span class="profil_label">{postrow.displayed.profile_field.LABEL}</span>

                <!-- Contenu d'un champs de profil -->
                <span class="profil_content">{postrow.displayed.profile_field.CONTENT}</span>

                <!-- Séparateur entre champs de profil -->
                <span class="profil_separator">{postrow.displayed.profile_field.SEPARATOR}</span>
                <!-- END profile_field -->
    
                <!-- Fin de champs de profil -->
              
                
            </div>  
                  <br />
            <!-- Lien de contact -->
        <div class="profil_contact"><center>
                                    <div class="imgprofil">{postrow.displayed.PROFILE} {postrow.displayed.PM}
                                    <div class="contactfields"><!-- BEGIN contact_field --> <div class="contact">{postrow.displayed.contact_field.CONTENT}
                                      <span style="display: none;">{postrow.displayed.contact_field.LABEL}</span>
                                      </div>
                                      <!-- END contact_field --></div>
                                       <!-- En ligne -->
            
                                      <span class="contact"><span class="enligne"><span class="{postrow.displayed.ONLINE_IMG_NEW}"></span> <!-- Image (!!voir css .online) -->
                                        {postrow.displayed.ONLINE_IMG_NEW}</span></span><!-- Textuel -->
          
                                    </div>
    </center>
  
   <script type="text/javascript">
                                          $('.contactfields .contact').each(function(i) {
    var text = $(this).children('span').text();
    $(this).attr('data-label', text);
  });</script>
                                        
    </div></div>
      
      
        <!-- Fin colonne profil -->


        <!-- Contenu du message -->
        <div class="post_message postbody content">
            {postrow.displayed.MESSAGE}

            <!-- Signature -->
            <!-- BEGIN switch_signature -->
            <div class="signature_div" id="sig{postrow.displayed.U_POST_ID}">{postrow.displayed.SIGNATURE_NEW}</div>
            <!-- END switch_signature -->

        </div>
        <!-- Fin du contenu du message -->
    </div>

    <!-- END displayed -->
    <!-- END postrow -->
    <!-- Fin affichage d'un message -->

</div>
<!-- Fin des messages -->


<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->


<div class="links_bar">
    <span>
        <!-- Lien "surveiller le sujet" -->
        <!-- BEGIN switch_user_logged_in -->
        <!-- BEGIN watchtopic -->
        <span class="specials_links">{S_WATCH_TOPIC}</span>
        <!-- END watchtopic -->
        <!-- END switch_user_logged_in -->

        <!-- Lien "sujets surveillés" -->
        &nbsp;<a class="specials_links" href="{U_WATCHSEARCH_JS_PLUS_MENU}">Sujets surveillés</a>
    </span>

    <!-- Pagination -->
    <!-- BEGIN topicpagination -->
    <span class="pagination right">{PAGINATION}</span>
    <!-- END topicpagination -->

</div>


<!----------------------------------------------->
<!-- REGLES DE LA CATEGORIE (si activé) -------------->

<!-- BEGIN switch_forum_rules -->
<div class="panel" id="forum_rules">

    <!-- Titre "règlement" -->
    <div class="h3">{L_FORUM_RULES}</div>

    <!-- Règlement -->
    <div class="postbody">
        <!-- Image du règlement -->
        <!-- BEGIN switch_forum_rule_image -->
        <img class="left logo" src="{RULE_IMG_URL}" alt="" />
        <!-- END switch_forum_rule_image -->

        <!-- Contenu -->
        {RULE_MSG}
    </div>

</div>
<!-- END switch_forum_rules -->


<!----------------------------------------------->
<!-- REPONSE RAPIDE -------------->

<div class="container quickreply" id="quickreply_content">
    <!-- BEGIN switch_user_logged_in -->
    {QUICK_REPLY_FORM}
    <!-- END switch_user_logged_in -->
</div>


<!----------------------------------------------->
<!-- BARRE DE GESTION -------------->


<div class="links_bar">
    <span>
        <!-- Bouton : nouveau -->
        <!-- BEGIN switch_user_authpost -->
        <a class="buttons" href="{U_POST_NEW_TOPIC}" accesskey="n" rel="nofollow">Nouveau</a>&nbsp;&nbsp;&nbsp;
        <!-- END switch_user_authpost -->

        <!-- Bouton : répondre -->
        <!-- BEGIN switch_user_authreply -->
        <a class="buttons" href="{U_POST_REPLY_TOPIC}" class="buttons">Répondre</a>
        <!-- END switch_user_authreply -->
    </span>

</div>


<!----------------------------------------------->
<!-- SAUTER VERS UN AUTRE FORUM -------------->


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


<!----------------------------------------------->
<!-- BOUTONS DE MODERATION -------------->

<!-- BEGIN viewtopic_bottom -->
<form method="get" action="{S_FORM_MOD_ACTION}">
    <fieldset class="quickmod clear">
        <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>
  <br/><br/>
  <span class="right">{S_TOPIC_ADMIN}</span>
</form>
<!-- END viewtopic_bottom -->



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

<!-- Script image recadré -->
<!-- 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 -->


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

</script>
<!-- END switch_plus_menu -->
<script type="text/javascript">
    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>

            

[Jess Capa]

Hello

En ce qui concerne isoler 3 champs spécifiques du profil pour les placer derrière l'avatar, personnellement je suis parvenue à ce type résultat avec ce tutoriel de Pêpêche (sans utiliser la partie afficher/masquer si le but est bien de juste déplacer les infos derrière l'avatar), mais si ça ne convient pas je suis également tombée sur cette alternative de Milouze14 sur ce forum d'entraide (je n'ai pas testé mais ça semble bien fonctionner d'après l'auteur du sujet). A toi de voir le plus approprié et d'adapter les bonnes class à ces scripts, je pose ça là sans être une pro en la matière et je ne suis pas en phpbb3 donc pas sûre que je puisse davantage t'aider.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.