Visualizzare il profilo come un tooltip (hover)


Visualizzare il profilo come un tooltip (hover)

Messaggio Da Ospite il Ven 20 Gen 2012 - 11:23

Visualizzare il profilo come un tooltip (hover)


Ciao,

se avete tanti campi profilo per ogni utente potrebbe capitare che vada fuori dagli schemi e che stia male con il resto del forum.
Ecco come risolvere il problema: creando un tooltip che visualizza i campi-profilo solo quando ci si passa sopra.

COME SI INSTALLA?
1. Andate su PDA> -> Visualizzazione -> Templates -> trovate questo codice:



Codice:
{postrow.displayed.POSTER_RANK}

            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}


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

        <img src="./Visualizzare il profilo come un tooltip (hover)_files/empty.gif" alt="" style="width:150px;height:1px" class="">

e sostituitelo con questo:
Codice:

 <!-- INÍCIO DAS MUDANÇAS DO PERFIL POR HARICOOW -->

<div class="infobulle_avatar">{postrow.displayed.POSTER_AVATAR}

<em>

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

</em></div>

<!-- FIM DAS MUDANÇAS DO PERFIL POR HARICOOW -->


Poi andate su PDA > Visualizzazione > Immagini e colori > Foglio CSS ed aggiungete questo codice CSS:
Codice:
div.infobulle_avatar em {
display:none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
position: relative;
text-decoration:none;
border: 0;
}

div.infobulle_avatar:hover em {
font-style: normal;
font-size: 10px;
color:#000 !important;
padding: 3px;
display: block;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px ;
background-color: #FFF;
border: 1px solid #000;
width:150px;
top: 100px;
left: 100px;
}<


Ed ecco fatto :bene:
Se avete dei dubbi non esitate a contattarmi nella sezione "Problemi con lo script"

Copyright © FORUMATTIVO.COM
Guida pubblicata da
Niko










Ospite
Ospite


Ospite è stato ringraziato dall'autore di questo topic.

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum