Profile Popup

Go down

Tutorial Profile Popup

Post by Shadow on December 2nd 2013, 11:49 am

Profile Popup

This tutorial will help you achieve a popup for users profile details upon clicking their username, this is for any forum version.

Profile Popup Tuto10

Advanced Profile

For this to work the Advanced profile must be active on your board. If you use this tutorial without the advanced profile you may experience bugs.

Administration Panel > Users & Groups > Users > Profiles
Activate advanced profile: Yes

If it is already ticked, good. If not, tick yes and save.
Profile Popup Tuto11

Installing Profile Popup

To add this feature please go to..
Administration Panel > Modules > HTML & JAVASCRIPT > Javascript codes management > create a new script

Name: Profile Details Popup
Placement: In all the pages
Javascript code:
jQuery(function () {
jQuery('li.row a[href*="/u"], .img-whois+p a[href*="/u"], .page-bottom a[href*="/u"], .postprofile a[href*="/u"], 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"], 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(){'href'),'_self');});
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:#D1D1D1;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;box-shadow:0px 0px 2px rgba(0,0,0, 0.5) inset;z-index:50;"><div id="userprofile" style="max-height:400px;overflow-y:auto;"><center><span class="profileLoading" style="font-weight:bold;font-size:18px;">Loading...</span></center></div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> | <a href="/privmsg?mode=post&u='+UID.replace('/u', '')+'">Send PM</a> | <a href="/privmsg?mode=post_profile&u='+UID.replace('/u', '')+'">Send VM</a><span style="float:right;"><a href="/profile?friend='+UNM.replace(/ /, "+")+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> | <a href="/profile?foe='+UNM.replace(/ /, '+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></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();});
Profile Popup Captu181

When you're finished adding the script save. Now when you click a users username on your forum it should display their profile details.

Using the Profile Popup

To open the pop up simply click a username on your forum, after that you should be met with the clicked users profile details. To close the popup simply click the black overlay.

The profile popup comes with more than just showing a users details, it also allows you to interact with the clicked user. At the foot of the popup are links, these links allow you to:

View Profile
View the clicked users full profile

Send PM
Send a private message

Send VM
Leave a visitor message on the clicked users profile

Add Friend
Send the user a friend request

Add Foe
Ignore the user

Styling the Profile Popup

For those of you that like to edit the style of your stuff, I will explain a handful of the selectors and ID's you can use.

#profilefilter - This is used to style the black overlay that you see upon clicking

#profcont-container - This is the background container for the profile details, this can be used to change the background color of the popup. To override the inline style add !important to your property.

background:red !important;
#userprofile - This is the inner container used to load the profile details, it can be edited if needed

.profileLoading - This can be used to style the loading texts

#profileLinks - This can be used to style the profile links footer

#interactionLinks - This is used to manipulate how the interaction links(PM,VM, Friends and foes) are seen. They do not display for guests

#profilePopup - The ID added to usernames to activate the profile, and grab the necessary data for the popup to work

Note: If some of your CSS properties do not take effect, add !important to override the inline styles.


Male Posts : 16204
Reputation : 1811
Language : French, English

Back to top Go down

Tutorial Re: Profile Popup

Post by Ange Tuteur on July 29th 2014, 7:46 am

Profile Popup Update

Hello, it has been awhile, but I'm happy to announce an update to the popup profile. The update features some customizations, as well as fixes. You can view the example below to get an Idea of what to expect.

Profile Popup Captur17

You will now be able to navigate the user profile by clicking the tabs. This will work on any forum version.


Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following codes.
/* Profile popup */
#profcont-container {
    background:#EEE !important;
    border:1px solid #CCC !important;

#userAVA img{

.profile_popup_nav {
    margin:-4px -4px 10px -4px;
    padding-top:10px !important;
    border-bottom:1px solid #CCC;
    -webkit-border-radius:5px 5px 0px 0px;
    -moz-border-radius:5px 5px 0px 0px;
    border-radius:5px 5px 0px 0px;

.propop_tab {
    text-shadow:1px 1px 0 #F5F5F5;
    -webkit-border-radius:4px 4px 0px 0px;
      -moz-border-radius:4px 4px 0px 0px;
            border-radius:4px 4px 0px 0px;
    border:1px solid #CCC;
    -webkit-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
      -moz-box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
            box-shadow:0px 10px 6px rgba(255,255,255, 0.5) inset;
    margin:0 2px;

.propop_tab:hover {

.propop_tab.activeTab {
    text-shadow:none !important;
    background-color:#EEE !important;

#profileLinks {
    margin:10px -4px -4px -4px;
    border-top:1px solid #CCC;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
    border-radius:0px 0px 5px 5px;
(This is the style of the popup you can make modifications as you wish)

The JavaScript

Go to Administration Panel > Modules > JavaScript Codes Management and create a new script. (If you have the old popup installed, edit it, and replace the contents)

Title : Profile Popup
Placement : In all the pages
Paste the code below :
$(function () {
  if (/\/u\d+/.test(location.pathname)) return;
  var wall = 1, // visitor messages tab
  stats = 1, // statistics tab
  attachments = 0, // attachments tab
  friends = 1, // friends tab
  contact = 1, // contact tab
  rpg = 0, // RPG tab
  close = 1, // close popup button
  avatar = 1; // display user avatar
  var a=document.getElementsByTagName('A');
  for(i=0;i<a.length;i++)if(/\/u\d+/.test(a[i].href))a[i].className=a[i].className+' profilePopup';
  var userWall='',userStats='',userAttachments='',userFriends='',userContact='',userRpg='',userClose='',guestView=true;
  if(wall==1)userWall='<span class="propop_tab" id="propop_vm">Visitor messages</span>';if(stats==1)userStats='<span class="propop_tab" id="propop_stats">Statistics</span>';if(attachments==1)userAttachments='<span class="propop_tab" id="propop_attach">Attachments</span>';if(friends==1)userFriends='<span class="propop_tab" id="propop_friends">Friends</span>';if(contact==1)userContact='<span class="propop_tab" id="propop_contact">Contact</span>';if(rpg==1)userRpg='<span class="propop_tab" id="propop_rpg">Character sheet</span>';if(close==1)userClose='<span class="propop_tab" id="close_popup" style="float:right;margin-top:-4px;">Close</span>';
    var UID=$(this).attr('href'),UNM=$(this).text(),SEL='#cp-main .panel, .forumline:has(#profile-advanced-details), .clear + #profile-advanced-details',LOAD='<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Loading...</div>';
    $('body').append('<div id="profilefilter" style="position:fixed;top:0px;left:0px;right:0px;bottom:0px;background:url(;cursor:pointer;z-index:10;"></div><div id="profcont-container" style="background:#EEE;border:1px solid #CCC;top:20%;left:15%;right:15%;padding:4px;position:fixed;font-size:12px;border-radius:5px;z-index:50;"><div class="profile_popup_nav">'+userWall+'<span class="propop_tab" id="propop_profile">Profile</span>'+userStats+userAttachments+userFriends+userContact+userRpg+userClose+'</div><a href="'+UID+'"><div id="userAVA"></div></a><div id="userprofile" style="height:400px;overflow-y:auto;">'+LOAD+'</div><span id="profileLinks"><a href="'+UID+'">View Profile</a><span id="interactionLinks"> • <a href="/privmsg?mode=post&u='+UID.replace(/.*?\/u/,'')+'">Send PM</a><span id="vmLink"> • <a href="/privmsg?mode=post_profile&u='+UID.replace(/.*?\/u/,'')+'">Send VM</a></span><span style="float:right;"><a href="/profile?friend='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Friend</a> • <a href="/profile?foe='+UNM.replace(/\s+/g,'+')+'&mode=editprofile&page_profil=friendsfoes">Add Foe</a></span></span></div>');

    $('#userprofile').load(UID+SEL,function(){if($('#profcont-container #username').length&&_userdata.user_id==-1){$(this).html('<div class="profileLoading" style="text-align:center;font-weight:bold;font-size:18px;">Sorry, guests cannot view the profiles! :(</div>');guestView=false}});
    if (avatar == 1) $('#userAVA').load(UID+' #profile-advanced-right .module:first div img:first, .forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img:first, dl.left-box.details:first dd img:first, .row1 b .gen:first img:first, .real_avatar img:first');
    $('#profilefilter,#close_popup').click(function(){$('#profilefilter, #profcont-container').remove()});
    function loadPro(element, location){$(element).click(function(){if($(this).hasClass('activeTab')||guestView==false)return;$('#propop_profile,#propop_vm,#propop_stats,#propop_friends,#propop_contact,#propop_rpg,#propop_attach,#propop_close').removeClass('activeTab');$(this).addClass('activeTab');$('#userprofile').html(LOAD).load(UID+location+SEL)})}
    return false;


At the top of the script there are some variables which you can modify :
  var wall = 1, // visitor messages tab
  stats = 1, // statistics tab
  attachments = 0, // attachments tab
  friends = 1, // friends tab
  contact = 1, // contact tab
  rpg = 0, // RPG tab
  close = 1, // close popup button
  avatar = 1; // display user avatar

These allow you to enable / disable tabs and extra features, like the avatar. To enable set the value to 1, to disable set the value to 0, so :

1 = ON
0 = OFF

Just save your settings and you should now have an updated popup for your Users Profiles ! Very Happy

Ange Tuteur
Ange Tuteur

Male Posts : 13222
Reputation : 2959
Language : EN, JA, FR
Location : Macungie, PA

Back to top Go down

Back to top

Permissions in this forum:
You cannot reply to topics in this forum