Profile Banner
+2
skouliki
Mljackru
6 posters
Page 1 of 1
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?
Last edited by Mljackru on 11/5/2022, 02:47; edited 2 times in total
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
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
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- Manager
-
Posts : 13376
Reputation : 1589
Language : English,Greek
Location : Greece
TonnyKamper likes this post
Re: Profile Banner
How to get the avatar to show correctly?
Last edited by Mljackru on 11/5/2022, 04:03; edited 1 time in total
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
Joost- Active Poster
-
Posts : 1248
Reputation : 175
Language : Dutch, English
Location : The Netherlands
Re: Profile Banner
i will tag @Pedxz for this since he is the admin of the Portuguese support
skouliki- Manager
-
Posts : 13376
Reputation : 1589
Language : English,Greek
Location : Greece
TonnyKamper and pedxz like this post
Re: Profile Banner
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
Is it something i can add to the CSS?
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
no there is probably a mistake in the javascript
skouliki- Manager
-
Posts : 13376
Reputation : 1589
Language : English,Greek
Location : Greece
Re: Profile Banner
anyone have any idea how to fix it?
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
Any update for this. i tried playing around in the code and nothing works
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
Re: Profile Banner
Are you using ModernBB? If yes, that tutorial does not include that version or AwesomeBB.


Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
-
Posts : 50773
Reputation : 3486
Language : English
Location : United States
Re: Profile Banner
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- Manager
-
Posts : 13376
Reputation : 1589
Language : English,Greek
Location : Greece
SLGray and TonnyKamper like this post
Re: Profile Banner
Ok. I will let you continue.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 ....


Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
-
Posts : 50773
Reputation : 3486
Language : English
Location : United States
Re: Profile Banner
Welcome
There is an error in javascript
You have corrected the error
Use the following javascript code in place of the previous one
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();
});
});
}
كونان2000- Forumember
-
Posts : 127
Reputation : 61
Language : Arabic
skouliki, SLGray, SarkZKalie, TonnyKamper, trajce and Mljackru like this post
Re: Profile Banner
Thank you that fixed it
Mljackru- New Member
- Posts : 9
Reputation : 1
Language : English
كونان2000 likes this post
Re: Profile Banner
Problem solved & topic archived.
|


Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
SLGray- Administrator
-
Posts : 50773
Reputation : 3486
Language : English
Location : United States

» Profile field, multiple words with different colors in the same profile filed
» Private Message, Profile buttons (and any other) in Profile / how to get rid of the boarder under the posts?
» Deleted personalized profile tweak still shows in profile edit page
» My rank images hang over the Profile line that divides the profile and post.
» Problem [profile] [window] - when i filling profile - disappear subtitles [hidden]
» Private Message, Profile buttons (and any other) in Profile / how to get rid of the boarder under the posts?
» Deleted personalized profile tweak still shows in profile edit page
» My rank images hang over the Profile line that divides the profile and post.
» Problem [profile] [window] - when i filling profile - disappear subtitles [hidden]
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum