I found this code:
JAVASCRIPT:
- Code:
$(function() {
if (location.href.match(/.*\/(register|act).*/g)) {
var step, regex;
step = 0;
regex = /.*step=(\d+)/g;
$('#main').prepend($('<div class="ipsSteps clearfix"><ul><li><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 (location.href.match(regex)) {
step = parseInt(regex.exec(location.href)[1]) - 1;
} else if (location.href.indexOf('/act') !== -1) {
step = 2;
}
$('.ipsSteps li').eq(step).addClass('ipsSteps_active');
}
});
CSS:
- Code:
.ipsSteps {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #E9E9E9;
border-radius: 3px;
height: 55px;
margin: 10px 0;
}
.ipsSteps ul li {
background-image: url(http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png);
background-position: 100% -56px;
background-repeat: no-repeat;
color: #323232;
float: left;
height: 39px;
list-style-type: none;
padding: 11px 33px 5px 18px;
position: relative;
text-shadow: rgba(255,255,255,0.6) 0 1px 0;
}
.ipsSteps_title {
display: block;
font-size: 14px;
padding-bottom: 4px;
}
.ipsSteps_desc {
font-size: 11px;
}
.ipsSteps li:first-child {
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
.ipsSteps .ipsSteps_active {
background-position: 100% 0;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}
.ipsSteps_active .ipsSteps_arrow {
background: url(http://i69.servimg.com/u/f69/17/45/75/97/wizard10.png) no-repeat 0 -112px;
display: block;
height: 55px;
left: -23px;
position: absolute;
top: 0;
width: 23px;
}
It''s to modify the register page, but is for PunBB, i want it to work on Phpbb3!
Link in this forum: Click here