Barra de pasos

Qual é minha questão:
Hola, soy de México y hablo español, yo quiero saber si me pueden ayudar con el codigo para poner pasos en el registro como en este foro. Me gusto mucho eso.

Ejemplo:

Spoiler:

Passo 1 > Passo 2 > Passo 3
Gracias, obrigao!

Endereço do meu fórum:
Como poner la barra de pasos como BS

Versão:
PunBB

UP

Crie um novo JavaScript com investimento em todas as páginas e adicione:

Código:

jQuery(function() {
/*Cond de utilização*/
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>');
}
});

Depois vá até sua folha de css e adicione isto:

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;
list-style-type: none;
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;
}

Até mais !

Não funcionou: (

up