Skip to main content
Kinetic Community

Styles

Styles can be added to service items and page, section, text, and question elements with the style function. The style function’s behavior is different depending on the context it is used in.

Service Item Styles

The style function, when called within a code block passed to the service_item function, takes two string arguments. The first argument is the style selector, and the second argument is a string of CSS properties.

Service Item Styles Flags

The :css_class flag configures the style type to CSS Class, the style properties will be applied to anything within the service item that has a class matching the specified style selector.

The :html_tag flag configures the style type to HTML Tag, the style properties will be applied to anything within the service item that has an HTML tag matching the specified style selector.

The :combined flag configures the style type to Combined, the style properties will be applied to anything within the service item that has a combination of tag and class matching the specified style selector .

Note that one of the service item style flags is required for all service item styles.

Creating Service Item Styles

style "div", "background-color:blue;", :html_tag

The style above will apply the background color blue property to all div elements in the service item.

style ".test", "color:red;", :css_class

The style above will apply the color red property to all elements in the service item with class test.

style "div.test", "color:green;", :combined

The style above will apply the color green property to all div elements in the service item with class test.

Page Styles

The style function, when called within a code block passed to the page function, takes two string arguments. The first argument is the style selector, and the second argument is a string of CSS properties.

Page Styles Flags

The :html_id flag configures the style type to HTML ID, the style properties will be applied to the entire page element. If this flag is used the first argument of the style function that represents the style selector should be left blank (see example below).

The :css_class flag configures the style type to CSS Class, the style properties will be applied to anything within the page that has a class matching the specified style selector.

The :html_tag flag configures the style type to HTML Tag, the style properties will be applied to anything within the page that has an HTML tag matching the specified style selector.

The :combined flag configures the style type to Combined, the style properties will be applied to anything within the page that has a combination of tag and class matching the specified style selector .

Note that one of the page style flags is required for all page styles.

Creating Page Styles

style "div", "background-color:blue;", :html_tag

The style above will apply the background color blue property to all div elements on the page.

style ".test", "color:red;", :css_class

The style above will apply the color red property to all elements on the page with the class test.

style "div.test", "color:green;", :combined

The style above will apply the color green property to all div elements on the page with the class test.

style "", "background-color:purple;", :html_id

The style above will apply the background color purple property to the entire page element. Because the :html_id flag is used, the style selector argument is left blank (the style property will always be applied to the entire page element).

SECTION/TEXT STYLES

The style function, when called within a code block passed to the section and text functions, takes one string argument. The argument is a string of CSS properties to be applied to the section or text element.

CREATING SECTION/TEXT STYLES

style "background-color:blue;"

The style above will apply the background color blue property to the section or text element.

QUESTION STYLES

The style function, when called within the code block passed to the question function, takes one string argument. The argument is a string of CSS properties to be applied to the question element.

QUESTION STYLES FLAGS

The :all flag configures the style selector to include the entire question element.

The :answer_label flag configures the style selector to apply only to the answer label of the question element.

The :answer_value flag configures the style selector to apply only to the answer value of the question element.

The :question_label flag configures the style selector to apply only to the question label of the question element.

Note that one of the question style flags is required for all question styles.

Creating Question Styles

style "background-color:#888888;", :all

The style above applies the background color dark grey property to the entire question element.

style "color:#eeeeee; font-weight:bold;", :question_label

The style above applies the font color light grey and font weight bold properties to the question label of the question element.

style "background-color:#cccccc;", :answer_label

The style above applies the background color light grey property to the answer label of the question element.

style "color:red;", :answer_value

The style above applies the font color red property to the answer value of the question element

The image above displays these styles applied to a free text question element. The dark grey area with light grey text is the question label, the light grey area is the answer label, the input box is the answer value, and the entire area is the entire question layer.