Using Cascading Style Sheets with PortalPortal 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 sitea developer,
implementing datasources for a moduleTips for DevelopersIf 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.Tips for Graphic DesignersYou 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/ClassesWhat do they do?div.portal_newChanges the text style for "new" items. What's considered "new"
is up to the datasource author. By default, new items are
underlined.div.portal_alertText style for alerts and errors. By default, alert text is
bold and colored red.p.portal_small p.portal_smaller p.portal_smallestSmaller text (make text larger with <H1>, <H2>,
etc.)td.portal_header td.portal_bodyThe text style for the element header (the "title
bar" like area) and body (the rest).Ian Baker
$Id: css.xml,v 1.1.1.1 2002/07/09 17:35:10 rmello Exp $