Portal UI Customization: Basic

Introduction: Using Adaptive Styles (CSS Customization)

AquaLogic Interaction (formerly called Plumtree Foundation) 6.0 provides a new approach to UI customization. The portal's CSS template file now contains a wide range of CSS classes and IDs to facilitate customization. The CSS template file is located in the PT_HOME\ptimages\tools\cssmill\templates directory in the ALI Image Service.

The structure of the portal page was redesigned to support customizations on global, per user, per community, per product, per page, and per portlet levels. All major and minor page elements are assigned either a CSS ID or class, or both. Uniquely identifiable objects, such as a single portlet, are given unique IDs. Identifiable classes of objects, such as portlets in the first column of a two-column page, are given classes. Each major region of the page is treated as a named box.

Note: CSS changes to the page are additive, not substitutive. The new CSS template is backwards compatible and supports most existing customizations. However, the underlying HTML structure of the page has changed dramatically in 6.0, so customizations based on version 5.x HTML might be invalid.

The pages that follow provide use cases and examples:

After modifying the CSS template file, you must run the CSS Mill to implement your changes. For information on CSS Mill batch files, see Modifying Portal Stylesheets.

Prerequisites:

Next: Customizing Portlet Content and Design