Overview
CSS Classes can be used to change the layout of either a variable or an entire variable group. In order to create custom classes, knowledge of CSS is required. However some common CSS classes are defined below and can be used as is or easily modfied.
Content
A CSS class is defined on the Global Code tab of the Project Update page in the Styles (Css) section. The text in the Content column of the table below can be pasted into the Styles (Css) section. The CSS Class can then be used within the project at the Variable or Variable Group level. If using any of the examples below, the value in the CSS Class Name column is specifed in the variable or variable group CSS Class field.
Examples:
...
CSS Class Name
...
Description
...
Content
...
NoAnswer
...
Hides the answer for a variable.
Use this CSS Class when creating a variable
that is a note or instructions.
...
...
RedBackground
Displays a red background for the variable.
| Tip |
|---|
to create a CSS class with a different color background you would change the CSS Class name and the hexadecimal value to the desired color |
...
.RedBackground
{
background: #FF0000;
}
...
...
...
| Wiki Markup |
|---|
h3. Overview
CSS Classes can be used to change the layout of either a variable or an entire variable group. In order to create custom classes, knowledge of CSS is required. However some common CSS classes are defined below and can be used as is or easily modfied.
\\
h3. Content
A CSS class is defined on the *Global Code* tab of the _Project Update_ page in the *Styles (Css)* section. The text in the *Content* column of the table below can be pasted into the *Styles (Css)* section. The CSS Class can then be used within the project at the [Variable|STX:Variable Update (Layout)] or [Variable Group |STX:Layout (Variable Group)]level. If using any of the examples below, the value in the *CSS Class Name* column is specifed in the variable or variable group CSS Class field.
\\
Examples:
\\
|| CSS Class Name || Description || Content ||
| NoAnswer | Hides the answer for a variable. \\
Use this CSS Class when creating a variable \\
that is a note or instructions. | .NoAnswer .AnswerPanel\\
{\\
display: none;\\
} |
| RedBackground | Displays a red background for the variable. {tip}to create a CSS class with a different color background you would change the CSS Class name and the hexadecimal value to the desired color{tip}\\ | .RedBackground \\
{ \\
background: #FF0000; \\
} |
| | | .RedBackground \\
{ \\
background: #FF0000; \\
} | |