Style Tab

Using the Style Tab

The default for styling service items is CSS. To let you add either specific item or class styles to your service item use the Style tab.

Example of Blank Style:

CSS Style Class lets you either add your own CSS class name (seperated by a space), or select from the drop-down list.

The drop-down list will start with any CSS classes that have been applied to any service item ion the current service catalog and all the default classes that the application adds. As you add your own classes, they are added to the drop-down list.

Hide/Remove lets you accomplish the most common action styling is used for with questions, hiding or removing. Select the option from the drop-down list, and the html of the question will be updated. You can use events to Show/Insert the question.

Set to Read-Only sets the answer to Read-Only

The table shows any applied ID styles with the type.

Properties field shows the specifics of the style selected from the table.

Example of table and property:

Add, Modify, and Delete buttons let you create and maintain css for the specific elements

Clicking on Add presents the following dialog:

Style Type is set to HTML ID when you add a style directly from the element, as opposed to the Combined, Class or HTML Tag options from the Style tab on the entire service item.

Style Selector has the following options

All - applies the style to the entire question - known as QLAYER

Answer Label(s) - applies the style to the individual labels for option questions like radio buttons - known as QANSWER

Answer Value - applies the style to the input of the answer, commonly the answer to free text - known as SRVQSTN

Question Label - applies the style to the label of the question - known as QLABEL

Style Property contains the actual style declaration, property and value pair. For example, float:left; You do not need to add the curly brackets before and after the declarations. The application will add them for you.