Skip to main content
Kinetic Community

Creating the Look of Kinetic Survey

Now that you have added a few questions and other elements to your survey template, it is time to focus on formatting and presentation.  In this chapter you will learn about styling, CSS style, and how you can apply it to survey templates.  At the end of the chapter is another exercise where you will add styling to adjust the presentation of the survey template from the previous chapters.

What is CSS

Cascading Style Sheets (CSS) is a style sheet language used to describe the look and formatting of a document written in a markup language. Its most common application is to style web pages written in html and xhtml.

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

An important part of CSS is inheritance. All child elements inherit the styles applied to their parent elements, unless specified otherwise. For example, you can set the background color of a web page using the body tag in html, and then override that by setting a different background color for specific text elements.

CSS Formatting

The format of CSS is standardized and includes the following pieces:

Selector – this identifies the element (html or Kinetic Survey) or CSS class.

Declaration – consists of a property and a value identifying what to set and what the setting is.

Property – the style attribute you want to change.

Value – the value you want the property to have.

For example, set the background of a web page to blue:

body {
background-color: blue;
}

The selector is ‘body’ and is set outside the curly braces.

Each declaration must be inside the curly braces. CSS is not case-sensitive, but the text of the property and value must match exactly.

The property and the value are separated by a colon, and the value is followed by a semi-colon. By convention, each declaration is on its own line. This is done for readability.

To identify a CSS rule that is for a class or a particular element, look at the selector. If the rule is preceded by a period it is for a class. It it’s preceded by a pound sign it is for a particular id.

For example:

.myClass {
Background-color:blue;
}

 

#myElementID {
Background-color:red;
}

 

CSS Style Tab

Kinetic Request uses CSS to manage the layout of your request pages and their elements when displayed to a user.  Within Kinetic Request there are different levels including:

  • Template Level:  Styles applied here affect anything within your template and usually correspond to an HTML tag or CSS Class.
  • Page Level:  Styles applied here affect a specific page.
  • Element Level:  Styles applied here affect the specific element.

Every element, including pages and the survey template itself has a Style tab.

Example of a Style tab:

style tab question dialog.JPG

The style tab is similar for all elements. The CSS Style Class field lets you chose from both pre-defined style classes or enter in a class that you have defined on either the survey template style tab, an external style sheet, or elsewhere.

The table below the CSS Style Class field shows all the individual styles that have been created for this element. These styles are based on the ID of the element. If you select a style from the table, it will display in the read-only Properties field.

The Hide/Remove drop-down list gives you a shortcut to the most common styleing choice, and the Set to Read-Only check box is a similar short cut.

Example of the Edit Style dialog:

edit style dialog.JPG

 

Example of Style Helpers menu:

css helpers.JPG

You can select a property for your style from the drop-down list of CSS helpers. You are responsible for the value. 

To add a style class, you need to use the ‘Style’ tab for the survey template. The style tabs for the individual elements are all applied just to that specific element. 

 

Commonly Used CSS Style Classes

float:left;
width:110px;   (##% may also be used instead of ##px)
height:90px;
margin-top:5px;
margin-bottom:5px;
margin-right:5px;
margin-left:5px;

border-style:solid;
border-width:1px;

Activity

Complete Activity 4 - Add Styling to Your survey template