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


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» [PEDIDO] Ícone "Enquete"
Hoje à(s) 14:37 por GollD

» Como colocar ícone de nova mensagem em tópico
Hoje à(s) 14:27 por Cepheus

» Redução dos Ranks...
Hoje à(s) 14:15 por Cepheus

» [PEDIDO] Banner
Hoje à(s) 13:59 por idarkdg

» A Propaganda está no lugar errado
Hoje à(s) 5:01 por Bluue_Br

» Arma/Carro Preferido opção no perfil
Hoje à(s) 4:48 por while

» Personalizar visualização do perfil
Hoje à(s) 3:30 por while

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
while
 
Cream
 
Shek
 
Holkis
 
PrisoN†BreaK
 
IsmaelS.
 
Ana Leandro
 
Sennior
 
Cepheus
 
YouTube3
 

Quem está conectado
122 usuários online :: 3 usuários cadastrados, 2 Invisíveis e 117 Visitantes :: 2 Motores de busca

GollD, JrMAFiA, YouTube3

[ 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 : 537
Pontos Ativos : 2348

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 : 1411
Pontos Ativos : 2313

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 : 537
Pontos Ativos : 2348

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 : 1411
Pontos Ativos : 2313

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 : 537
Pontos Ativos : 2348

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 : 537
Pontos Ativos : 2348

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

Kyo Panda
Membro do Fórum

Masculino
Inscrito dia : 08/01/2012
Mensagens : 1092
Pontos Ativos : 3435

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 : 537
Pontos Ativos : 2348

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 : 1411
Pontos Ativos : 2313

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 : 537
Pontos Ativos : 2348

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 : 1411
Pontos Ativos : 2313

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 : 537
Pontos Ativos : 2348

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 : 1411
Pontos Ativos : 2313

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
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5