In AquaLogic Interaction (formerly called Plumtree Portal) version 6.0, all major and minor page elements are assigned either a CSS ID or class, or both. Uniquely identifiable objects (such as a specific page) are given unique ids. Identifiable classes of objects (such as pages in a specific community) are given classes. Each major region of the page is treated as a named box. For an introduction to the portal page, see Portal Layout.
These changes to the portal UI make it possible to modify page layout and design using the portal CSS template file. You can also use CSS to hide specific functionality exposed in the portal page. This page provides basic syntax rules and customization examples.
The portal CSS template file follows standard CSS syntax rules. For details on CSS, see http://www.w3.org/Style/CSS/. Below are some basic rules to keep in mind when modifying page styles.
To apply styles to a specific page, use the page ID. The example below sets the background color for the page with ID 1.
#pt-page-1
{
background-color: red;
}
You can change style settings for a specific user or type
of user (administrator or guest). The example below displays a special
header image on all browse-mode pages for guests. To modify a style for
a specific user, replace "guest" with the name of the appropriate
portal User object (e.g., .ptPageUser-mycompany domain ad\Joe Smith).
.ptPageUser-guest
#pt-header
{
background-image: url(/imageserver/plumtree/portal/private/img/example_guest.gif);
}
You can also change styles for specific communities. The example below sets the background color for the community with ID 200.
.ptCommunity-200
{
background-color: #AAA;
}
The portal CSS template file allows you to make a wide range of changes to the layout of the portal page. Below are some examples of layout customizations.
Modify page width: Specify whether a page spans the whole window or a portion of the window. This provides support for specific audiences such as those on smaller monitors. The example below limits the page to 800 x 200 pixels.
.portalContent
{
width: 800px;
height: 200px;
overflow: auto;
}
Change navigation tab location: Modify the location of the portal navigation tabs. You can apply changes to the entire portal, or to specific pages or groups of pages. The example below sets the tabs to appear in the center of the page header. (This page also has a custom header, described below.)
#pt-user-nav
{
display: inline;
margin-left: 15px;
margin-right: 15px;
}
The portal CSS template file allows you to make a wide range of style changes to the portal page. Below are some examples of style customizations.
Customize portal banners and footers: Change the look and feel for portal banners and footers. You can apply changes to the entire portal, or to specific pages or groups of pages. For example, the code below changes the footer height.
#pt-footer
{ height: 36px; }
The code below hides the footer on the page with ID 1.
#pt-page-1
#pt-footer { display: none; }
Change the background color for a specific page or community: Modify the background color for a single page or a specific community. The example below sets the background color for the community with ID 200.
.ptCommunity-200
{
background-color: #AAA;
}
Change the background for a specific user: Modify the background of the portal for a specific user or type of user (administrator or guest). The example below displays a background image on all browse-mode pages for Administrators.
.ptPageUser-administrator
{
background-image: url(/imageserver/plumtree/portal/private/img/example_administrator.gif);
}
Customize portal navigation tabs: Define the dimension of portal tabs.
#pt-user-nav
{ width: 25px; }
You can modify the style of form elements in the portal page, including text boxes and buttons.
Customize form elements: As with any CSS implementation, you can use the portal CSS template file to control text box sizing, button colors and fonts, and more.
Reference images: Reference images through CSS, including banner and branding images, and background images applied to page components. The example below displays a special header image on all browse-mode pages for guests.
.ptPageUser-guest
#pt-header
{
background-image: url(/imageserver/plumtree/portal/private/img/example_guest.gif);
}
The portal CSS template file allows you to remove specific functionality from the page for a group of users or for a specific page or community.
Note: Using CSS to hide functionality is not a secure means of preventing user-server interaction. All examples are for demonstration purposes only and are not meant to imply a complete solution to any overall security scheme.
Disable specific functionality: Turn off controls for a specific group of users or for a specific page or community. You can disable navigation, search, and a variety of links, including My Home, My Account, Login/Logout and Help. The example below disables search controls for all guests.
.ptPageUser-guest
#pt-search-controls
{
display: none;
}