Detaliile unui profil intr-un pop-up

Vezi subiectul anterior Vezi subiectul urmator In jos

Tutorial Detaliile unui profil intr-un pop-up

Mesaj Scris de Zeus la data de Vin 7 Mar - 20:13

Detaliile unui profil intr-un pop-up
Salutare tuturor,

In acest tutorial am sa va arat cum puteti obtine un pop-up spre detaliile utilizatorilor atunci cand faceti click pe nume. Acest tutorial se aplica pentru toate versiunile, deci haideti sa incepem.

Demonstratie:


1. Activarea profilului avansat
Pentru ca acest script sa functioneze trebuie ca profilul avansat sa fie activat pe forumul dvs. Daca utilizati acest tutorial fara profilul avansat, s-ar putea sa apara cateva buguri.

Activarea profilului avansat se face intrand in:
Panoul de Administrare~> Utilizatori & Grupuri ~> Utilizatori ~> Profiluri ~> Optiuni generale
Activare profil avansat: Da

In cazul in care este deja bifata, omiteti acest pas. Daca nu, bifati si apasati pe inregistrare.


2. Instalarea scriptului

Adaugati urmatorul cod in:
P.A ~> Module ~> HTML & JAVASCRIPT ~> Gestiunea codurilor javascript ~> Creati un nou javascript
Nume: Profil
Amplasare: Toate paginile
Codul Javascript:
Cod:
jQuery(function () {
    jQuery('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], p.author a[href*="/u"], form:has(.vf_jumpbox)~a[href*="/u"], .tcr a[href*="/u"], #stats a[href*="/u"], #onlinelist a[href*="/u"], .tcl.tdtopics a[href*="/u"], .pun .user a[href*="/u"], .ipbtable .row1 a[href*="/u"], #fo_stat a[href*="/u"], .activeusers-box a[href*="/u"], td.row3.over a[href*="/u"], .forumline:has(#i_whosonline) a[href*="/u"], span.name a[href*="/u"], span.postdetails a[href*="/u"], #info_open a[href*="/u"]').attr('id', 'profilePopup').click(function(){return false});
    jQuery('a[href*="/u"]:has(img)').removeAttr('id').click( function(){window.open(jQuery(this).attr('href'),'_self');});
    jQuery('a#profilePopup').click(function(){
    var UID = jQuery(this).attr('href');
    var UNM = jQuery(this).text();
    jQuery('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:rgba(0,0,0, 0.5);cursor:pointer;z-index:10;"></div>
<div id="profcont-container" style="background:#ffffff;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;">
 <div id="userprofile" style="max-height:400px;overflow-y:auto;">
 <center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Se incarca...<br/><br/></span>
 </center>
 </div><br/><style type="text/css">#profileLinks a{background: #f1f1f1;padding: 5px;border: 1px solid #d7d7d7;text-decoration: none;color: #222;  margin-left: 4px;font-weight: bold;font-size: 11px;box-shadow:inset 1px 1px 1px white, 1px 1px 1px #d7d7d7;}</style><span id="profileLinks"><a href="'+UID+'">Vizualizare profil</a><span id="interactionLinks">  <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Trimite un mesaj privat</a>  <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Posteaza in profilul utilizatorului</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Adauga ca prieten</a></span><br/><br/></span></div>');
    jQuery('#userprofile').load(UID + '#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details');
    if (!document.getElementById('logout')){jQuery('#interactionLinks').remove();}
    jQuery('#profilefilter').click(function () {jQuery('#profilefilter, #profcont-container').remove();});
    });
});

Pentru cei care doresc sa editeze aspectul popup-ului, voi expica in detaliu ce clase va trebui sa utilizati.

#profilefilter - Schimbarea culorii de fundal
Cod:
#profilefilter {
background: #culoare !important;
}

.profileLoading - Schimbarea stilului pentru textul "Se incarca..."
Cod:
.profileLoading {
background: #culoare !important;
font-size: 16px !important;
}

#profileLinks a - Schimbarea culorii link-urilor din subsol
Cod:
#profileLinks a{
color: #culoare !important
}

Inlocuiti #culoare cu culoarea dorita.

Si asta a fost tot!  Noroc
Tutorial scris de Ange Tuteur, tradus si personalizat de Zeus

Copyright ˆ Forumgratuit.ro Nici o parte a acestui tutorial nu poate fi reprodusa, transmisa sau stocata in orice forma fara acordul scris al detinatorului dreptului de autor, in conformitate cu articolul L122-1 apartinand ICC.

Zeus
Administrator
Administrator

masculin

Mesaje : 3971
Localizare : Bucuresti, Romania
Data de inscriere : 19/02/2012
Multumiri : 611
Niciun avertisment

http://help.forumgratuit.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus

- Subiecte similare

Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum