Profile Popup
Profile Popup
Profile Popup |
This tutorial will help you achieve a popup for users profile details upon clicking their username, this is for any forum version. Example: ![]() 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. ![]() 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:
![]() 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. Example:
.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. |
This tutorial was written by Ange Tuteur. |
Re: Profile Popup
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. ![]() You will now be able to navigate the user profile by clicking the tabs. This will work on any forum version. The CSS Go to Administration Panel > Display > Colors > CSS stylesheet and paste the following codes.
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 :
Modifications At the top of the script there are some variables which you can modify :
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 ! ![]() |
This tutorial was written by Ange Tuteur. |
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum