adjusting the progress bar styling for vcerts

lms/static/sass/views/_verification.scss

@@ -159,15 +159,45 @@ body.register.verification {
   }
 
 
-  .progress {
- /*         background: transparent url('../images/vcert-steps.png') no-repeat 0 0;
-    height: 50px;
-    text-indent: -9999px;
-*/
+  .progress,
+  .steps {
+    @include clearfix;
+    margin-bottom: $baseline;
+
+    ol {
+      margin: 0;
+      padding: 0;
+    }
     .progress-step {
       display: inline-block;
+      width: 15%;
       padding: ($baseline/2) $baseline;
+      text-align: center;
+      font-size: 12px;
+      color: #ccc;
+
+      &.current {
+        color: #008801;
+
+        .number {
+          border: 4px solid #008801;
+          color: #008801;
+        }
+      }
     }
+
+    .number {
+      height: 2em;
+      width: 2em;
+      display: block;
+      margin: 0 auto ($baseline/2);
+      border: 4px solid #ddd;
+      border-radius: 20px;
+      line-height: 2em;
+      text-align: center;
+      color: #ccc;
+    }
+
   }
 
 

lms/templates/verify_student/show_requirements.html

@@ -14,14 +14,15 @@
   <section class="progress">
   <h3 class="sr">Your Progress</h3>
   <ol>
-    <li class="progress-step current" id="progress-step1"><span class="sr">Current: </span>Step 1 Take Photo</li>
-    <li class="progress-step" id="progress-step2">Step 2 Take ID Photo</li>
-    <li class="progress-step" id="progress-step3">Step 3 Confirm Submission</li>
-    <li class="progress-step" id="progress-step4">Step 4 Make Payment</li>
-    <li class="progress-step" id="progress-step5">Finished Confirmation</li>
+    <li class="progress-step current" id="progress-step1"><span class="sr">Current Step: </span> <span class="number">1</span> Take Photo</li>
+    <li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li>
+    <li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li>
+    <li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
+    <li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Finished Confirmation</li>
   </ol>
   </section>
 
+  <section class="needs">
     <h3 class="title">What You Will Need to Register</h3>
 
     <p>There are a few things you will need to register as an ID verified student :</p>
@@ -42,26 +43,28 @@
       </div>
     </div>
 
-  <p class="tip">Missing something? <a href="">You can always take the Audit track</a>.</p>
+    <p class="tip">Missing something? <a href="">You can always Audit the course</a>.</p>
+  </section>
 
   <hr />
 
-  <h3>Steps to get Verified</h3>
+  <section class="steps">
+    <h3 class="title">Steps to get Verified</h3>
 
       <div class="next-step">
         <p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
       </div>
 
-  <h4>Step 1: Take Your Photo</h4>
+    <h4 class="step"><span class="number">1</span> Take Your Photo</h4>
     <p>To verify your identity, we need a clear and well-lit photo of your face to match it with your ID.</p>
 
-  <h4>Step 2: Take a photo of your ID</h4>
+    <h4 class="step"><span class="number">2</span>Take a photo of your ID</h4>
     <p>To verify your identity, we need a clear and well-lit photo of your ID to match it with your face.</p>
 
-  <h4>Step 3: Verify your submissions</h4>
+    <h4 class="step"><span class="number">3</span> Verify your submissions</h4>
     <p>Review your photos to verify they are correct.</p>
 
-  <h4>Step 4:  Submit payment</h4>
+    <h4 class="step"><span class="number">4</span> Submit payment</h4>
     <p>Pay for your course using a major credit of debit cards.</p>
     <ul>
       <li>Cards accepted:</li>
@@ -75,7 +78,7 @@
       <li>...need to list several more once firm</li>
     </ul>
 
-  <h4>You're Ready to Start Learning</h4>
+    <h4 class="step"><span class="number"><i class="icon-ok"></i></span>You're Ready to Start Learning</h4>
 
     <p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
 
@@ -83,7 +86,6 @@
       <div class="next-step">
         <p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p>
       </div>
-
     </section>
 
     <section class="support">
@@ -91,5 +93,7 @@
       <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
     </section>
 
+  </section>
+
 </div>
 </%block>