Chapter 1. ACS Administrator's guide

1.1. Using Cascading Style Sheets with Portal

Table of Contents
1.1.1. Tips for Developers
1.1.2. Tips for Graphic Designers

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:

1.1.1. Tips for Developers

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.

1.1.2. Tips for Graphic Designers

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/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.)

Ian Baker

$Id: acs-admin-guide.html,v 1.1 2002/07/09 17:35:10 rmello Exp $