Posicionar os campos do perfil sobre a capa

Detalhes da questão

Endereço do fórum: http://pokemonillium.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá, estou a tentar editar o perfil dos usuários em meu fórum de modo que necessito alterar o posicionamento de alguns campos do perfil, no entanto percebi que ao movê-los gerou lacunas entre os campos ao redor então gostaria de saber como ajustar isso.

Além disso, observei que não houve simultaneidade durante a aplicação do efeito do CSS, de modo que o titulo do campo e o campo em si não alteram-se em conjunto, além de haver um espaçamento indesejado entre os mesmos.

Segue abaixo a imagem que demonstra meu problema: https://images2.imgbox.com/e2/ee/a5zpAowj_o.png

Para melhorar vossa compreensão do que eu gostaria, estarei disponibilizando uma imagem de exemplo: https://images2.imgbox.com/36/bf/QgJ7u0C9_o.png

E, considerando que este tópico possui relação com um anteriormente criado por mim e, ainda em atividade, como visto na imagem de exemplo eu irei fazer uso do Avatar sobre a capa, no entanto como visto na imagem do problema, o mesmo não aparece assim como dito no seguinte topico https://ajuda.forumeiros.com/t111258-avatar-nao-aparece-na-capa-do-perfil?nid=100#784733

@EDIT - O espaço marcado por um preenchimento avermelhado delimita a área do meu problema referente ao tópico criado anteriormente.

up

Opa meu amigo! Você é o antigo Rococo do Revenge?
Mas vamos lá... Para adicionar a capa, tu irá colocar este CSS:

Código:

#fbfundo {background-image: url(https://images2.imgbox.com/36/bf/QgJ7u0C9_o.png)!important;}

O que mais?
Até mais.

Me conhecer por este nome é o cumulo do "[g]old" kkkkk , eu mesmo

E sobre o codigo, creio que entendeu errado o que eu quero. Essa imagem que esta no codigo, é um exemplo visual de como quero organizar os campos sobre a capa do perfil. O que desejo é organizar os campos para que fiquem como esta exemplificado.

Olá,
para arranjar o avatar, responda:
https://ajuda.forumeiros.com/t111258-avatar-nao-aparece-na-capa-do-perfil


agora para fixar a sua capa, ponha isto do seu CSS, substituido o que você usa atualmente:

Vá ao JS, ou template e localize:

<div style="width: 100%; height: 315px; position: relative; background: url() no-repeat center;" id="fbfundo">

remova o style, deixado assim a <div id="fbfundo">

Código:


#fbfundo {
    -webkit-border-radius: 5px;
    width: 100%;
    height: 315px;
    position: relative;
    background: url() no-repeat center;
    background-size: cover;
    box-shadow: 0 0 1px 1px #00000040;
}

agora localize

<td style="font-size: 16px;" id="fbnome"><div class="h3"><span style="color:#2727D1"><strong>Illium</strong></span> </div></td>

e apague.


Localize

<td style="font-size: 1.4em;" id="fbrank"></td>

e apague.

Por fim, localize

<td id="fbgrupo"><img src="https://i.servimg.com/u/f11/19/69/56/22/-10.png" alt="Sistema de Gerenciamento" title="Sistema de Gerenciamento"></td>

e apague.

---

Se, possivel poderia enviar-me o JS, seria mais facil para a edição


obrigado

Aqui esta

Código:

// FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function () {
                // Link Imagem Capa
                var fbcapa = $('#field_id1 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
              $('div#main-content h1.page-title').before('<div style="width: 100%; height: 315px; position: relative; background: url(' + fbcapa + ') no-repeat center center scroll;" 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;} #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar { border: 4px solid #fff; -webkit-border-radius: 2px; background-color: white; z-index: 1; } #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#main-content div.module:first div.inner img[alt=""]').clone().appendTo($('#fbavatar'));
                // Nome
                $('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
                // Rank
                $('div#main-content div.module:first b').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 () {
                        $('#tabs li').click(function (e) {
                            e.preventDefault();
                            var url = this.firstChild.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

up