• Administrator
  •  
    Welcome to the new PunBB.biz design forum.

    We decide to switch from Forumotion due to technical limitations.

    Information: Choosing social login option will register your account automatically without need for email confirmation.
     

[JavaScript] Invision Power Profile

A place for codes and tutorials which will improve the functionality of your board.
Post Reply
User avatar
Shadow
Administrator
Posts: 19
Joined: Sat Jan 06, 2018 4:56 pm

Sun Jan 07, 2018 1:44 am

Description:
"I'm going to share this tutorial, since I saw few forums has leaked this script of mine without copyrights

Invision power user panel converted for forumotion forums, mainly created for 15-tronos v3. "

Version:
Punbb (Forumotion)

Preview:
Image

Installation steps:
At the end of overall_header put the following code:

Code: Select all

  <div id="perfil" style="display: none;">
            <div id="user_link_menucontent" class="ipsHeaderMenu clearfix boxShadow" style="position: absolute; left: 56%; top: 12.5%; padding: 25px; background: rgba(238, 238, 238, 100); border-radius: 0px 0px 10px 10px; z-index: 9999; border: 1px solid #343434; color: rgb(34, 34, 34); display: block;">
                <a href="#" title="Your Profile" class="ipsUserPhotoLink left">
                    <div id="avatar"></div>
                </a>
                <div class="left">
                    <ul id="links">
                        <li id="user_name" style="width: 100%;font-weight: bold;padding-bottom: 5px;">{USERNAME}</li>
                        <li id="user_profile"><a href="/profile?mode=editprofile" title="">Edit Profile</a>
                        </li>
                        <li id="user_ucp"><a href="/profile?mode=editprofile&page_profil=preferences" title="">My Settings</a>
                        </li>
                        <li id="user_content"><a href="/spa/{USERNAME}" title="">My Posts</a>
                        </li>
                        <li id="user_content"><a href="/st/{USERNAME}" title="">My Topics</a>
                        </li>
                        <li id="user_content"><a href="/search?search_id=watchsearch" title="">Content to Follow</a>
                        </li>
                        <li id="user_pm"><a href="/profile?mode=editprofile&page_profil=friendsfoes">My Friends/Foes</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <script>
            jQuery(document).ready(function () {
                jQuery.get('/profile?mode=editprofile&page_profil=avatars', function (data) {
                   link = jQuery('.frm dl dd img', data).attr('src');
                    if (link) {
                        jQuery('#avatar').html('<a href="/profile?mode=editprofile&page_profil=avatars"><img src="' + link + '" alt="" /></a>');
                    } else {
                        jQuery('#avatar').html('');
                    }
                });
            });
        </script>
        <style>
            #avatar img {
                height: 50px;
                width: 50px;
                padding: 1px;
                border: 1px solid #d5d5d5;
                background: #fff;
                -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
                -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
            }
            #avatar img:hover {
                border-color: #a1a1a1;
                -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
                -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
                box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
            }
            #user_link_menucontent>div {
                margin-left: 15px;
                width: 265px;
                text-align: left;
                top: 50px;
            }
            #user_link_menucontent #links li {
                width: 50%;
                float: left;
                margin: 3px 0;
                text-shadow: 0px 1px 0 rgba(255, 255, 255, 1);
                white-space: nowrap;
        list-style: none !important;
            }
        </style>
Create a new javascript and put placement in all pages:

Code: Select all

jQuery(document).ready(function(){
  jQuery.get('/profile?mode=editprofile&page_profil=avatars', function(data) {
      link = jQuery('.frm dl dd img', data).attr('src');
      if(link){
                            jQuery('#avatar').html('<center><a id="user_links" href="/profile?mode=editprofile&page_profil=avatars"><img src="'+link+'" alt="" class="user_photo" /></a></center>');
      }else{
        jQuery('#avatar').html('');
      }
  });
});
How to import it?
Well, you'll need to have a custom menu or header bar where you can put code like this:

Code: Select all

<a href="/profile?mode=editprofile&page_profil=preferences" onclick="jQuery('#perfil').fadeToggle(); return false;"> Profile</a>
Closing Notes:

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest