IPS Steps

Nome do Arquivo: IPS Steps
Autor: [F]lames
Funcionalidade: PunBB
Categoria: Recursos de Outros Autores

Aceda em:
Painel de Controle - Módulos - HTML & JavaScript - Gestão dos códigos JavaScript

Crie um novo javascript com investimento em todas as páginas.

Código:

    jQuery(document).ready(function() {if(jQuery('.main-content.standalone h2.u:contains("Condições de utilização do fórum")').length) {jQuery('#pun-visit + .pun-crumbs').after('<div class="ipsSteps clearfix"><ul><li class="ipsSteps_active"><strong class="ipsSteps_title">Passo 1</strong><span class="ipsSteps_desc">Condições de utiliz.</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;"><strong class="ipsSteps_title">Passo 2</strong><span class="ipsSteps_desc">Sua conta</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;"><strong class="ipsSteps_title">Passo 3</strong><span class="ipsSteps_desc">Confirmação</span><span class="ipsSteps_arrow"> </span></li></ul></div>');}if(jQuery('.main #ucp div:contains("Cadastrar-se no fórum")').length) {jQuery('#pun-visit + .main:contains("Cadastrar-se no fórum")').before('<div class="ipsSteps clearfix" style="margin-bottom: 8px;"><ul><li class=""><strong class="ipsSteps_title">Passo 1</strong><span class="ipsSteps_desc">Condições de utiliz.</span><span class="ipsSteps_arrow"> </span></li><li class="ipsSteps_active" style="width: 83px;"><strong class="ipsSteps_title">Passo 2</strong><span class="ipsSteps_desc">Sua conta</span><span class="ipsSteps_arrow"> </span></li><li class="" style="width: 83px;"><strong class="ipsSteps_title">Passo 3</strong><span class="ipsSteps_desc">Confirmação</span><span class="ipsSteps_arrow">&nbsp;</span></li></ul></div>');}});

Agora, aceda em:
Painel de Controle - Visualização - Imagens e Cores - Cores - Folha de Estilo CSS

Coloque este código no TOPO da folha de estilo css e salve.

Código:

    .ipsSteps {
    background: #E9E9E9;
    height: 55px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    }
    .ipsSteps li:first-child {
    border-radius: 3px 0px 0px 3px;
    -moz-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;
    }
    .ipsSteps ul li {
    float: left;
    padding: 11px 33px 5px 18px;
    color: #323232;
    background-image: url('http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png');
    background-repeat: no-repeat;
    background-position: 100% -56px;
    position: relative;
    height: 39px;
    text-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px;
    }
    .ipsSteps_title {
    display: block;
    font-size: 14px;
    padding-bottom: 4px;
    }
    .ipsSteps_desc {
    font-size: 11px;
    }
    .ipsSteps ul li:first-child .ipsSteps_arrow {
    display: none !important;
    }
    .ipsSteps .ipsSteps_active {
    background-position: 100% 0;
    color: white;
    text-shadow: 0px -1px 0 rgba(0, 0, 0, 0.8);
    }
    .ipsSteps_active .ipsSteps_arrow {
    display: block;
    position: absolute;
    left: -23px;
    top: 0;
    width: 23px;
    height: 55px;
    background: url('http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png') no-repeat 0 -112px;
    }

Bem interessante e elegante.
Estarei adicionando em meu fórum, mais uma vez vlw.
#TShow

[sucesso=Tutorial aceito][/sucesso]Movido para: Dicas e Tutoriais