[TUTORIAL] Perfil com foto de capa como no facebook

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

  • 0

[TUTORIAL] Perfil com foto de capa como no facebook Empty [TUTORIAL] Perfil com foto de capa como no facebook

Mensagem por nikka em 09.11.14 11:17


[TUTORIAL] Perfil com foto de capa como no facebook Grpes_et_ut

Perfil dos usuários


Este recurso visa disponibilizar aos usuários a foto de capa no perfil avançado de Forumeiros. Com ele, você pode aumentar a interação de seus membros e criar concursos de capas mais bonitas ou, simplesmente usar como meio de publicidade.


--> Tutoriais, dicas e astúcias <--
Perfil com foto de capa como no facebook



- Funcionamento do Javascript:
As páginas javascript ativas em seu fórum possibilita inserir scripts e jquery para personalizar seu fórum, contudo é importante saber que qualquer script encontrado na internet acabam por não surgir efeito nos fóruns.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>
[TUTORIAL] Perfil com foto de capa como no facebook Painel13
[TUTORIAL] Perfil com foto de capa como no facebook 110111 Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Perfil com foto de capa como no facebook 110210 Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Perfil com foto de capa como no facebook 110310 Seta Código JavaScript Campo destinado para receber os códigos JavaScript e jQuery.
[TUTORIAL] Perfil com foto de capa como no facebook 110410 Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.


- Aplicação do código:
Existe o código específico para cada versão de fórum. O usuário pode adaptar o código da maneira que bem entender sem remover os créditos do autor que está no código, visto que, este não interfere ou aparece no fórum com o nome do desenvolvedor.

[TUTORIAL] Perfil com foto de capa como no facebook Php31210 PHPBB3
Código:
    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function () {
                // Link Imagem Capa
                var fbcapa = $('#field_id-20 .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='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();
                });
            });
        }
[TUTORIAL] Perfil com foto de capa como no facebook Php21110 PHPBB2
Código:
    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id1 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').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
                $('table.forumline td[class="row1 gensmall"][align="center"] img[alt=""]').clone().appendTo($('#fbavatar'));
                // Nome
                $('.catLeft:first span[class="genmed module-title"]').clone().appendTo($('#fbnome'));
                // Rank
                $('td[class="row1 gensmall"][align="center"] img:last').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 span[class="genmed module-title"]').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() {
                        $('td[align="right"][valign="bottom"][width="100%"][nowrap="nowrap"] a').click(function(e) {
                            e.preventDefault();
                            var url = this.href;
                            if (url == '#') return;
                            $('table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]').load(url + ' table[width="100%"][cellspacing="1"][cellpadding="1"][border="0"]', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }
[TUTORIAL] Perfil com foto de capa como no facebook Pun1210 PUNBB
Código:
    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id18 .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();
                });
            });
        }
[TUTORIAL] Perfil com foto de capa como no facebook Inv1010 INVISION
Código:
    // FOTO DE CAPA
        if (window.location.pathname.indexOf('/u') == 0) {
            $(document).ready(function() {
                // Link Imagem Capa
                var fbcapa = $('#field_id1 .field_uneditable').text(); // Local onde coloca a ID do campo
                // Estrutura geral
                $('#profile-advanced-layout').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; }#profile-advanced-layout { margin-top: 30px; }</style>');
                // Avatar
                $('#profile-advanced-right .box-content.profile:contains("Rank:") img:first').clone().appendTo($('#fbavatar'));
                // Nome
                $('#profile-advanced-right .module:first .maintitle h3').clone().appendTo($('#fbnome'));
                // Rank
                $('#profile-advanced-right .box-content.profile:contains("Rank:") img:last').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 h3 em').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() {
                        $('#profile-advanced-left ul.privmsg li div.tabitem a').click(function(e) {
                            e.preventDefault();
                            var url = this.href;
                            if (url == '#') return;
                            $('#profile-advanced-left').load(url + ' #profile-advanced-left', tabfbperfil);
                        });
                    };
                    tabfbperfil();
                });
            });
        }

- Perfil personalizado:
Agora, acesse Painel de Controle > Usuários e Grupos > Usuários > Perfis > [TUTORIAL] Perfil com foto de capa como no facebook Ajouter > e no nome Tipo, determine o valor como Campo de texto, disponibilizando tal campo somente no Perfil. Feito isso, salve.

[TUTORIAL] Perfil com foto de capa como no facebook Step-210 Caso tenha dúvidas referente a criação de um campo no perfil dos usuários, aconselhamos que leia atentamente o seguinte FAQ: https://ajuda.forumeiros.com/t17049-criacao-e-gestao-dos-perfis

[TUTORIAL] Perfil com foto de capa como no facebook Untitl16


Em seguida, acesse o perfil do seu usuário. Por exemplo: https://ajuda.forumeiros.com/u1 Em seguida, clique no botão direito do mouse por cima da caixa de texto correspondente ao seu campo de perfil que vai abrigar a URL da foto de capa, na opção "Inspecionar elemento":

[TUTORIAL] Perfil com foto de capa como no facebook 1step10

Na imagem ilustrativa acima, o campo correspondente onde vamos colocar a URL da imagem é o profile_field_13_7. Acesse novamente o seu script, e nele localize por:
Código:
var fbcapa = $('#field_id-20 .field_uneditable').text(); // Local onde coloca a ID do campo
Troque o valor:
Código:
field_id-20
Pelo valor do 'FIELD' que obteve quando inspecionou o elemento. Feito isso, salve seu código com o novo valor do Field.


  • Como definir capa padrão?
    Para obter ajuda, acesse o seguinte link: https://ajuda.forumeiros.com/t17049-#102198 Ao definir um conteúdo padrão, a URL será mostrada mesmo que o membro não digite a URL de capa.
    @Shek escreveu:Acesse Usuários e Grupos > Perfils > Foto de capa Editar > Campo de texto > Substituir conteúdo >
    Em seguida, volte no mesmo local, e na caixa Campo do texto cole a URL da imagem padrão para novos usuários.

  • Tenho um template IPBoard profile, e o código não funcionou. O que fazer?
    O código só é compatível com versão de perfil Forumeiros. Caso use um perfil avançado mais conhecido como IPBoard profile, então, nós não poderemos lhe fornecer uma correção, visto que, o mesmo não é adaptável ao seu template editado.

  • A capa não aparece no perfil! O que devo fazer?
    Existem algumas instruções básicas para solucionar este problema. Primeiro, deve procurar o Seletor CSS do campo do perfil personalizado e ao encontrar, substituir conforme ministrado acima.
    Veja algumas questões resolvidas sobre o assunto:
    https://ajuda.forumeiros.com/t96284-
    https://ajuda.forumeiros.com/t96295-


    Resultado
    [TUTORIAL] Perfil com foto de capa como no facebook 0e8UEVo





© Fórum dos Fóruns, Hancki & First


[TUTORIAL] Perfil com foto de capa como no facebook Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:Perfil com foto de capa como no facebook
nikka

nikka
Membro profissional
Membro profissional

Feminino
Inscrito dia : 17/12/2008
Mensagens : 15621
Pontos Ativos : 19897

https://ajuda.forumeiros.com/ https://www.facebook.com/forumeirospt https://twitter.com/Forumeiros_PT

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