Skip to main content
Kinetic Community

Style Tab

Applying CSS Styles to a survey template.

Using CSS in Kinetic Request

 

Kinetic Survey uses Cascading Style Sheets (CSS) to manage the layout of your survey pages and their elements when displayed to a user.  CSS allows you to manage styles at 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.

A basic concept of CSS is that elements “inherit” the styles of anything applied at a higher level.  That way, survey authors can create default styles at the template level and then more specific styling at each element level, if needed. 

There are no default styles shipped with this version of Kinetic Survey. Older versions (pre v5.0) included default class and HTML styles.

Survey authors are encouraged to create their own CSS Style Sheets, and then attach them either directly to the survey template, or include them in the displayPage.jsp file. 

Using the Style Tab

From the Style tab of the Service Catalog Console view or create any of the styles applied to your template.

NOTE: This is just one way to add style (CSS) to your survey template. You can also attach external files either on the Advanced tab CustomHeaderContent field or define them on the jsp page that is used to present the request.

Example of the Style Tab:

 

 

The layout and functionality of the style tab is very similar to the funtionality for questions and other elements of a survey template. The difference between those style tabs and the style tab is the application of the styles.

Styles created on the style tab of the survey template are going to be either Combined, CSS Class or HTML Tag styles. Element Id styles cannot be created.

CSS Classes are created on this tab, but the class names must be applied to either questions or other elements (CSS Style Class field). If you are creating a style for a class name that is added automatically, you do not need to add your class name.

HTML Tag and Combined styles could be applied, depending on what is already included in your survey template.