Account Creation Improvement Project/Testing content/HTML code for progress-bar (1)

Preview edit

Code edit

<!doctype html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style>
			#signuptopbox li{
				float:left;
				list-style:none;
				font-family:sans-serif;
			}
			#signuptopbox li{
				color:#3ca7d4;
				background:#c2e1f9;
				line-height:2.8em;
				margin-right:.25em;
				padding-right:.5em;
			}
			#signuptopbox li.pr-active, #signuptopbox li.pr-active div{
				color:#67ca36;
				background:#d4f9c2;
				border-color:#fff #fff #fff #67ca36;
			}
			#signuptopbox li div{
				width:0;
				height:0;
				border-color:#fff #fff #fff #3CA7D4;
				border-style:solid;
				border-width:1.4em .3em 1.4em 1.4em;
				float:left;
			}
			#signuptopbox li span.pr-number{
				display:block;
				width: 1.8em;
				line-height: 1.8em;
				background:#3ca7d4;
				color:#c2e1f9;
				text-align:center;
				margin:.5em;
				-webkit-border-radius:50%;
				-moz-border-radius:50%;
				-ms-border-radius:50%;
				-o-border-radius:50%;
				border-radius:50%;
				font-weight:600;
				float:left;
			}
			#signuptopbox li.pr-active span.pr-number{
				background:#67ca36;
				color:#d4f9c2;
			}
			#signuptopbox li span{float:left;}
			#signuptopbox li.pr-spacer{padding:0}
		</style>
	</head>
	<body>
		<ul id="signuptopbox">
			<li class="s1 pr-active"><span class="pr-number">1</span><span>This is the first step</span></li>
			<li class="pr-spacer pr-active"><div/></li>
			<li class="s2"><span class="pr-number">2</span><span>This is the second step</span></li>
			<li class="pr-spacer"><div/></li>
			<li class="s3"><span class="pr-number">3</span><span>This is the final step</span></li>
			<li class="pr-spacer"><div/></li>
		</ul>
	</body>
</html>

CSS (to common.css) edit

#signuptopbox li{
	float:left;
	list-style:none;
	font-family:sans-serif;
}
#signuptopbox li{
	color:#3ca7d4;
	background:#c2e1f9;
	line-height:2.8em;
	margin-right:.25em;
	padding-right:.5em;
}
#signuptopbox li.pr-active, #signuptopbox li.pr-active div{
	color:#67ca36;
	background:#d4f9c2;
	border-color:#fff #fff #fff #67ca36;
}
#signuptopbox li div{
	width:0;
	height:0;
	border-color:#fff #fff #fff #3CA7D4;
	border-style:solid;
	border-width:1.4em .3em 1.4em 1.4em;
	float:left;
}
#signuptopbox li span.pr-number{
	display:block;
	width: 1.8em;
	line-height: 1.8em;
	background:#3ca7d4;
	color:#c2e1f9;
	text-align:center;
	margin:.5em;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	-ms-border-radius:50%;
	-o-border-radius:50%;
	border-radius:50%;
	font-weight:600;
	float:left;
}
#signuptopbox li.pr-active span.pr-number{
	background:#67ca36;
	color:#d4f9c2;
}
#signuptopbox li span{float:left;}
#signuptopbox li.pr-spacer{padding:0}

HTML (to wikicode) edit

<ul id="signuptopbox">
<li class="s1 pr-active"><span class="pr-number">1</span><span>This is the first step</span></li>
<li class="pr-spacer pr-active"><div/></li>
<li class="s2"><span class="pr-number">2</span><span>This is the second step</span></li>
<li class="pr-spacer"><div/></li>
<li class="s3"><span class="pr-number">3</span><span>This is the final step</span></li>
<li class="pr-spacer"><div/></li>
</ul>