Ajuste da capa no perfil

por Sousaph29 28.09.24 17:48

Detalhes da questão

Endereço do fórum: https://brasilexperiencelife.forumeiros.com/
Versão do fórum: ModernBB

Descrição

Meu fórum se encontra assim:

Gostaria de ajustar a capa para que apareça a opção de amigos e Rank no perfil, assim:

creio que tens algum código para colocar em css para ajustar isso

@Sleep eu vi que você ajudou em tópicos antigos sobre o ajuste de capa ^^

Meu código javascript da capa

Código:: // FOTO DE CAPA if (window.location.pathname.indexOf('/u') == 0) { $(document).ready(function() { // Link Imagem Capa var fbcapa = $('#field_id7 .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 $('div.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(); }); }); }

E se puder atualize o código para modernbb !!

por Sousaph29 03.10.24 1:19

UPPPPPPPPPPPPPPPPPPPP

por **tikky** 03.10.24 1:19

Olá @Sousaph29,

Altere o código para

Código:: // FOTO DE CAPA if (window.location.pathname.indexOf('/u') == 0) { $(document).ready(function() { // Link Imagem Capa var fbcapa = $('#field_id7 .field_uneditable').text(); // Local onde coloca a ID do campo // Estrutura geral $('#profile-advanced-layout').before('<style>#profile-advanced-left { width: max-content !important; }#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;} #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 $('div.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(); }); }); }

Atenciosamente,
tikky.

por Sousaph29 03.10.24 1:21

está quase lá, caso queira a imagem de capa poderia encostar nas bordas e completar o espaçamento também! Ajuste da capa no perfil 1f601

por **tikky** 03.10.24 1:46

Pode alterar o código (para o de cima) para poder ver o que é necessário corrigir? Obrigado

por Sousaph29 03.10.24 1:49

pronto ativado

por **tikky** 03.10.24 1:57

Altere para

Código:: // FOTO DE CAPA if (window.location.pathname.indexOf('/u') == 0) { $(document).ready(function() { // Link Imagem Capa var fbcapa = $('#field_id7 .field_uneditable').text(); // Local onde coloca a ID do campo // Estrutura geral $('#profile-advanced-layout').before('<style>#profile-advanced-left { width: 77%!important; }#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;} #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 $('div.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(); }); }); }

por Sousaph29 03.10.24 2:16

mt grato por ter sua ajuda, gostaria que a capa ocupasse esse espaço todo, e o rank está la em baixo, gostaria que ficasse do lado

e poderia ficar assim dessa maneira para facilitar

@tikky

por **tikky** 07.11.24 15:20

Tópico resolvido

Tópico arquivado por inatividade por parte do autor, marcado como resolvido por ter solução apropriada à questão.

Ajuste da capa no perfil