Customizing style sheets for web and mobile apps

Updated in 2022.1

When you want to customize the appearance of Announcements, KB Articles, or Service Catalog Items in web or mobile applications, you should keep in mind that your CSS style definitions can affect not only the user content (e.g. Announcement header and text), but the entire web page as well. Typically, you need to apply your custom styles to the user content only, leaving the rest of web page elements intact. This article describes how to apply your custom CSS properly.

In this situation, you must precede each your custom style definition with a special parent selector specified for the style sheet in question. For example, use #announcement for the Announcement style sheet. That parent selector ensures that your style definition applies only to the user content, not to the entire web page. All default style sheets contain those parent selectors.

See the parent selectors for different objects:

• For Announcements: #announcement

• For Preview Pane: #preview

• For Knowledge Base Articles: #kbarticle

• For Service Catalog Items: #servicecatalog

To specify a style for a particular web page element, add the element's code after the selector. For example, to set the font for Announcement paragraphs <p>, use the following code:

/* Paragraph */

#announcement p

{

	font-family: Arial, Tahoma, Helvetica;

	font-size: 9pt;

}

In the same way, you can specify styles for other elements: headings, lists, tables, etc.

Related Information:

Customizing style sheets