[waylandprod]

What we ended up doing was just adding this to our header

<div class="roomNumber">
<div class="roomslot" id="slot1"></div>
<div class="roomslot" id="slot2"></div>
<div class="roomslot" id="slot3"></div>
<div class="roomslot" id="slot4"></div>
<div class="roomslot" id="slot5"></div>

<script>
roomNumber="{vb:raw bbuserinfo.userid}";
slot1 = ('    ' + roomNumber).slice(-5,-4);
slot2 = ('    ' + roomNumber).slice(-4,-3);
slot3 = ('    ' + roomNumber).slice(-3,-2);
slot4 = ('    ' + roomNumber).slice(-2,-1);
slot5 = ('    ' + roomNumber).slice(-1);

document.getElementById('slot1').className += ' num'+slot1;
document.getElementById('slot2').className += ' num'+slot2;
document.getElementById('slot3').className += ' num'+slot3;
document.getElementById('slot4').className += ' num'+slot4;
document.getElementById('slot5').className += ' num'+slot5;
</script>
</div>

Then we have some CSS that displays the proper image per