Posicionar os campos do perfil sobre a capa

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Atendido / Resolvido Posicionar os campos do perfil sobre a capa

Mensagem por zHugh em 11.01.18 1:30

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.


Última edição por zHugh em 16.01.18 13:46, editado 1 vez(es)
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por zHugh em 12.01.18 14:32

up
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por Sennior em 12.01.18 23:00

Opa meu amigo! Você é o antigo Rococo do Revenge? Envergonhado
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.
Sennior

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16368
Pontos Ativos : 20873

Ver perfil do usuário https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por zHugh em 13.01.18 2:34

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

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por Pedxz em 13.01.18 14:03

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
Pedxz

Pedxz
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 13/01/2017
Mensagens : 2800
Pontos Ativos : 3553

Ver perfil do usuário https://pedxz.forumeiros.com

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por zHugh em 13.01.18 23:48

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

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por zHugh em 15.01.18 19:00

up
zHugh

zHugh
Usuário destaque

Masculino
Inscrito dia : 30/03/2010
Mensagens : 736
Pontos Ativos : 1190

Ver perfil do usuário http://superonzerpg.forumeiros.net/

Atendido / Resolvido Re: Posicionar os campos do perfil sobre a capa

Mensagem por Ketholy em 16.01.18 13:47

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.
Ketholy

Ketholy
Membro do Fórum

Feminino
Inscrito dia : 20/01/2017
Mensagens : 1297
Pontos Ativos : 1558

Ver perfil do usuário http://jogosrpg-com-br.forumais.com/forum http://assuntosgeral-com-br.forumais.com https://twitter.com/Ketholy Suan

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum