Customizing Style Sheets for Portals

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

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

For Service Catalog Items:#servicecatalog

For Preview Pane:#preview

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, here is how you can set the font for Announcement paragraphs (p):

#announcement p


font-family: Arial, Tahoma, Helvetica;


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