Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Os membros mais ativos da semana
Gaaratsu
 
Thiago
 
Koizumi Bia
 

Quem está conectado
158 usuários online :: 2 usuários cadastrados, Nenhum Invisível e 156 Visitantes :: 3 Motores de busca

juleic1123, ranzatti

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em 24/12/09, 01:05 pm

Foto de capa no perfil

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

Resolvido Foto de capa no perfil

Mensagem por Harleen em 17/12/15, 01:22 pm

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á.
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em 17/12/15, 01:42 pm

Boa tarde @Harleen!

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

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


Atenciosamente,
MateusAnjos.

@Edit, sorry:

Seta http://prntscr.com/9fb2zz


Última edição por MateusAnjosV em 17/12/15, 01:49 pm, editado 1 vez(es) (Razão : Print)
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1437
Pontos Ativos : 2012

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 17/12/15, 01:50 pm

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

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em 17/12/15, 01:59 pm

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>');
}
});

Feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1437
Pontos Ativos : 2012

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 17/12/15, 02:03 pm

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

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 19/12/15, 09:52 pm

UP!
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

Ver perfil do usuário https://soulfulbrmusic.forumeiros.com/
  • 0

Resolvido Re: Foto de capa no perfil

Mensagem por Kyo Panda em 21/12/15, 12:44 am

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


Bem-vindo ao Fórum dos Fóruns!
Leia as Regras do Fórum dos Fóruns. Alguns setores possuem regras específicas.
Verifique se sua questão já não foi respondida.
Seja cordial e respeite o tempo dos voluntários para atender o seu pedido.
Kyo Panda — Moderadeiro
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 4583
Pontos Ativos : 5832

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 21/12/15, 01:30 pm

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á
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em 21/12/15, 01:39 pm

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? Muito feliz
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1437
Pontos Ativos : 2012

Ver perfil do usuário http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 21/12/15, 01:48 pm

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á
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em 21/12/15, 02:19 pm

Ok. Muito feliz

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


avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1437
Pontos Ativos : 2012

Ver perfil do usuário http://ajuda.forumeiros.com/
  • 0

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em 21/12/15, 02:55 pm

Olá Mateus, você realmente é um Anjo 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 huh

Obrigada desde já
avatar

Harleen
Membro do Fórum

Feminino
Inscrito dia : 09/07/2012
Mensagens : 1522
Pontos Ativos : 1973

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

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em 21/12/15, 02:59 pm

Fico feliz que tenha funcionado. Muito feliz
Por nada. Feliz

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
avatar

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1437
Pontos Ativos : 2012

Ver perfil do usuário http://ajuda.forumeiros.com/

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