[Prosilver] Menu déroulant au survol du pseudo

[Léa]

Menu déroulant au survol du pseudo

Tout d' abord, je tiens à remercier Kewee pour son aide.
Voici donc un petit tutoriel afin de réaliser une liste déroulante au survol du pseudo de l' auteur d' un message.
En modifiant à votre guise la partie CSS, vous pouvez obtenir ceci



» Partie HTML

Ouvrir viewtopic_body.html
Puis rechercher et supprimer

Code : Tout sélectionner

          <!-- IF not S_IS_BOT -->
          <!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
             <dd>
                <ul class="profile-icons">
                   <!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
                </ul>
             </dd>
          <!-- ENDIF -->
          <!-- ENDIF -->

Ensuite , rechercher et supprimer

Code : Tout sélectionner

 <!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->

Rechercher

Code : Tout sélectionner

          <!-- IF not postrow.S_IGNORE_POST -->
             <dl class="postprofile" id="profile{postrow.POST_ID}">

Ajouter à la suite

Code : Tout sélectionner

                   <!-- IF not S_IS_BOT -->

             <dd>
                   <div id="profil">
                      <ul id="menuDeroulant">
                      <li><!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
                         <ul class="sousMenu">
                   <!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- ENDIF -->
                   <!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
                         </ul>

                      </li>
                      </ul>
                   </div>
                      </dd>
          <!-- ENDIF -->
          <br />

» Partie CSS

Ouvrir common.css et coller ceci à la suite

Code : Tout sélectionner

    /*Menu
    -------------------------------------------------- */
    #profil
    {
    position: absolute;
    z-index: 999;
    }
    #menuDeroulant
    {
    width: 160px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    top: 0;
    left: 0;
    }
    #menuDeroulant li
    {
    float: left;
    width: 160px;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu
    {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border: 0;
    }
    #menuDeroulant .sousMenu li
    {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: 159px;
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    }

    #menuDeroulant li a:link, #menuDeroulant li a:visited
    {
    display: block;
    height: 1%;
    margin: 0;
    padding: 4px 8px;
    text-decoration: none;
    text-align: center;
    }

    #menuDeroulant .sousMenu li a:link,
    #menuDeroulant .sousMenu li a:visited
    {
    display: block;
    margin: 0;
    border: 1px solid #000;
    text-decoration: none;
    color: #000;
    background-color: #fff;
    }
    #menuDeroulant .sousMenu li a:hover
    {
    color: #fff;
    background-color: #3399cc;
    }

    #menuDeroulant li:hover > .sousMenu { display: block; }

Enregistrez et transférez sur votre ftp et n' oubliez pas de rafraichir le thème et les templates