Customizing style sheets for web and mobile apps

Updated in 2022.1

When you want to customize the appearance of Announcements or KB Articles in the Web App, Self Service Portal, or Alloy mobile apps, 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 styles to the user content only, leaving other web page elements intact.

For this reason, you must precede each your custom style definition with a special parent selector specified for the style sheet (e.g. #announcement for the Announcement style sheet). This 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 Knowledge Base Articles: #kbarticle

To customize the style of a web page element (paragraph, heading, list, etc.) for a specific object class, add the element's tag after the corresponding parent selector. For example, this is how to set the style for Announcement paragraphs: #announcement p

Similarly, you can specify the style for other elements: headings, lists, tables, etc.