Data Collection Page and CSS Overview

The standard (Research Studio) HTML data collection page is setup as following:

The standard CSS style for this:

Available CSS classes

Class name

Description

Element

Layout and misc elements

mainContainer

Main content container

div

bannerContainer

Page banner container

div

banner

Page banner

img

contentContainer

Container for top right logo, progress bar and questions

div

buttonContainer

Button container

div

logo1Container

Top right logo container

div

logo2Container

Bottom right logo container

div

logo1

Top right logo

img

logo2

Bottom right logo

img

progressBarContainer

Progress bar container

div

progressBar

Progress bar

div

progressBarText

Progress bar text

div

languageLink

Language switcher

a

Questions and other page elements

cTable

Main question table

table

cRow

Question row

tr

cRowAlt

Question row - alternate

tr

cRowSelected

Question row - selected

tr

cRowAltSelected

Question row – alternate, selected

tr

cRowSubQuestion

Sub question row

tr

cCell

Default question cell

td

cCellQuestion

Question text cell

td

cCellSubQuestion

Cell in cRowSubQuestion

td

cCellHeader

Column header

td

cCellFirstHeader

First column header

td

cCellHeaderCode

Cell for grid codes

td

cCellF

Cell for numeric/time input

td

cCellRowText

Row text cell

td

cCellRowTextF

Row text cell for numeric/time

td

cRowBlockText

Header row text

td

cQuestionNumber

Question number

span

cQuestionText

Question text

span

cRowText

Row text

div or span

cValue

Row codes

span

cSay

Say element

span

cSayInline

Inline Say element

span

cDo

Do element

span

cDo

Inline Do element

span

exclusive

Exclusive answers

textarea or input[type=text]

cRadio

Radio button

input[type=radio]

cCheck

Checkbox

input[type=checkbox]

cFInput

Numeric input

input[type=text]

cHInput

Time input

input[type=text]

cError

Error messages

span

buttonPrevious

‘Previous’ button

input[type=button]

buttonNext

‘Next’ button

input[type=button]

buttonToCati

‘Cati’ button

input[type=button]

Default values for the CSS classes


/** - Data Collection specific classes - **/

/* Main page containers */

 

/* Main content container, element: div */

.mainContainer

{

    background-color: white;

}

 

/* Page banner container, element: div */

.bannerContainer

{

    width: 100%;

    padding-left: 12px;

    padding-right: 12px;

}

 

/* Content (top right logo, progress bar and question) container, element: div */

.contentContainer {

    width: 100%;

    background: transparent none repeat scroll 0%;

}

 

/* Button containter, element: div */

.buttonContainer {

    margin: auto;

    left: 0;

    right: 0;

    text-align: center;

    padding-bottom: 2px;

    padding-top: 6px;

}

 

.logo1Container

{

    width: 100%;

    text-align:right;

}

 

.logo2Container

{

    text-align: right;

    margin-right: 4px;

    padding-bottom: 4px;

    padding-top: 4px;

}

 

/* Page elemtents */

 

/* Main question table, element: table */

.cTable

{

    border: 2px solid black;

    margin-top: 8px;

    background-color:white;

    padding:0;

    border-collapse:collapse;

    border-spacing:2;

}

 

 

/* Question table row, element: tr */

.cRow

{

    border:0px;

    border-bottom: #cacaca 1px solid;

    background-color: white;

}

 

/* Question table row - alternate, element: tr */

.cRowAlt

{

    border:0px;

    border-bottom: #cacaca 1px solid;

    background-color: white;

}

 

/* Question table row - selected/focused, element: tr */

.cRowSelected

{

    background-color: white

}

 

/* Question table row - selected/focused, alternate, element: tr */

.cRowAltSelected

{

    background-color: white

}

 

/* Sub question row, element: tr */

.cRowSubQuestion

{

    border-top: 1px solid gray;

    border-left: 1px solid gray;

    width: 1%;

    border-bottom: 2px solid black;

}

 

/* Default question table cell, element: td */

.cCell

{

    border: 0px;

    border-bottom: 1px solid #cacaca;

    padding-left: 0px;

    white-space: nowrap;

    text-align: center;

}

 

/* Default question table cell (last cell in a row), element: td */

.cCell:last-child

{

    border-right: 2px solid black;

}

 

/* Cell containing question text, element: td */

.cCellQuestion

{

}

 

 

 

 

 

/* Cell in a sub question row, element: td */

.cCellSubQuestion

{

    padding: 4px;

    border-bottom: 2px solid black;

    border-right: 2px solid black;

}

 

/* Column header cell, element: td */

.cCellHeader

{

    padding: 4px;

    font-size: 12px;

    font-weight: normal;

    border-left: 2px solid black;

    color: black;

    background-color: white;

    padding-bottom: 2px;

    /* Allow words to break if needed */

    white-space: normal;

    /* Gives equal column widths */

    width: 5%;

}

 

/* The first column header cell (i.e. the row text column), element: td */

.cCellHeader:first-child

{

    padding: 4px;

    width:40%;

    min-width: 100px;

    border-right: 0px;

    border-left: 0px;

    font-weight: normal;

}

.cCellFirstHeader

{

    padding: 4px;

    width:40%;

    min-width: 100px;

    border-right: 0px;

    border-left: 0px;

    font-weight:normal;

}

 

/* The last column header cell, element: td */

.cCellHeader:last-child

{

    border-right: 2px solid black;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

/* Cell for grid codes, element: td */

.cCellHeaderCode

{

    text-align: center;

    font-size: 10px;

    font-weight: normal;

    color: black;   

    border-left: black 2px solid;

    border-bottom: black 2px solid;

    background-color: white;

    padding-top:0px;

    padding-bottom:2px;

}

/* Cell for grid codes, first column, element: td */

.cCellHeaderCode:first-child

{

    border-left: 0px;

}

 

/* Cell for grid codes, last column, element: td */

.cCellHeaderCode:last-child

{

    border-right: 2px solid black;

}

 

/* Cell for numeric and time input (f/h), element: td */

.cCellF

{

    border: 0px;

    border-bottom: #cacaca 1px solid;

    padding-left: 2px;

    white-space: nowrap;

}

 

/* Row text cell, element: td */

.cCellRowText

{

    border-right: 0px;

    border-left: 0px;

    border-bottom: 1px solid #cacaca;

    width: auto;

}

 

/* Row text cell, numeric and time (f/h), element: td */

.cCellRowTextF

{

    width: 100% !important;

}

 

/* Header row text, element: td */

.cRowBlockText

{

    border: 1px solid;

    font-size: 11pt;

    padding-top: 10px;

}

 

 

 

 

 

 

/* Question number, element: span */

.cQuestionNumber

{

    display: none; /* hidden */

    font-family: Arial, Helvetica, Verdana, sans-serif;

}

 

/* Question text, element: span */

.cQuestionText

{

    font-size: 12pt;

    color: black;

}

 

/* Row text, element: div and span */

.cRowText

{

    font-size: 10pt;

    font-weight: normal;

    color: black;

}

 

/* Row codes, element: span */

.cValue

{

    display:none; /* hidden */

    font-size: xx-small;

}

 

/* 'Say', element: span */

.cSay

{

    display: block;

    padding: 2px;

    margin: 0px;

}

 

/* Inline 'Say', element: span */

.cSayInline

{

}

 

/* 'Do', element: span */

.cDo

{

    padding: 2px;

    font-size: smaller;

    float: none;

    margin: 0px;

    color: black;

    font-style: italic;

    background-color: white

}

 

/* Inline 'Do', element: span */

.cDoInline

{

}

 

 

 

 

/* Exclusive answers, element: textarea or input[type=text] */

.exclusive

{

}

 

/* Radio button, element: input[type=radio]*/

.cRadio

{

}   

 

/* Checkbox, element: input[type=checkbox]*/

.cCheck

{

}   

 

/* Numeric input, element: input[type=text]*/

.cFInput

{

}   

 

/* Time button, element: input[type=text]*/

.cHInput

{

}   

 

/* Open ended input, element: input[type=text]*/

.cOInput

{

}   

 

/* Container for scrollable tables, element: div */

#container

{

    border: 1px solid black;

    overflow: scroll;

    width: 95%;

    scrollbar-shadow-color: red;

    scrollbar-arrow-color: red;

    scrollbar-darkshadow-color: red

}

 

/* Error messages, element: span */

.cError

{

    font-weight: bolder;

    font-size: 18px;

    color: red;

    display: inline;

}

 

/* 'Previous' button, element: input[type=button] */

.buttonPrevious     

{

    border-style: solid;

    border-color: rgb(102, 132, 189) rgb(0, 30, 87) rgb(0, 30, 87) rgb(102, 132, 189);

    border-width: 2px;

    color: rgb(255, 255, 255);

    background-color: rgb(0, 81, 138);

    width: 110px;

}

 

 

/* 'Next' button, element: input[type=button] */

.buttonNext     

{

    border-style: solid;

    border-color: rgb(102, 132, 189) rgb(0, 30, 87) rgb(0, 30, 87) rgb(102, 132, 189);

    border-width: 2px;

    color: rgb(255, 255, 255);

    background-color: rgb(0, 81, 138);

    width: 110px;

}

 

/* Progress bar container, element: div */

.progressBarContainer

{

    background-color: #dddddd;

    border: 0px;

    width: 200px;

    height: 20px;

    padding: 0px;

    text-align: center;

    margin: auto;

}     

 

/* Progress bar, element: div */

.progressBar

{

    background-color: #0000aa;

}          

 

/* Progress bar text, element: div */

.progressBarText

{

    color: white;

    font-family: "Lucida Grande", Arial, Helvetica, Verdana, sans-serif;

    font-size: 12px;

    line-height: 20px;

    text-align: center;

    margin-left: auto;

}

 

/* Top right logo, element: image */

.logo1

{

}

 

/* Bottom right logo, element: image (span if an image was not specified) */

.logo2

{

}

 

/* Page banner, element: image */

.banner

{

}

 

/* Language selector, element: a */

.languageLink

{

    margin-right: 5px;

    font-size: 10pt;

}

Still need help? Contact Us Contact Us