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.
Acesso rápido

Fóruns de suporte oficiais
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Shek Crowley
 
Fou-Lu
 
Holkis
 
iScroll
 
Sr.Oliveira
 
Harleen
 
while
 
Stewart
 
fiapinho
 

Quem está conectado
247 usuários online :: 11 usuários cadastrados, 1 Invisível e 235 Visitantes :: 2 Motores de busca

[K]oke, Daemon, DooGy00, Fou-Lu, iScroll, Kyou, L Mars, Maguro Taniguchi, Neimasinho, Tiger, tikky

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

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 Qui 17 Dez 2015 - 15:22

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

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em Qui 17 Dez 2015 - 15:42

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 Qui 17 Dez 2015 - 15:49, editado 1 vez(es) (Razão : Print)

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2476

http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Qui 17 Dez 2015 - 15:50

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

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em Qui 17 Dez 2015 - 15:59

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2476

http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Qui 17 Dez 2015 - 16:03

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

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Sab 19 Dez 2015 - 23:52

UP!

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/
  • 0

Resolvido Re: Foto de capa no perfil

Mensagem por Kyo Panda em Seg 21 Dez 2015 - 2:44

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. Antes de começar a postar, por favor, queira visitar alguns links importantes:
Regulamento e informações afins:
Seta Condições gerais de uso & equipe voluntária de suporte.
Seta Lista de perguntas e respostas e Tutoriais e astúcias.
Seta Sistema de busca do fórum.
Fóruns interessantes:
Seta Ajuda e Suporte.
Seta Serviços Extras.
Seta Publicidade & SEO.
Seta Sugestões e Melhoras.
Desenvolvedores:
Seta Addons ou Plugins.
Seta Desenvolvimento Beta.

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 2338
Pontos Ativos : 5267

http://ajuda.forumeiros.com

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Seg 21 Dez 2015 - 15:30

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á

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em Seg 21 Dez 2015 - 15:39

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2476

http://ajuda.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Seg 21 Dez 2015 - 15:48

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á

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em Seg 21 Dez 2015 - 16:19

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



MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2476

http://ajuda.forumeiros.com/
  • 0

Resolvido Re: Foto de capa no perfil

Mensagem por Harleen em Seg 21 Dez 2015 - 16:55

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á

Harleen
Usuário destaque

Feminino
Inscrito dia : 09/07/2012
Mensagens : 652
Pontos Ativos : 2723

http://antenadogames.forumeiros.com/

Resolvido Re: Foto de capa no perfil

Mensagem por MateusAnjosV em Seg 21 Dez 2015 - 16:59

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

MateusAnjosV
Membro do Fórum

Masculino
Inscrito dia : 16/10/2015
Mensagens : 1417
Pontos Ativos : 2476

http://ajuda.forumeiros.com/

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

- Tópicos similares

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