Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Isolement champs derrière avatar au survol

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

Isolement champs derrière avatar au survol Empty Isolement champs derrière avatar au survol

Message par Lana Cleevest Ven 4 Juin 2021 - 13:11

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 Mr. Green

Merci infiniment pour la réponse I love you

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>

            
Lana Cleevest

Lana Cleevest
**

Messages : 63
Inscrit(e) le : 27/05/2020

Voir le profil de l'utilisateur https://shinetorust.forumactif.com/
Lana Cleevest a été remercié(e) par l'auteur de ce sujet.

Isolement champs derrière avatar au survol Empty Re: Isolement champs derrière avatar au survol

Message par Jess Capa Lun 7 Juin 2021 - 13:57

Hello Smile

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. Wink
Jess Capa

Jess Capa
**

Féminin
Messages : 55
Inscrit(e) le : 04/10/2017

Voir le profil de l'utilisateur https://magicneverdies.forumactif.com/
Jess Capa a été remercié(e) par l'auteur de ce sujet.

Isolement champs derrière avatar au survol Empty Re: Isolement champs derrière avatar au survol

Message par Chacha Jeu 10 Juin 2021 - 9:32

Isolement champs derrière avatar au survol UmaslZ4Bonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 65337
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Isolement champs derrière avatar au survol Empty Re: Isolement champs derrière avatar au survol

Message par Chacha Sam 12 Juin 2021 - 9:32

Isolement champs derrière avatar au survol 8djze9qBonjour,

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

Chacha
Modéractif
Modéractif

Masculin
Messages : 65337
Inscrit(e) le : 21/08/2010

Voir le profil de l'utilisateur https://forum.forumactif.com/
Chacha 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