The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Profile Banner

+2
skouliki
Mljackru
6 posters

Go down

Solved Profile Banner

Post by Mljackru May 8th 2022, 7:07 am

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?



Last edited by Mljackru on May 11th 2022, 1:47 am; edited 2 times in total
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by skouliki May 8th 2022, 8:03 am

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();
            });
        });
    }

skouliki
skouliki
Manager
Manager

Female Posts : 12589
Reputation : 1536
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 8th 2022, 9:12 am

How to get the avatar to show correctly?



Last edited by Mljackru on May 11th 2022, 3:03 am; edited 1 time in total
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by Joost May 8th 2022, 1:36 pm

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. Smile

Profile Banner Knipse26
Joost
Joost
Active Poster

Male Posts : 1207
Reputation : 164
Language : Dutch, English
Location : The Netherlands

View user profile https://ondersteun.actieforum.com/

Back to top Go down

Solved Re: Profile Banner

Post by skouliki May 8th 2022, 5:52 pm

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

Female Posts : 12589
Reputation : 1536
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

TonnyKamper and pedxz like this post

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 8th 2022, 9:19 pm

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. Smile

Profile Banner Knipse26

tried that still didn't work
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 9th 2022, 5:41 pm

Is it something i can add to the CSS?
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by skouliki May 9th 2022, 5:59 pm

no there is probably a mistake in the javascript
skouliki
skouliki
Manager
Manager

Female Posts : 12589
Reputation : 1536
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 9th 2022, 6:34 pm

anyone have any idea how to fix it?
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 10th 2022, 5:23 am

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

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by SLGray May 10th 2022, 5:44 am

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


Profile Banner Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50335
Reputation : 3473
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Profile Banner

Post by skouliki May 10th 2022, 7:35 am

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
skouliki
Manager
Manager

Female Posts : 12589
Reputation : 1536
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

SLGray and TonnyKamper like this post

Back to top Go down

Solved Re: Profile Banner

Post by SLGray May 10th 2022, 8:24 pm

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.


Profile Banner Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50335
Reputation : 3473
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Solved Re: Profile Banner

Post by SarkZKalie May 10th 2022, 9:46 pm

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


Profile Banner Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1348
Reputation : 215
Language : English

View user profile https://rotavn.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 11th 2022, 12:42 am

ok
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

Back to top Go down

Solved Re: Profile Banner

Post by كونان2000 May 11th 2022, 1:12 am

Welcome
There is an error in javascript mwii

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();
            });
        });
    }
كونان2000
كونان2000
Forumember

Other / Decline to state Posts : 59
Reputation : 38
Language : arabic

View user profile https://i.servimg.com/u/f30/20/35/61/89/din12.jpg

skouliki, SLGray, SarkZKalie, TonnyKamper, trajce and Mljackru like this post

Back to top Go down

Solved Re: Profile Banner

Post by Mljackru May 11th 2022, 1:47 am

Thank you that fixed it
Mljackru
Mljackru
New Member

Posts : 9
Reputation : 1
Language : English

View user profile https://hustleprowrestling.forumotion.com/

كونان2000 likes this post

Back to top Go down

Solved Re: Profile Banner

Post by SLGray May 11th 2022, 6:04 am

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


Profile Banner Slgray10

When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray
SLGray
Administrator
Administrator

Male Posts : 50335
Reputation : 3473
Language : English
Location : United States

View user profile https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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