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

[JavaScript] IPB Profile for Forumotion

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

Sun Jan 07, 2018 10:25 pm

Description:
Profile design similar to one used on IP.Board forums.

Version:
Punbb (Forumotion)

Preview:
Image

Installation steps:
Create a new javascript.
Placement: in all pages
name: ipb_all

Code: Select all

if(/\/?u(\d+)$/.test(location.pathname)) {
    jQuery(document).ready(function(){if(jQuery('#profile-advanced-right').length){
    var avataripb=jQuery('#profile-advanced-right .main-content.clearfix.center img:first-child').attr('src');
    var tabsipb=jQuery('#profile-advanced-layout #profile-advanced-left #tabs').html();var infoipbge=jQuery('#profile-advanced-left #profile-advanced-details .middleline').html();
    var listfriends=jQuery('.main-content.clearfix[style^="padding:0.3em;text-align:center;"]').html();
    var prfiletoadd=jQuery('#profile-advanced-right #profile-advanced-add').html();
    var usernameipb=jQuery('#profile-advanced-right .module.main:eq(0) .main-head .h3').text().split(' (conectado)').join('');var miregistro=jQuery('.middleline #field_id-4 dd div:eq(0)').html();
    var monedas=jQuery('.middleline #field_id-13 dd div:eq(0)').html();
    var reputipb=jQuery('.middleline #field_id-14 dd div:eq(0)').html();
    var mid=jQuery('#profile-advanced-layout #tabs li:eq(3) a').attr('href').match(/[0-9]+/);
    var onlineipb=jQuery('#profile-advanced-right .main-head:eq(0) .h3 em').text().replace(/[(]/gi,' ').replace(/[)]/gi,' ');
    jQuery('#profile-advanced-right').after('<div class="ipb-profile">
    <div class="nav-ipb-top"><span>Viewing Profile: &nbsp;<span id="useridhahs"> '+usernameipb+'</span></span></div>
    <div class="mod-left">
    <div class="profile-ava"><img id="ipd-avatar" src="'+avataripb +'" /> </div>
    <div class="ipb-tab-us">'+tabsipb+'</div></div>
    <div class="mod-center">
    <div class="sub-panel-top"><div class="usernam-ipb">'+usernameipb+'</div>
    <div class="register-date">Registered: &nbsp;  '+miregistro+'</div>
<div class="ofline-ipb">Copyright©& nbsp; PunBB.biz & nbsp;& & nbsp; 15-Tronos</div>
    <div class="lass-activiti"></div>
    <div class="rating-profile">
    <img src="http://i.imgur.com/jFLWgyz.png"/>
    <img src="http://i.imgur.com/jFLWgyz.png"/>
    <img src="http://i.imgur.com/jFLWgyz.png"/>
    <img src="http://i.imgur.com/jFLWgyz.png"/>
    <img src="http://i.imgur.com/jFLWgyz.png"/>
    </div><div class="profi-add-ipb">'+prfiletoadd+'
    <a id="men"href="/privmsg?mode=post&u='+mid+'">Send PM</a>
    <a id="search-i"href="/spa/'+usernameipb+'">Search Posts</a>
    </div>
    </div>
    <div class="main-info-ipb">
    <div class="co-ipb" id="profile">
    <div class="ipb-m-title">
    <h2 id="wallcomment">Profile Comments</h2>
    <h2 id="estadis">Profile Details</h2>
    <h2 id="estadisgene"><span>Statistic</span></h2>
    <h2 id="friends">Friends</h2>
    <h2 id="contacto">Contact</h2></div>
    <div class="mensajeprofile"></div>
    <div class="m-info-ipb"><div class="in-ipb">'+infoipbge+'
    <div class="contac-me-ipb"></div>
    </div>
    <div class="band-right">
    <div class="repu-ipb"><span id="cs">'+monedas+'</span><div id="sub">Points</div></div>
    <div class="coin-ipb"><span>'+reputipb+'</span><div iid="re-p"> Reputation</div></div>
    <div class="module-ipb-right">
    <h2>Friends</h2>
    <div class="main-ipb-f">'+listfriends+'</div>
    </div>
    </div>
    </div>
    <div class="estadis-ipb"></div>
    <div class="friends-ips"></div>
    <div class="contact-ips"></div></div>
    </div></div>
    </div>');
    }});
    $(document).ready(function(){if(jQuery('#profile-advanced-right').length){
    $('.estoyenline-i:contains("conectado") .ofline-ipb').attr('style','display:none;');
    $('.estoyenline-i:contains("conectado")').attr('style','padding:0px 5px;');
    var linkwall=jQuery('#tabs ul li a:eq(0)').attr('href');
    jQuery(".mensajeprofile").load(linkwall+' #profile-advanced-details .main-content');
    var linkestaipb=jQuery('#tabs ul li a:eq(2)').attr('href');
    jQuery(".estadis-ipb").load(linkestaipb+' #profile-advanced-details .main-content');
    jQuery(".lass-activiti").load(linkestaipb+' #profile-advanced-details .main-content.clearfix .stats-field.genmed ul li:contains("Última visita :")');
    var linkfriendipb=jQuery('#tabs ul li a:eq(3)').attr('href');
    jQuery(".friends-ips").load(linkfriendipb+' #profile-advanced-details .main-content');
    var linkcontaipb=jQuery('#tabs ul li a:eq(4)').attr('href');
    jQuery(".contact-ips").load(linkcontaipb+' #profile-advanced-details .main-content');
    }});
    $(document).ready(function(){if(jQuery('#profile-advanced-right').length){ // Script del Slider
        $(".mensajeprofile, .estadis-ipb, .friends-ips, .contact-ips") . hide();
        $('.m-info-ipb').addClass('activetab');
     $(".ipb-tab-us ul li:eq(0)").click(function(e){
            $('.ipb-tab-us li ,.co-ipb div').removeClass('activetab');
            $(this).addClass('activetab');
            $('.mensajeprofile').addClass('activetab').fadeToggle();
            $('.estadis-ipb, .m-info-ipb, .friends-ips, .contact-ips') . hide('');
            return false;
            e.preventDefault();
        });
     $(".ipb-tab-us ul li:eq(1)").click(function(e){
            $('.ipb-tab-us li ,.co-ipb div').removeClass('activetab');
            $(this).addClass('activetab');
            $('.m-info-ipb').addClass('activetab').fadeToggle();
            $('.mensajeprofile, .estadis-ipb, .friends-ips, .contact-ips') . hide('');
            return false;
            e.preventDefault();
        });
    $(".ipb-tab-us ul li:eq(2)").click(function(e){
            $('.ipb-tab-us li ,.co-ipb div').removeClass('activetab');
            $(this).addClass('activetab');
            $('.estadis-ipb').addClass('activetab').fadeToggle();
            $('.mensajeprofile, .m-info-ipb, .friends-ips, .contact-ips') . hide('');
            return false;
            e.preventDefault();
        });
    $(".ipb-tab-us ul li:eq(3)").click(function(e){
            $('.ipb-tab-us li ,.co-ipb div').removeClass('activetab');
            $(this).addClass('activetab');
            $('.friends-ips').addClass('activetab').fadeToggle();
            $('.mensajeprofile, .m-info-ipb, .estadis-ipb, .contact-ips') . hide('');
            return false;
            e.preventDefault();
        });
    $(".ipb-tab-us ul li:eq(4)").click(function(e){
            $('.ipb-tab-us li ,.co-ipb div').removeClass('activetab');
            $(this).addClass('activetab');
            $('.contact-ips').addClass('activetab').fadeToggle();
            $('.mensajeprofile, .m-info-ipb, .estadis-ipb, .friends-ips') . hide('');
            return false;
            e.preventDefault();
        });
    }});
    $(document).ready(function(){if(jQuery('#profile-advanced-right').length){
    $(".ipb-tab-us ul li:first-child > a").click(function(e){$('.co-ipb').attr('id', 'profilewall');});
    $(".ipb-tab-us ul li:first-child + li > a").click(function(e){$('.co-ipb').attr('id', 'profile');});
    $(".ipb-tab-us ul li:first-child + li +li > a").click(function(e){$('.co-ipb').attr('id', 'estadisticas');});
    $(".ipb-tab-us ul li:first-child + li +li +li > a").click(function(e){$('.co-ipb').attr('id', 'friends');});
    $(".ipb-tab-us ul li:first-child + li +li + li +li > a").click(function(e){$('.co-ipb').attr('id', 'contacto');
    });
    }});
    $(document).ready(function(){if(jQuery('#profile-advanced-right').length){jQuery('#profile-advanced-right').remove()};});
    $(document).ready(function(){if(jQuery('#profile-advanced-layout').length){jQuery('#profile-advanced-layout').remove()};});
    }

Now create a new javascript with
Placement: all pages
name: ipb_all_2

Code: Select all

if(/\/?u(\d+)wall$/.test(location.pathname)) {
    jQuery(document).ready(function(){if(jQuery('#profile-advanced-layout #tabs li a').length){
    var nevoskin=jQuery('#profile-advanced-layout #tabs li:eq(1) a').attr('href');
    window.location.href=nevoskin;
    }})};
    if(/\/?u(\d+)stats$/.test(location.pathname)) {
    jQuery(document).ready(function(){if(jQuery('#profile-advanced-layout #tabs li a').length){
    var nevoskin=jQuery('#profile-advanced-layout #tabs li:eq(1) a').attr('href');
    window.location.href=nevoskin;
    }})};
    if(/\/?u(\d+)friends$/.test(location.pathname)) {
    jQuery(document).ready(function(){if(jQuery('#profile-advanced-layout #tabs li a').length){
    var nevoskin=jQuery('#profile-advanced-layout #tabs li:eq(1) a').attr('href');
    window.location.href=nevoskin;
    }})};
    if(/\/?u(\d+)contact$/.test(location.pathname)) {
    jQuery(document).ready(function(){if(jQuery('#profile-advanced-layout #tabs li a').length){
    var nevoskin=jQuery('#profile-advanced-layout #tabs li:eq(1) a').attr('href');
    window.location.href=nevoskin;
    }})};
    $("meta[http-equiv='refresh'][content]:first").each(function(){window.location.href=$(this).attr("content").replace(/^.*;url=/,"")});
The last part is CSS, put the following code into your CSS:

Code: Select all

 /*ipbperfilcss*/
    .usernam-ipb ,.usernam-ipb span {
        color: #7A7A7A!important;  
        font-size: 20px!important;  
        font-weight: bold!important;  
        line-height: 1.7!important;
    }
    .usernam-ipb em {
        display: none!important;
    }
    .ipb-profile .mod-left {
        width: 150px;  
        margin-left: -150px;
        float: left;
    }
    .ipb-profile {
        background: #EBF0F3;
        padding: 9px;
        clear: both;
        padding-left: 188px;
        overflow: hidden;  
        color: #5A5A5A;      
        font-family: helvetica, arial, sans-serif!important;  
        font-size: 11px;
    }
    .mod-center {
    width: 98%;
    float: left;
    background: #FFF;
    border: 1px solid #E4E4E4;
    padding: 9px;
    position: relative;
    margin: auto;
    }
    .ipb-m-title h2 {
        padding: 8px 10px;  background: #F5F5F5;  color: #868686;  font-size: 11px; margin: 0;  
        font-weight: bold;
        font-family: helvetica!important;
    display:none;}
    .co-ipb {
    background: #FFF;
    margin-bottom: 10px;
    border: 1px solid #DDD;
    margin: 5px;
    min-height: 600px;
    }
    .ipb-profile dt, .ipb-profile dt span {
        color: #5A5A5A!important;
        font-weight: bold!important;
    }
    .m-info-ipb dt {
        display: inline-block;
        width: 200px;
        text-align: right;
        padding-right: 10px;
    }
    .m-info-ipb dd {
        display: inline-block;
        width: 350px;
    }
    .profi-add-ipb a.mainmenu + br + a.mainmenu ,.main-ipb-f .clear ,.m-info-ipb .separator {
        display: none;
    }
    .m-info-ipb dl {
        line-height: 1.3;  font-size: 11px;  background: #FEFEFE;  border: 1px solid #EEE;  padding: 8px;  border-left: 0;  border-right: 0;  margin-bottom: -1px;
    }
    .ipb-tab-us ul li a span {
        display: block;  padding: 10px 8px;  outline: 0;  font-size: 11px;  color: #8D8D8D;  -webkit-transition: background-color 0.1s ease-in-out;  -moz-transition: background-color 0.3s ease-in-out;
    }
    .ipb-tab-us ul li {
    background: #F6F8FB;
    color: #808080;
    border-bottom: 1px solid #DBE4EF;  font-size: 13px;
    }
    .ipb-tab-us ul li :hover {
    background: #EAEFF5;
    color: #808080;
    }
    .ipb-tab-us {
        width: 149px !important;  margin-top: 10px;  border-top: 1px solid #DBE4EF;
    border-left: 1px solid #DBE4EF;
    }
    .ipb-profile li ,.ipb-tab-us ul {
        list-style: none;
    }
    .ipb-tab-us ul li.activetab {
        background: white;
        width: 150px;
        position: relative;
    z-index: 9;}
    .profile-ava img {
        background: #FFF;  padding: 1px;  border: 1px solid #D3D3D3;  max-width: 138px;  max-height: 138px;
    }
    .estoyenline-i {
    background: #7BA60D;
    }
    .ofline-ipb {
    background: #B3B3B3;
    padding: 0 5px;}
    .estoyenline-i, .ofline-ipb{
    display: inline-block;
    height: 17px;
    line-height: 17px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFF;
    border-radius: 2px;
    vertical-align: middle;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.22);
    }
    .pun .co-ipb .main-content {
    background: #FFF;
    border: 0;
    }
    .co-ipb#friends ol li {
    padding: 8px 0 0 0;
    margin: 5px 0 0 0;
    min-width: 80px;
    height: 70px;
    list-style: none;
    width: 100px;
    display: inline-table;
    text-align: center;
    }
    .co-ipb#friends ol li .avatar {
    display: block;
    border: 0;
    background: 0;
    text-align: center;
    width: 100%;
    }
    #friends ol li .message-text ,.co-ipb#friends .message-footer li {
    display: none;
    }
    .co-ipb ol li .avatar img:hover {
    border-color: #7D7D7D;
    }
    .co-ipb ol li .avatar img {
    background: #FFF;
    padding: 1px;
    border: 1px solid #D3D3D3;
    height: 50px;
    width: 50px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);}
    #contacto h2#contacto ,#profilewall #wallcomment ,#friends h2#friends ,#estadisticas #estadisgene, .co-ipb #estadis {
    display: block;
    }
    #estadisticas h2#estadis ,#contacto h2#estadis ,.co-ipb#profilewall h2#estadis ,.co-ipb#friends h2#estadis {
    display: none;
    }
    #estadisticas .m-info-ipb ul li {
        line-height: 1.3;  font-size: 11px;  background: #FEFEFE;  border: 1px solid #EEE;  padding: 8px;  border-left: 0;  border-right: 0;  margin-bottom: -1px;
    }
    #estadisticas fieldset legend {
    font-size: 13px;
    font-weight: bold;
    width: 100%;
    font: bold 14px helvetica,arial,sans-serif;
    padding: 8px 10px;
    color: #204066;
    background: #D8DDE8;
    }
    .co-ipb#contacto .contact-ips ,#profilewall .main-content ,#estadisticas .main-content {
        background: #EBF0F3;
        padding: 9px;
    }
    #estadisticas .main-content .stats-field.genmed {
        overflow: hidden;
        margin-bottom: 24px;
        background: #FFF;  
    }
    #estadisticas .main-content .stats-field.genmed ul {
        padding: 9px;
        border: 1px solid #DBE4EF;
    }
    .co-ipb#contacto h2#contacto ,#wallcomment ,#estadisgene {
        background: #2C5687 url(http://i.imgur.com/Lcy9BkS.png) repeat-x top;  
        color: #FFF;  padding: 10px 10px 11px;            border-radius: 4px 4px 0 0;      
        box-shadow: inset 0px 1px 0 #528CBC;  border-width: 1px 1px 0 1px;  
        border-color: #316897;  
        border-style: solid;  font-size: 11px;
        text-shadow: none;
    }
    #profilewall ,#estadisticas {
        border-radius: 4px 4px 0 0;
        border: none;
    }
    .pun .co-ipb a {
        color: #225985;
    }
    .pun .co-ipb a:hover {
        color: #328586;
    }
    .co-ipb#friends ol li .avatar img:hover {
        border-color: #7D7D7D;
    }
    #estadisticas .m-info-ipb {
        border: 1px solid #DDD;
    }
    #estadisgene span {
        background: #244156;  opacity: 1;  
        color: #FFF;  padding: 4px 10px;  font-weight: bold;      border-radius: 10px;      box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.2);
    }£panda_selector_1515363745645_90_m_panda£{display:none;}
    .mensajeprofile ol li.clearfix {
        background: #FFF;  border: 1px solid #DBE4EF;
        padding: 9px;
        margin-bottom: 9px;
        position: relative;  
    }
    .mensajeprofile .avatar {
        border: 0;
        background: 0;
        display: inline;
        float: left;
    }
    .mensajeprofile ol li .message-block {
        overflow: hidden;
        margin-left: 65px;
        padding: 0;
    }
    .mensajeprofile ol li .message-block .message-header a {
        font-weight: bold;  font-size: 14px;
    }
    .mensajeprofile .message-date {
        position: absolute;
        bottom: 5px;
        color: #A4A4A4;  font-size: 12px;
        background: transparent url("http://i.imgur.com/8WDJvOf.png") no-repeat left;
        padding-left: 20px;
    }
    .mensajeprofile .message-text {
        margin: 5px 0;
        font-size: 14px;  word-wrap: break-word;
    }
    #profilewall .message-footer {
        float: right;
    }
    #profilewall .message-footer li {
        display: inline;
        margin-right: 10px;
    }
    .co-ipb .pagination b {
        background: #7BA60D;  color: #FFF;  font-weight: bold;      border-radius: 2px;  
        padding: 4px 5px;
    }
    .co-ipb .pagination a {
        display: inline-block;    color: #999;
        background: none;
        padding: 4px 5px;
    }
    .co-ipb .pagination a:hover {
        background: #ECECEC;      border-radius: 2px;
    }
    .co-ipb .pagination {
        background: white;
        border-radius: 5px 5px 0 0;
        padding: 4px 10px;
    }
    #friends .message-header em {
    display: block;
    }
    h2#friends {
    font: normal 14px helvetica,arial,sans-serif;
    padding: 8px 10px;
    background: #DBE2EC;
    color: #204066;
    }
    .co-ipb#contacto ,.co-ipb#friends {
    border: 0;
    }
    .contact-ips dl dt {
        display: inline-block;
        width: 140px;
        text-align: right;
    }
    .contact-ips dl dd {
        width: 600px;
        display: inline-block;
        padding-left: 10px;
        vertical-align: middle;
    }
    .lass-activiti {
    display: inline-block;
    margin-left: 10px;color: #C4C4C4;
    }
    .coin-ipb span {
        font-size: 20px;  font-weight: bold;  display: block;
    }
    .coin-ipb #sub {
        text-align: center;  font-weight: normal;
    }
    .coin-ipb {
        float: none;  margin: 0 0 5px 0;  
        padding: 10px;  text-align: center;  font-weight: normal;  display: block;
        background: #80B700;
        border-radius: 3px;
        color: white;font-size: 13px;
    }
    .repu-ipb {
        background: #DEDEDE;  color: #6E6E6E;    
        float: none;  margin: 0 0 5px 0;  padding: 10px;  text-align: center;  font-weight: normal;  display: block;      border-radius: 3px;  
        font-size: 13px;
    }
    .repu-ipb span {
        font-size: 20px;  font-weight: bold;  display: block;
    }
    .band-right {
        margin-left: 612px;
      top: -35px;
    position: relative;
    }
    .co-ipb#profile {
        border: 0;
    }
    .co-ipb#profile .in-ipb {
        width: 600px;
        border: 1px solid #EEE;
        float: left;
        border-top: 0;
    }
    h2#estadis {
        width: 580px;
        font: normal 14px helvetica, arial, sans-serif;  padding: 8px 10px;  
        background: #DBE2EC;  color: #204066;
        border: 1px solid #DBE2EC;
    }
    .module-ipb-right h2 {
        font: normal 14px helvetica, arial, sans-serif;  padding: 8px 10px;  background: #DBE2EC;  color: #204066;
    }
    .main-ipb-f {
        padding: 9px;
    }
    .main-ipb-f .clear + a.mainmenu {
        display: block;
        text-align: center;
    }
    .main-ipb-f .friend-block {
        display: inline-block;
        float: none;
    }
    .main-ipb-f .avatar img {
        padding: 1px;  border: 1px solid #D5D5D5;  background: #FFF;      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);  
    }
    .main-ipb-f .avatar {
        border: 0;
        background: none;
        width: auto;
    }
    .main-ipb-f div.clear + a.mainmenu[href^="/u"], non.main-ipb-f .friend_list_online_status img {
    display: none;
    }
    .profi-add-ipb a#search-i {
        background: #E6E6E6 url("http://i.imgur.com/tS9vehw.png") no-repeat 5px;
    }
    .rating-profile {
        margin: 10px 0 20px 0;
    }
    .register-date {
        margin-bottom: 10px;
        font: normal 13px helvetica,arial,sans-serif;
    }
    .profi-add-ipb {
    position: absolute;
    right: 30px;
    top: 95px;
    color: rgba(0, 0, 0, 0);
    }
    .profi-add-ipb br {
        display: none;
    }
    .pun .profi-add-ipb a {
        display: inline-block;
        background: #E6E6E6 url("http://i.imgur.com/5MlMsua.png") no-repeat 5px;
        height: 17px;
    line-height: 17px;
        padding: 2px 2px 2px 25px;        
        border: 1px solid rgb(207, 207, 207);      
        box-shadow: 0px 7px 21px rgba(255, 255, 255, 0.76) inset, 0px 1px 0px rgba(0, 0, 0, 0.41);      border-radius: 3px;  color: #616161;    white-space: nowrap;  -webkit-transition: all 0.2s ease-in-out;  -moz-transition: all 0.2s ease-in-out;
        margin-right: 15px;font-size: 12px;
    }
    .pun .profi-add-ipb a:hover {
        border: 1px solid #A0A0A0;
    }
    .pun .profi-add-ipb a#men {
    background: #E6E6E6 url("http://i.imgur.com/LE1LFBD.png") no-repeat 5px;
    }
    .pun .nav-ipb-top a {
        color: rgb(85, 85, 85);
    }
    .nav-ipb-top {
        position: relative;
        margin-left: -140px;
        margin-bottom: 10px;
    }
    .nav-ipb-top span {
    margin: 0 5px;
    }
    .mod-center {
    padding-bottom: 50px;
    }
    #word-link {
        position: absolute;
        bottom: 19px;
        right: 26px;
        z-index: 999!important;
        color: #777;
        font: normal 9px helvetica;
        text-align: right;
    }
    .co-ipb div.activetab {
    display: block!important;
    }
Closing Notes:

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest