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/

Olá,

• Vá em Painel de controle › Módulos › HTML & JavaScript › Gestão dos códigos JavaScripts › Criar 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 controle › Visualização › Imagens e Cores › Cores › Folha 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.

xD

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