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.
Example of CSS Classes:
Here is an article with all the default classes.
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.
Helpers drop-down list provides a list of selected CSS properties.
Example of Modify dialog with style:
This style will make the question label bold.