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
Conectar-se

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Quem está conectado
239 usuários online :: 3 usuários cadastrados, Nenhum Invisível e 236 Visitantes :: 2 Motores de busca

BichodoMato, Connor R., PESS_dodo

[ Ver toda a lista ]


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

Personalização do perfil

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

Resolvido Personalização do perfil

Mensagem por Karadruz DL em Qua 2 Nov 2016 - 17:44

Detalhes da questão


Endereço do fórum: http://digimonviverpg.forumeiros.com/forum
Versão do fórum: PhpBB3

Descrição


Estou procurando uma forma de reproduzir isso em perfis dos usuários, mas não encontro em nem um lugar ( http://orig04.deviantart.net/5bff/f/2016/305/0/1/modelo_perfil_by_diginitrix001-damy8p5.png ). O perfil do usuário é carregado completamente na primeira parte da imagem antes de se comprimir na segunda parte da imagem, quando a compressão é feita, é possível ver os botões abas do perfil em cima, e cada aba ali mostra o que o perfil do usuário tem a mostrar, isso polpa tempo em ter que abrir o link do perfil do usuário para ver as informações.

Obs, link do fórum estrangeiro de onde tem esse sistema: http://digimonadventure-rol.superforo.net/
avatar

Karadruz DL
Nível 4

Masculino
Inscrito dia : 28/10/2016
Mensagens : 31
Pontos Ativos : 227

http://digimonviverpg.forumeiros.com

Resolvido Re: Personalização do perfil

Mensagem por Kyo Panda em Qua 2 Nov 2016 - 20:03

Olá,

  • Vá em Painel de controleMódulosHTML & JavaScriptGestão dos códigos JavaScriptsCriar um novo JavaScript e adicione esse código com Investimento em Nos tópicos:
    Código:
    ; (function ($) {
        'use strict';

        var items, list, link;

        items = [{
            class: 'postprofile-tab-avatar',
            text: 'Avatar',
            index: 0
        }, {
            class: 'postprofile-tab-ranking',
            text: 'Ranking',
            index: 1
        },  {
            class: 'postprofile-tab-info',
            text: 'Info',
            index: 3
        },  {
            class: 'postprofile-tab-contact',
            text: 'Contato',
            index: 5
        }];

        list = '';

        $.each(items, function (key, item) {
            link = $('<a>', {
                'href': 'javascript:void(0)',
                'text': item.text
            });

            list += $('<li>', {
                'data-index': item.index,
                'class': item.class,
                'html': link.prop('outerHTML')
            }).prop('outerHTML');
        });

        $(function () {
            $('<ul>', {
                class: 'postprofile-tabs',
                html: list
            }).prependTo('.postprofile');

            $(document, '.postprofile-tabs a').on('click', function (event) {
                var self, index, tabs, visible;

                self = $(event.target);
                index = self.parent().data('index');
                tabs = self.closest('ul').nextAll('dl').eq(0);
                visible = tabs.children(':visible');

                if (visible.index() === index) {
                    return;
                }

                visible.animate({
                    'margin-left': '-200px',
                    'opacity': '0'
                }, 'fast', function () {
                    visible.css('display', 'none');
                    tabs
                        .children()
                        .eq(index)
                        .css('display', 'block')
                        .animate({
                            'margin-left': '0px',
                            'opacity': '1'
                        });
                });
            });
        });
    }) (jQuery);
  • Vá em Painel de controleVisualizaçãoImagens e CoresCoresFolha de estilo CSS e adicione o seguinte código ao final da caixa de texto:
    Código:
    .postprofile {
        overflow: hidden;
        min-height: 220px;
    }

    .postprofile > dl > dt {
        display: block;
        opacity: 1;
        margin-left: 0;
    }

    .postprofile > dl > dd {
        display: none;
        opacity: 0;
        margin-left: -200px;
    }

    .postprofile-tabs {
        list-style: none;
        margin: 0 0 10px;
        padding: 0;
    }

    .postprofile-tabs li {
        display: inline-block;
    }

    .postprofile-tabs a {
        padding: 5px;
        background-color: #E68A00;
        display: block;
        margin: 1px;
    }

    .postprofile-tabs a:hover,
    .postprofile-tabs a:active {
        background-color: #926521;
        color: #fff;
        text-decoration: none;
    }


Eu o criei baseado nas informações existentes nos perfis do seu fórum. Isso quer dizer que se for adicionar algum campo de perfil futuramente, alguns ajustes terão que ser feitos.

Contente
avatar

Kyo Panda
Moderadeiro
Moderadeiro

Masculino
Inscrito dia : 08/01/2012
Mensagens : 3107
Pontos Ativos : 6405

http://ajuda.forumeiros.com

Resolvido Re: Personalização do perfil

Mensagem por Karadruz DL em Qua 2 Nov 2016 - 20:44

Cara ficou incrível! Muito obrigado, serio!

Quando eu adicionar algum campo novo de perfil eu posto aqui de volta, claro pedindo para algum Admin liberar esse tópico para poder escrever de novo antes
xD
avatar

Karadruz DL
Nível 4

Masculino
Inscrito dia : 28/10/2016
Mensagens : 31
Pontos Ativos : 227

http://digimonviverpg.forumeiros.com

Resolvido Re: Personalização do perfil

Mensagem por Cream em Qua 2 Nov 2016 - 22:43

Autor, não hesite em criar um novo tópico quando for fazer novas alterações, por enquanto daremos este como resolvido!
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

Cream
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 13962

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