Profile Banner

Im using ModernBB and I was looking for s script that could possibly let users on my forum have a banner/header pic at the top of they profile?

Hello

There is a tutorial written in the Portuguese support https://ajuda.forumeiros.com/t96192-tutorial-perfil-com-foto-de-capa-como-no-facebook
You can translate the page with right mouse click
Follow the procedure and for your version Modernbb add this code

Code:



  // FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function() {
            // Link Imagem Capa
            var fbcapa = $('#field_id-6 .field_uneditable').text(); // Local onde coloca a ID do campo
            // Estrutura geral
            $('#profile-advanced-layout').before('<style>#profile-advanced-layout { width: 100% !important; }#profile-advanced-layout #new-message { margin-left: -91px !important; }</style><div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr><tr><td id="fbgrupo"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -33px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }</style>');
            // Avatar
            $('.mod-login-avatar img[alt="avatar"]').clone().appendTo($('#fbavatar'));
            // Nome
            $('#profile-advanced-right div.module:first .h3:first').clone().appendTo($('#fbnome'));
            // Rank
            $('profile-advanced-right .mod-login-rank').clone().appendTo($('#fbrank'));
            // Grupo
            $('div#main-content div.module:first div.inner img:last').clone().appendTo($('#fbgrupo'));
            // Prevenir avatares duplos para usuários sem imagem de rank
            $(function() {
                var fbavatarduplo = [],
                    imagemdupla;
                $("#fbfundo img").filter(function() {
                    imagemdupla = $(this).attr("src");
                    if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                        fbavatarduplo.push(imagemdupla);
                        return false;
                    }
                    return true;
                }).remove();
            });
            // Ícone online automático
            $("table#fbperfil tbody tr td#fbnome div.h3").html(function(_, html) {
                return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='http://i.imgur.com/QglVEGE.png' />")
            });
            // Tabs sem refresh para evitar erros na foto de capa
            $(function() {
                var tabfbperfil = function() {
                    $('#profile-advanced-layout #tabs li').click(function(e) {
                        e.preventDefault();
                        $('#profile-advanced-layout').after('<style>#profile-advanced-layout #tabs ul { margin-top: -50px !important; }</style>');
                        var url = this.firstChild.href;
                        if (url == '#') return;
                        $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                    });
                };
                tabfbperfil();
            });
        });
    }



How to get the avatar to show correctly?

Mljackru wrote:How to get the avatar to show correctly?

https://www.hustlepronetwork.com/u1

I see that you use the url where you have found this image. Can you try to upload it with Serving or upload it in your profile.

i will tag @Pedxz for this since he is the admin of the Portuguese support

Joost wrote:

Mljackru wrote:How to get the avatar to show correctly?

https://www.hustlepronetwork.com/u1

I see that you use the url where you have found this image. Can you try to upload it with Serving or upload it in your profile.

tried that still didn't work

Is it something i can add to the CSS?

no there is probably a mistake in the javascript

anyone have any idea how to fix it?

Any update for this. i tried playing around in the code and nothing works

Are you using ModernBB?   If yes, that tutorial does not include that version or AwesomeBB.

SLGray wrote:Are you using ModernBB?   If yes, that tutorial does not include that version or AwesomeBB.

i gave him the code for the ModernBB version , it is working, but the avatar is not displaying ....

skouliki wrote:

SLGray wrote:Are you using ModernBB?   If yes, that tutorial does not include that version or AwesomeBB.

i gave him the code for the ModernBB version , it is working, but the avatar is not displaying ....

Ok.  I will let you continue.

@Mljackru could you please provide us a test account here ?

ok

Welcome
There is an error in javascript

You have corrected the error

Use the following javascript code in place of the previous one

Code:

// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function() {
            // Link Imagem Capa
            var fbcapa = $('#field_id-6 .field_uneditable').text(); // Local onde coloca a ID do campo
            // Estrutura geral
            $('#profile-advanced-layout').before('<style>#profile-advanced-layout { width: 100% !important; }#profile-advanced-layout #new-message { margin-left: -91px !important; }</style><div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" id="fbfundo"><div style="position: absolute; left: 0; width: 100%; bottom: 0;"><table id="fbperfil"><tr><td rowspan="3" id="fbavatar"></td><td style="font-size: 16px;" id="fbnome"></td></tr><tr><td style="font-size: 1.4em;" id="fbrank"></td></tr><tr><td id="fbgrupo"></td></tr></table></div></div><style>table#fbperfil tbody tr td#fbnome div.h3 {text-transform: none !important;} h1.page-title{font-size:0px!important;height:30px!important;} #main-content p:nth-child(2) {display:none!important;} #profile-advanced-right .module {display:none!important;} #profile-advanced-left {width:100%!important;} #fbperfil { margin-bottom: -0px; margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; } #fbavatar img { height: 160px; width: 160px; } #fbnome { padding: 28% 0px 0px 10px; } #fbrank, #fbgrupo { padding: 0px 0 0 10px; } #profile-advanced-layout #tabs { bottom: 0; padding-left: 280px; margin-top: 0px !important; }</style>');
            // Avatar
            $('.mod-login-avatar img').clone().appendTo($('#fbavatar'));
            // Nome
            $('#profile-advanced-right div.module:first .h3:first').clone().appendTo($('#fbnome'));
            // Rank
            $('profile-advanced-right .mod-login-rank').clone().appendTo($('#fbrank'));
            // Grupo
            $('div#main-content div.module:first div.inner img:last').clone().appendTo($('#fbgrupo'));
            // Prevenir avatares duplos para usuários sem imagem de rank
            $(function() {
                var fbavatarduplo = [],
                    imagemdupla;
                $("#fbfundo img").filter(function() {
                    imagemdupla = $(this).attr("src");
                    if ($.inArray(imagemdupla, fbavatarduplo) < 0) {
                        fbavatarduplo.push(imagemdupla);
                        return false;
                    }
                    return true;
                }).remove();
            });
            // Ícone online automático
            $("table#fbperfil tbody tr td#fbnome div.h3").html(function(_, html) {
                return html.replace("(conectado)", "<img alt='Conectado' title='Conectado' src='https://i.imgur.com/QglVEGE.png' />")
            });
            // Tabs sem refresh para evitar erros na foto de capa
            $(function() {
                var tabfbperfil = function() {
                    $('#profile-advanced-layout #tabs li').click(function(e) {
                        e.preventDefault();
                        $('#profile-advanced-layout').after('<style>#profile-advanced-layout #tabs ul { margin-top: -50px !important; }</style>');
                        var url = this.firstChild.href;
                        if (url == '#') return;
                        $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                    });
                };
                tabfbperfil();
            });
        });
    }

Thank you that fixed it