Usar capa no Perfil ao estilo das redes sociais

3 participantes

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

Tópico resolvido Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 10.11.20 11:42

Detalhes da questão


Endereço do fórum: https://vidarealcrias.forumeiros.com/
Versão do fórum: phpBB3

Descrição


estou tendo problemas com a ativação de um codigo java script, da forumeiros, que edita o perfil dos membros/usuarios, e deixa no estilo perfil do facebook, com opção do usuario, alterar a capa atras da foto etc.
eu vih varios tópicos resolvidos na questão, e tentei mas n deu certo, o meu indereço na inspeção aparece esse : profile_field_13_4

aguardando ajuda ! Mostrando a lingua
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por tikky 10.11.20 11:50

Olá @[MG.z]Jessica_.,

Você pode permitir que convidados possam ver os perfis no seu fórum, por favor?!


Aguardo uma resposta sua,
pedxz.


Última edição por pedxz em 10.11.20 13:03, editado 1 vez(es)
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 10.11.20 12:28

Permitido!
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por tikky 10.11.20 13:53

E qual o campo pretendido?! Pode também pôr visível para convidados?
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 10.11.20 14:14

Usuarios e Grupos >>> Perfis >>> Campos do Perfil >>> Foto de Capa

Já esta visivel para convidado também

Exemplo do que quero :[/b]https://i.imgur.com/0e8UEVo.png

Código que estou Usando :
Código:
// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function () {
            // Link Imagem Capa
            var fbcapa = $('#profile_field_13_4 .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; -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><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;} #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; }</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='https://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();
            });
        });
    }

Porem não aparece nada.


Última edição por pedxz em 10.11.20 14:22, editado 1 vez(es) (Motivo da edição : Remoção da formatação)
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por tikky 10.11.20 14:21

Já esta visivel para convidado também
Veja se está a usar esta configuração:

Usar capa no Perfil ao estilo das redes sociais 4nsneGL

Não vejo o campo. Lembre-se se o campo estiver vazio não é visível, adicione uma capa a conta /u1
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por RafaelS. 10.11.20 14:22

Olá,

Uso de formatação de texto


Informamos que a formatação excessiva não é permitida no Fórum dos Fóruns. Isto é, o uso do riscado, o uso de alinhamentos, a alteração do texto, cor ou tamanho da fonte.

Estes privilégios são  reservados à Staff do Fórum dos Fóruns.
Pelo que pude averiguar, você tem um JavaScript ativo em seu fórum que contém um erro de sintaxe e está entrando em conflito com o código da capa.

Na área de gestão dos Javascripts, desative um por um (deixando sem investimento) até o código da capa funcionar.

Atenciosamente,
RafaelS. King

PS: O código Javascript que está com erros é um tal de "fancybox".
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 10.11.20 14:46

OLÁ RAFAEL SIM AGORA APARECEU, POREM ESTA COM ALGUNS ERROS, NÃO ESTA APARECENDO A FOTO DE AVATAR, E EM FOTO DE CAPA ONDE COLOQUEI O LINK DE IMAGEM, NÃO ESTA PUXANDO A IMAGEM.

OLHA COMO FICOU : https://i.imgur.com/uD5gRD5.png
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por RafaelS. 10.11.20 19:34

Olá novamente,

Teria como nos fornecer uma conta para testes (sem poderes moderativos)?

Atenciosamente,
RafaelS. King
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 10.11.20 21:01

usuário : Teste
Senha : 2020teste
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por tikky 10.11.20 21:08

Altere o seu código para:
Código:
// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function () {
            // Link Imagem Capa
            var fbcapa = $('#field_id4 .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; -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><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;} #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; }</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='https://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();
            });
        });
    }
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 11.11.20 6:47

Olá Novamente Pedxz obrigado pelo código agora aparece a imagem de capa, porem continua oculta a imagem do Avatar de perfil!

olha como ficou: https://i.imgur.com/FBrxbl3.png

Chorando ou muito tr
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por RafaelS. 11.11.20 8:45

Olá novamente,

Troque o código mais uma vez por este:

Código:
// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function () {
            // Link Imagem Capa
            var fbcapa = $('#field_id4 .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; -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><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;} #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; }</style>');
            // Avatar
            $('div#main-content div.module:first div.inner div img[loading]').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='https://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();
            });
        });
    }

Atenciosamente,
RafaelS. King
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 11.11.20 15:44

obrigado rafaels
Agora sim está aparecendo os 2 só queria arrumar a borda do avatar q esta estranha e subir um pouco o rank pra sair de cima das mensagens.

olha como ficou : https://i.imgur.com/Ea9qU7Z.png
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por RafaelS. 12.11.20 14:35

Olá novamente,

Troque o código por este:

Código:
// FOTO DE CAPA
    if (window.location.pathname.indexOf('/u') == 0) {
        $(document).ready(function () {
            // Link Imagem Capa
            var fbcapa = $('#field_id4 .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; -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><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;} #fbperfil {margin-left: 13px; } #fbfundo { border: 2px solid #BDBDBD; -webkit-border-radius: 5px; } #fbavatar img { 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; }</style>');
            // Avatar
            $('div#main-content div.module:first div.inner div img[loading]').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='https://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();
            });
        });
    }

Atenciosamente,
RafaelS. King
RafaelS.

RafaelS.
Membro Entusiasta
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por [MG.z]Jessica_. 12.11.20 15:35

Ficou Perfeito ! Rosa
muito obrigado RafaelS e Pedxz .
[MG.z]Jessica_.

[MG.z]Jessica_.
Novo Membro

Membro desde : 25/10/2020
Mensagens : 17
Pontos : 26

https://vidarealcrias.forumeiros.com/

Ir para o topo Ir para baixo

Admineiro

Tópico resolvido Re: Usar capa no Perfil ao estilo das redes sociais

Mensagem por tikky 12.11.20 15:37

Party

Tópico resolvido


Movido para "Questões resolvidas".
tikky

tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7806
Pontos : 9052

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos