8. Creating the Look of Kinetic Request

Now that you have added a few questions and other elements to your service item, it is time to focus on formatting and presentation. In this chapter you will learn about styling (CSS), and how you can apply it to your service items. At the end of the chapter is another exercise where you will add styling to adjust the presentation of the service item 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 Request) 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 service item itself has a Style tab.

Example of a Style tab:

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 service item 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:

Example of Style Helpers menu:

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 service item. The style tabs for the individual elements are all applied just to that specific element.

Real CSS Usage in Request

Normally, all of the CSS in a service catalog is handled by the theme. Use of the dialogs above is for exceptions to a theme. It is much more common to create questions without any styling and then just apply the theme afterward by selecting a specific jsp page.