Como colocar steps na pag, register

Štronda  • Qua 24 Abr 2013 - 2:12

Como colocar steps na pag, register Qua 24 Abr 2013 - 2:12

Qual é minha questão:
Como colocar os Step Igual da BS, Passo 1, Passo 2, Passo 3  / Print ↓
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Grato

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão do fórum:
PUNBB

Convidado  • Qua 24 Abr 2013 - 7:20

Štronda  • Qua 24 Abr 2013 - 21:57

Štronda  • Qui 25 Abr 2013 - 23:28

Štronda  • Sex 26 Abr 2013 - 21:16

Stronda™  • Sáb 27 Abr 2013 - 0:54

Štronda  • Dom 28 Abr 2013 - 13:41

Pedro95123  • Dom 28 Abr 2013 - 14:00

Štronda  • Seg 29 Abr 2013 - 10:45

Štronda  • Seg 29 Abr 2013 - 22:46

Daemon  • Seg 29 Abr 2013 - 22:59

Re: Como colocar steps na pag, register Seg 29 Abr 2013 - 22:59

Reputação da mensagem: 100% (6 votos)

Crie um novo JS 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">&nbsp;</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">&nbsp;</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>');}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">&nbsp;</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">&nbsp;</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>');}});

Salve e depois adicione ao seu css:

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;
}

'

Reputação da mensagem: 100% (6 votos)

Štronda  • Seg 29 Abr 2013 - 23:20

Stronda™  • Seg 29 Abr 2013 - 23:32

Conteúdo patrocinado  •