Portal has been designed to allow painless customization of its interface and look-and-feel using CSS. This document explains how. You would be wise to read it if you are: a graphic designer or administrator, trying to customize the look of your site a developer, implementing datasources for a module If you're developing a datasource for Portal that produces any HTML at all, and you don't want your users to hate you forever, you'd be wise to follow these guidelines. You'll help to maintain consistency from one part of a portal to the next, and you'll increase customizability and maintainability. Hey, it's even easy to do: Never, ever use the <FONT> tag. There are better, more consistent ways to change the way your text looks. If you use <FONT>, all you'll do is force the graphic designer to open up your code and fix it when s/he decides not to use your choice of font and/or size. To make text larger, use <H1> - <H5>. To make text smaller, use <div class=portal_smaller> <div class=portal_smaller> and <div class=portal_smallest> Don't specify styles in your HTML unless you have a really good reason (for example, removing the underline from a link). Generally, it's a graphic design decision, and should be made globally for an entire portal. Use Portal's semantically defined classes for common types of content (for example, new content). A complete list is below. You can create a stylesheet to change the look of an entire portal, all at once. If you're not familiar with Cascading Style Sheets, check out this CSS Tutorial. Each package instance may reference its own stylesheet, using the css_path server parameter. An example stylesheet is distributed with portal, and should be available at /packages/portal/www/example.css. A list of the various classes and what they do: Tags/Classes What do they do? div.portal_new Changes the text style for "new" items. What's considered "new" is up to the datasource author. By default, new items are underlined. div.portal_alert Text style for alerts and errors. By default, alert text is bold and colored red. p.portal_small p.portal_smaller p.portal_smallest Smaller text (make text larger with <H1>, <H2>, etc.) td.portal_header td.portal_body The text style for the element header (the "title bar" like area) and body (the rest). Ian Baker $Id: css.xml,v 1.1 2002/07/09 17:35:10 rmello Exp $