NIPO ODIN Version 5.17
CSS for Progress Bar
For the progress bar some additional tags are automatically generated within the <head> tag of the template. These consist of a single <style> tag with values for four individual CSS class-selectors. These selectors are odinprogress-completed, odinprogress-remaining, odinprogress-completed-vertical and odinprogress-remaining-vertical.
The following (partial) example shows the complete tag as it would be generated for an interview that has been completed for 41%.
Example of tag with ODIN Progress bar
<style>
<!--
.odinprogress-completed {
width: 41%;
}
.odinprogress-remaining {
width: 59%;
}
.odinprogress-completed-vertical {
height: 41%;
}
.odinprogress-remaining-vertical {
height: 59%;
}
-->
</style>
And this would apply to the following HTML code:
Result in HTML code
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td height="20" align="center"> <table border="1" cellspacing="0" cellpadding="0" width="25%" bgcolor="#c88a00">
<tr>
<td style="height: 20px;" class="odinprogress-completed" bgcolor="#666666"></td>
<td class="odinprogress-remaining" bgcolor="#f1b200"></td>
</tr>
</table>
</td>
</tr>
</table>
The selectors odinprogress-completed and odinprogress-remaining are meant to be used for horizontal progress indicators, while odinprogress-completed-vertical and odinprogress-remaining-vertical are meant for vertical indicators.
Progress bar selectors
| Selector
|
Description
|
odinprogress-completed
|
part of the progress bar that shows how much is already completed
|
odinprogress-completed-vertical
|
part of the progress bar that shows how much is already completed (vertical)
|
odinprogress-remaining
|
part of the progress bar that shows how much is remaining
|
odinprogress-remaining-vertical
|
part of the progress bar that shows how much is remaining (vertical)
|
|
