Chapter 8 Customizing the Community Sample User Interface

This chapter contains the following:

Overview of the Community Sample Desktop User Interface

This section contains the following:

Introduction to the Community Sample

The Community Sample includes a display profile loaded at install time that contains the definitions of containers, channels, and providers used by the sample. The sample relies on the display profile's aggregation methods (see SJS Tech Ref Guide for more information) and the community templates for displaying communities and their contained portlets.

The display profile for the sample is a set of containers which handle basic aggregation and display operations. After installation, directories and files effecting the user interface of the sample portal can be found in the PortalServer-DataDir/portals/portal-ID/desktop/community_sample directory.

The Community Sample relies on a combination of two stylesheets (see Stylesheets for the Community Sample) which define the fonts, colors, and images used for its user interface. There are intentionally no conflicts in the selection of these two stylesheets.

Customizable Files

The Community Sample uses the following to render the sample portal user interface:

JSP and HTML Files

header.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory contains the header display for all sample containers. It controls user interface for the sample via inclusion of the stylesheets.
footer.html: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory is included by containers (CommunityParentContainer) and closes HTML tags (namely, body and html tags) as well as displays some footer information.
datetime.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory is included by the header.jsp file and provides data/time info based on the user's time zone setting. For anonymous user, the default server time zone is used. There is currently no user interface style in this file.
breadcrumb.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory is included by the header.jsp and provides a rudimentary breadcrumb used in the sample. The user interface in this file is controlled via desktop.css file.
singlePreferenceMenubar.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory provides menubar used by JSPDynamicSingleContainer.
singlePreferenceHeader.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory provides header used by JSPDynamicSingleContainer.
portletEdit.jsp: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory wraps portlet and Provider content in an edit page.

JavaScript and Tag Libraries

openURLInParent.js: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory provides JavaScript for popup and detachment of channels in their own browser window.
tld/portletSetupTags.tld: This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ provides single tag to include Sun Java^TM Web User Interface Components theme support for stylesheet and JavaScript functionality.

Container Provider, Channel Provider, and Channel Templates

PagePreferencesContainer: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) contains the files that allows a user to change the content and layout of portlets contained in an available container or community template container for which the isEditable property in the display profile is true. If true, the header.jsp file includes a link to Page Preferences in the breadcrumb area at right.
AccountPreferencesContainer: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) contains the files used for allowing a user to change account preferences such as name, password, timezone, and so on.
CommunityParentContainer: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) is an instance of JSPSingleContainerProvider and includes the default channel defined in the portal server console for the sample.
CommunityAnonymousContainer: This container includes a set of channels representing the anonymous user's sample display and it is an instance of the JSPTableContainerProvider.
CommunityHomeContainer: This container includes the set of channels representing the logged in user's sample display and it is an instance of the JSPTableContainerProvider.
JSPEditContainer: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) contains a version of the JSPEditContainer's default files with different styles matching the overall style of the Community Sample.
Login: This channel is included in the CommunityAnonymousContainer's display profile definition and provides the user with the ability to login to the sample or create a new account.
error: This directory includes error templates. Style for these file's user interface is defined in the two stylesheets mentioned above.
JSPTableContainerProvider: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) contains a version of the JSPTableContainer's default files with different styles matching the overall style of the Community Sample.
JSPMenuContainerProvider: This directory (under PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory) provides for left-side navigation layout.
JSPDynamicSingleContainer: This directory is under PortalServer-DataDir/portals/portal-ID/desktop/community_sample directory.
DiscussionProvider: Provides for Community look and feel changes for this provider.
SearchProvider: Provides for Community look and feel changes for this provider.

Properties Files

message.properties

This file in PortalServer-DataDir/portals/portal-ID/desktop/community_sample/ directory provides properties used by the template files in the error directory. The properties in this file are swapped by the error templates in the PortalServer-DataDir/portals/portal-ID/desktop/community_sample/error directory at runtime.

CommunitySamplePortal.properties

This file in PortalServer-DataDir/portals/portal-ID/desktop/classes/ directory provides properties for the Community Sample portal. These properties are used by the Community Sample portal JSPs. This file includes properties for the Community Sample portal desktop:

Header, Masthead, Breadcrumb, and footer
Page Preferences link and Account Settings link
Login channel
channelMenubar and popupChannelMenubar
communityParentContainer/single.jsp file
JSPEditContainer/edit.jsp file
JSPMenuContainer/menumain.jsp file

If you modify this file, you must restart the server for the changes to take effect.

Stylesheets for the Community Sample

defaulttheme.jar

This JAR file includes the stylesheet that controls many defaults properties for the Community Sample including: font, colors, and the like not found in the desktop.css file.

For more information on the Sun Java Web User Interface Components stylesheet, see Theme for Sun Java Web User Interface Components Tech Note.

desktop.css

Augmentation of style is included for other components via an additional stylesheet located with the rest of the sample's web-src in the web container's web source directory under PortalServer-DataDir/portals/portal-ID/web-src/community/css directory. This stylesheet is not browser specific and modifications to this file only effects the sample portal's overall appearance and that of the containers used.

Sample Customizations

This section includes the following:

To Use a Custom Stylesheet

Steps

Rename the desktop.css file to desktop.css.orig.

For example, type mv desktop.css desktop.css.orig.

Copy your custom stylesheet (CSS file) to this directory or modify the desktop.css file.

To Change the Logo and Title Appearance in the Header

Steps

Log in to the Portal Server host and edit the desktop.css file in the PortalServer-DataDir/portals/portal-ID/web-src/community/css directory.

Modify the:

#header #logo

To modify the logo.

#header #title

To modify the title in the header.