Pollograph Custom CSS Layout Reference (version 3, dated 23-01-2009)
This document describes the CSS IDs and classes required to customise a Pollograph survey. For more information on writing custom CSS files, visit: http://www.pollograph.com/kb/docs/writing-custom-css-templates/
<div id="header">
<div id="logo"><img YOUR LOGO><div>
<h1>Your survey title</h1>
</div>
<div id="wrapper">
<div id="container">
<div class="questionItem">
<div class="multipleChoice">
<h2>Multiple Choice Question</h2>
<table><tr>
<td class="multipleChoiceInput"><input class="inputBox"></td>
<td class="multipleChoiceText">OPTION TEXT</td>
</tr></table>
<div class="alertForMandatory">MANDATORY QUESTION ALERT</div>
</div>
</div>
<div class="questionItem">
<div class="matrixChoice">
<h2>Matrix Choice Question</h2>
<table><tr>
<td class="matrixChoiceEmpty"></td>
<td class="matrixChoiceTop">TOP OPTION</td>
<td class="matrixChoiceSide">SIDE OPTION</td>
<td class="matrixChoiceInput"><input class="inputBox"></td>
</tr></table>
</div>
</div>
<div class="questionItem">
<div class="matrixDropdown">
<h2>Matrix Dropdown Question</h2>
<table><tr>
<td class="matrixDropdownEmpty"></td>
<td class="matrixDropdownTop">TOP OPTION</td>
<td class="matrixDropdownSide">SIDE OPTION</td>
<td class="matrixDropdownInput"><select class="inputSelect"></td>
</tr></table>
</div>
</div>
<div class="questionItem">
<div class="sentenceResponse">
<h2>Sentence Response Question</h2>
<table><tr>
<td class="sentenceText">SENTENCE TEXT</td>
<td class="sentenceInput"><input class="inputLine"></td>
</tr></table>
</div>
</div>
<div class="questionItem">
<h2>Free Response Question</h2>
<div class="freeResponse"><textarea class="inputTextarea"></textarea></div>
</div>
<div class="questionItem">
<div class="textHeader">YOUR SECTION HEADER</div>
<div class="textHTML">YOUR HTML TEXT</div>
</div>
<div id="buttons">
<table><tr>
<td><input class="buttonsPrev"></td>
<td><input class="buttonsNext"></td>
<td><input class="buttonsSubmit"></td>
</tr></table>
</div>
<div id="progressBar"></div>
<strong class="progressBarText">Page: 1 of 10</strong>
<strong class="progressBarGraph style="width:10%;"></strong>
</div>
</div>
</div>
<div id="footer">POLLOGRAPH FOOTER</div>