Example CSS Classes

Owned by Mary Lukowski
Last updated: Mar 07, 2013 by john PutzkeVersion comment
3 min read

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. 

The CSS class names are case-sensitive.  The name entered in the CSS Class field for the variable or variable group must match the case of the CSS class name entered in the global code


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.

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; 
}

WhiteFont

Displays the text with a white font

.WhiteFont
{ 
  color: #FFFFFF;
}

Font12

Displays the text with 12point font-size

.Font12
{
  font-size: 12pt;
}

SmallerPickListFont10

Reduces the size of the text in a drop-down pick list variable

.SmallerPickListFont10 .AnswerPanel select
{
   font-size: 10px;
}

RadioButtonHeight30

Increases the vertical spacing between radio buttons for a Vertical Radio Button type variable

.RadioButtonHeight30 .RadioButton
{
   height: 30px;
}

RadioButtonWidth30

Increases the horizontal spacing between radio buttons for a Horizontal Radio Button type variable

.RadioButtonWidth30 .RadioButton
{
  width: 25px;
}

NoPaddingVar

Removes all the built-in padding around a variable

This CSS Class is only valid at the variable level

.NoPaddingVar
{
   padding: 0;
}

NoPaddingVarRight

Removes all the padding on the right side of the variable.  This can be useful if you have two variables side-by-side and want them closer.

.NoPaddingVarRight
{
  padding-right: 0;
}

TopMargin10

When added to a variable's CSS class, adds a 10px space at the top of the variable.
When added to a variable group's CSS class, adds a 10px space at the top of the variable group

.TopMargin10
{
  margin-top: 10px;
}

BottomMargin10

When added to a variable's CSS class, adds a 10px space at the bottom of the variable.
When added to a variable group's CSS class, adds a 10px space at the bottom of the variable group

.BottomMargin10
{
  margin-bottom: 10px;
}

NoPaddingVG

Removes all the built-in padding around all the variables in a variable group

This CSS Class is only valid at the variable group level


.NoPaddingVG .VariablePanel
{
   padding: 0;
}

LessPaddingVG

Reduces the amount of padding around a variable 

This CSS Class is only valid at the variable group level

.LessPaddingVG .VariablePanel
{
   padding: 2px;
}

MatrixPromptHeader

Forces the prompt width specified for all variable groups in the project with a matrix layout

.MatrixPromptHeader
{
   width: 100px;
}

MyMatrixPrompt

When added to a variable group's CSS Class, forces the prompt width to the specified width

.MyMatrixPrompt .PromptHeader
{  
   width: 100px;
}

MyMatrixAnswer

When added to a variable group's CSS Class, forces the answer width to the specified width

.MyMatrixAnswer .ValueHeader
{
   width: 100px;
}

CenterHeadingX
LeftHeadingX
RightHeadingX

Will either left, center, or right justify prompt text.  Replace "X" with a number to indicate font size, 1 = smallest and as you increase the number the font will get bigger