No problem Tom.....
Here it is……
HTML cell….
<style>
.wizard a {
padding: 12px 12px 13px 12px;
margin-right:5px;
background:#efefef;
position:relative;
display:inline-block;
font-family: Arial;
}
.wizard a:before {
width:0px;
height:0px;
border-top: 20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #ffffff;
position: absolute; content: ""; top: 0; left: 0;
}
.wizard a:after {
width:0px;
height:0px;
border-top:
20px inset transparent;
border-bottom: 20px inset transparent;
border-left: 20px solid #efefef;
position: absolute; content: ""; top: 0; right: -20px; z-index:2;
}
.wizard a:first-child:before {
border:none;
}
.wizard a:last-child:after {
border:none;
}
.wizard a:first-child {
-moz-border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.wizard a:last-child {
-moz-border-radius: 0 4px 4px 0;
-webkit-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.wizard .badge {
margin:0 5px 0 18px;
position:relative; top:-1px;
font-family: Arial;
}
.wizard a:first-child .badge {
margin-left:0;
font-family: Arial;
}
.wizard .current {
background:#007ACC;
color:#fff;
font-family: Arial;
}
.wizard .current:after {
border-left-color:#007ACC;
}
.wizard a:hover { text-decoration: none; }
.wizard a:not(.current):hover { color:#08C; }
.wizard .done {
background:#e1fcc9;
color:#000;
font-family: Arial;
}
.wizard .done:after {
border-left-color:#e1fcc9;
}
</style>
<div class="wizard">
<a class=<<Booking.Progress1>>><span class="badge badge-inverse">1.</span>Request Flight Solutions</a>
<a class=<<Booking.Progress2>>><span class="badge badge-inverse">2.</span>Provide Solutions</a>
<a class=<<Booking.Progress3>>><span class="badge badge-inverse">3.</span>Select Solution</a>
<a class=<<Booking.Progress4>>><span class="badge badge-inverse">4.</span>Reserve Solution</a>
<a class=<<Booking.Progress5>>><span class="badge badge-inverse">5.</span>Approve Flights</a>
<a class=<<Booking.Progress6>>><span class="badge badge-inverse">6.</span>Issue Ticket</a>
<a class=<<Booking.Progress7>>><span class="badge badge-inverse">7.</span>Complete</a>
</div>
<<Booking.ProgressX>> are the attributes in the Booking BO and I use a task to set them to either…
new…..default colouring grey
current…… Dark Blue
done……… Light Green