Customizing style sheets for web services

When you want to customize the appearance of Announcements, KB Articles, or Service Catalog Items in the Web App or the Self Service Portal, 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.

In this situation, you must precede each your custom style definition with a special parent selector specified for the style sheet in question (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 Preview Pane: #preview

  • For Knowledge Base Articles: #kbarticle

  • For Service Catalog Items: #servicecatalog

To specify the 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:

#announcement p
{
font-family: Arial, Tahoma, Helvetica;
}

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