Foto de capa no perfil

Detalhes da questão

Endereço do fórum: http://soulfulbrmusic.forumais.com/forum
Versão do fórum: PunBB

Descrição

Boa Tarde a todos, gostaria de saber se há como deixar apenas a capa e o perfil ficar ao lado, pois o avatar não aparece bem como o rank.
estou utilizando este código

Código:

// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function() {
            // Link Imagem Capa
            var fbcapa = $('#field_id5  .field_uneditable').text(); // Local onde coloca a ID do campo
            // Estrutura geral
            $('#pun-visit').before('<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></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; }#profile-advanced-layout #tabs { margin-bottom: -13px !important; margin-left: -10px; } #profile-advanced-details { padding-top: 10px !important; }#fbrank span { margin-bottom: 40px !important; }</style>');
            // Avatar
            $('.module:first .main-content img[alt=""]').clone().appendTo($('#fbavatar'));
            // Nome
            $('div#main-content div.module:first .h3:first').clone().appendTo($('#fbnome'));
            // Rank
            $('.module:first .main-content.clearfix.center span').clone().appendTo($('#fbrank'));
            // 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();
            });
        });
    }

Agradeço desde já.

Boa tarde @Harleen!

Você pode desbugar e deixar assim, por exemplo:
http://spninfinity.forumeiros.com/u1
Esse é um layout aleatório que criei para um fórum no futuro.

Ou apenas removemos e deixamos a capa, você que decide!
Mas no caso de ser a segunda opção, poderia desativar o javascript do efeito? Vou recriar o efeito de forma mais prática.


Atenciosamente,
MateusAnjos.

@Edit, sorry:

http://prntscr.com/9fb2zz

Boa tarde Mateus, se puder "desbugar" agradecerei, desativei o script para auxiliar...

Ok, nesse caso, substitua o js por esse:

Código:

 $(document).ready(function(){
if (window.location.pathname.indexOf('/u') == 0) { var fbcapa = $('#field_id5  .field_uneditable').text(); $('#pun-visit').before('<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></table></div></div>');
}
});

Olá Mateus resultou, porém quando clico nas outras abas a capa some.
Teria como ser igual ao print que postou?
Agradeço

UP!

Olá,

Tente esse código:

Código:

$(function () {
    if (window.location.pathname.indexOf('/u') == 0) {
        $.get('/u' + location.pathname.replace(/\D+/g, ''), function (data) {
            var element, fbcapa;
            element = document.createElement('div');
            element.innerHTML = data.split('<dl id="field_id5">').pop().split('</dl>').shift();
            fbcapa = $(element).find('.field_uneditable').text();
            $('#pun-visit').before('<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></table></div></div>');
        });
    }
});

Ainda é basicamente o código do Mateus, então créditos a ele.

Abraços.

Olá Kyo Panda, o código resultou, antes de encerrar o tópico gostaria de saber duas coisas,

1º tem como a capa carregar mais rápido quando se clica mas abas, no código do tutorial, a capa permanece "fixa" ao clicar nas abas e a
2ª teria como adicionar o status, parecido com esse perfil,

aqui está o link
http://www.somosmugiwara.com/u1 quero apenas o balão com o status

Obrigada desde já

Me perdoe @Harleen, fiz uma prova importante ontem e me preparei muito esses últimos dias, esqueci literalmente do seu tópico...

É só acrescentar um tab sem refresh no código do Kyo, troque por esse:

Código:

$(function () {
    if (window.location.pathname.indexOf('/u') == 0) {
        $.get('/u' + location.pathname.replace(/\D+/g, ''), function (data) {
            var element, fbcapa;
            element = document.createElement('div');
            element.innerHTML = data.split('<dl id="field_id5">').pop().split('</dl>').shift();
            fbcapa = $(element).find('.field_uneditable').text();
            $('#pun-visit').before('<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></table></div></div>');
        });
    }
});

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


O campo status, a senhorita já criou?

Não tem que se desculpar, já fiz várias provas e entendo...

Sim o campo de status está criado, é o 1º campo no perfil, para agilizar
o id é profile_field_13_7

P.S está acontecendo uma anomalia, clique nas abas e você verá

Ok.

Adicione no seu CSS:

Código:


//ALTERE 75 PARA CONTROLAR A ANOMALIA
#profile-advanced-left {
width: 75% !important;
}
//ESSA PARTE CONTROLA O STATUS
#status {
background: white;
border: 1px solid gray;
width: 15%;
padding: 15px;
position: absolute;
z-index: 99;
margin-top: -50px;
margin-left: 10px;
}


Substitua o js por esse:

Código:

$(function () {
    if (window.location.pathname.indexOf('/u') == 0) {
        $.get('/u' + location.pathname.replace(/\D+/g, ''), function (data) {
            var element, fbcapa;
            element = document.createElement('div');
            element.innerHTML = data.split('<dl id="field_id5">').pop().split('</dl>').shift();
            fbcapa = $(element).find('.field_uneditable').text();
            $('#pun-visit').before('<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></table></div></div>');
        });
    }
});

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

$(window).load(function(){
   $('#fbfundo').after('<div id="status">Carregando...</div>');

 
  var v = $('#field_id7 dd .field_uneditable').text();
  $('#status').text(v);
});

Olá Mateus, você realmente é um o seu código resultou de imediato, só que ainda existe uns poréns...
Como a dúvida foi resolvida, pode fechar o tópico, irei criar outro para o que está acontecendo

Obrigada desde já

Fico feliz que tenha funcionado.
Por nada.

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