WebSphere Portal website Modification

WebSphere Portal provides a pre-defined portal page that is available immediately after the product is installed and started. You can use the web-based user interface of the portal to change the appearance and feelings to switch to other predefined visual elements and la s provided by WebSphere Portal. The following topic describes how to modify the portal page and create your own visual elements and layout for the portal site.

• Clustering concept
• Change the appearance and feeling
• Portal website Style
• Change company information
• Change portal page help

Clustering concept

A portal should provide users with consistent views on portal applications, and allow users to define specific application sets, which are provided to users in a single context. Depending on the user's device, the provision of this application assembly must be changed to meet the device's requirements. For example, consider a group of apps that contain news, stocks, weather, and search, it must be provided to conventional phones that use sound interaction, WML devices with limited monitors and keyboards, or browser-based PCs. Duplicate aggregation tasks due to each request from the device are:

1. Collect information about users, devices, and languages you select.
2. Select the active Portlet from the application assembly that the user has access.
3. The aggregation activity Portlet outputs to consistent and usable displays.

Once the active page is determined, the layout of this page must be used to aggregate the content of the defined application, arrange the output and integrate each content to the complete page. WebSphere Portal provides full dynamic aggregation of pages with page descriptors in the portal database.

The page components are provided using JSP, images, style sheets, and other resources. These resources are located in the file system in the path naming convention. This Convention is used by the Portal Server to locate the correct resources of the client. It is necessary to understand the location of these resources before designing your own appearances and feelings, layout, or supporting other Markup languages or clients.

Theme and appearance

The Portal Server Page is defined by the web designer or administrator of the portal website.AppearanceAndTopicDisplayed. The theme represents the overall appearance and feeling of the portal, including the color and font. For example, a topic is also used in the navigation bar to select the correct color image on the tab corner. The topic also contains JSP resources used to define the layout of portal components. WebSphere Portal provides the following topics.

Default topic
Scientific topic
Project subject
Financial subject
Company theme

WebSphere Portal also contains a topic called 'manager. This topic is associated with the 'expression' appearance of the Portlet that provides a title bar. The management subject and "no appearance" appearances are provided for the management Portlet and should not be used in other locations or Portlet in the portal site.

Appearance indicates the border that is rendered around a single Portlet. Use the topic name to select the image that matches the topic color. When all tags have an appearance, only html provides multiple appearances. WebSphere Portal provides the following appearances.

Album:	Clear:
Diamonds:	Fade:
Hint:	Noborder:
Noskin:	Outline:
Pinstripe:	Shadow:
Wave:

Search Order of portal website resources

During aggregation, the portal server starts searching from the most specific sub-directories, and then searches for topics and appearances in more general and advanced directories.

Location in the/themes directory	Position in the/skins directory
/Locale_country /Locale /Client /Theme_name /Markup	/Locale_country /Locale /Client /Skin_name /Markup

For example, obtain a request from a client that uses Internet Explorer version 5 with a language environment set to en_us and the user's appearance is set to "shadow. The aggregation component of the Portal Server searches for files in the following order:Control. jsp.

  1.  /skins/html/Shadow/ie5/en_US/Control.jsp 2.  /skins/html/Shadow/ie5/en/Control.jsp 3.  /skins/html/Shadow/ie5/Control.jsp 4.  /skins/html/Shadow/en_US/Control.jsp 5.  /skins/html/Shadow/en/Control.jsp 6.  /skins/html/Shadow/Control.jsp 7.  /skins/html/ie5/en_US/Control.jsp 8.  /skins/html/ie5/en/Control.jsp 9.  /skins/html/ie5/Control.jsp10.  /skins/html/en_US/Control.jsp11.  /skins/html/en/Control.jsp12.  /skins/html/Control.jsp13.  /skins/Control.jsp    

In this example../Ie5/en_usThe file is not found in the directory.../Ie5/ENDirectory. The Portal Server continues to move through this hierarchy until the file is found. If this file is required, it should exist at least in/SkinsOr/ThemesDirectory, the more specific version of the file is placed in the appropriate subdirectory.

Change the appearance and feeling

Understanding the order in which the Portal Server searches resources allows you to create your own themes, appearances, and la S. In addition, you can create support for new clients that use the portal site, or even set support for the new markup language. Before starting any tasks described in this section, make sure that you have read the clustering concepts.

• Define your own theme
• Define your own appearance
• Define support for new clients
• Define support for the new Markup Language

Define your own theme

Define your own theme for useWp_root/APP/WPS. Ear/WPS. War/themes/Markup/Create Sub-directories for Topic names and support resources in the directory. HTML is the unique tag provided by WebSphere Portal. It supports multiple topics. The following steps show how to use an existing topic to create your own HTML-based topic.

1. Use the new topic name to create a new directory, for example,Wp_root/APP/WPS. Ear/WPS. War/themes/html/mytheme.
2. Copy all files and subdirectories from another topic directory to the new directory. For example/ScienceCopy a file to the topic.

   JSP

   Default. jsp, Banner. jspAnd Navigation. jspUsed to provide layout and determine the position of screen elements. For more information about how to customize the portal layout, see Change Portal layout.

   Image

   Banner.jpgIt is the background image used by the portal website banners. Navfade.jpgUse the left-side navigation pane. You can modify these images or create your own images and add them to JSP.

   Style Sheet

   Styles.cssIs the default style table. For Internet Explorer requests, use IE/styles.cssStyle sheet. You can change the tag definition and the class definition in the CSS style sheet.

3. UsePortal website managementAdd a new topic to the portal site. Make sure that the name of the added topic is the same as that of the subdirectory used for the topic. FromPortal website settingsAdd themes and appearances to the page. For more information, see manage theme and appearance descriptions.
4. SelectUsage locationTo test and change to a new topic. For more information, see use location.
5. When you are preparing to provide a topic for regular use, you can create a user and administrator to preview the topic from the location or location features.
   1. Create a screen image for the topic.
   2. Reduce the screen image to adapt to the preview box. The recommended size is 300x225 pixels.
   3. Name the imagePreview.gif. The GIF file is limited to 256 colors.
   4. Copy the imageWp_root/APP/WPS. Ear/WPS. War/themes/html/Theme_name. In our example, the file and location are:Wp_root/APP/WPS. Ear/WPS. War/themes/html/mytheme/preview.gif.

Define your own appearance

Defining Your own appearance involves usingWp_root/APP/WPS. Ear/WPS. War/skins/Markup/Create a subdirectory for the appearance name in the directory, and create support resources in the directory. The following steps show how to use an existing appearance to create your own HTML-based appearance.

1. Use the new appearance name to create a new directory, for example,Wp_root/APP/WPS. Ear/WPS. War/skins/html/myskin.
2. Copy all files and subdirectories from the other exterior directory to the new directory. For example/FadeCopy the appearance file.

   JSP

   The only JSP you want to modify is Control. jspIt is used to provide each Portlet on the page. Other JSPs, such Rowcontainer. jspAnd Columncontainer. jspCustomized by the portal website to arrange the Portlet in the page. See the tag used by the portal JSP for reference.

   Image

   These are images used to create the title bar or background image of the Portlet. For example, Title_edit.gifThe icon used to open the help mode of the Portlet. You can modify these images or create your own images and add them to JSP.

3. UsePortal website managementAdd a new appearance to the portal site. Make sure that the added appearance name is the same as the subdirectory name used for the appearance. FromPortal website settingsAdd themes and appearances to the page. For more information, see manage theme and appearance descriptions.
4. When processing a new appearance, useUsage locationTo test and change the new appearance. For more information, see use location.
5. When you are preparing to provide a regular usage appearance, you can create a user and administrator to preview the location or location features.
   1. Create a screen shot.
   2. Reduce the screen image to adapt to the preview box. The recommended size is 307x159 pixels.
   3. Name the imagePreview.gif. The GIF file is limited to 256 colors.
   4. Copy the imageWp_root/APP/WPS. Ear/WPS. War/skins/html/Skin_name. In our example, the file and location are:Wp_root/APP/WPS. Ear/WPS. War/skins/html/myskin/preview.gif.

Define support for new clients

During operations on the portal site, you may find that some users have upgraded their browsers and the new browsers have some HTML requirements. Alternatively, you may obtain requests that support new mobile phones with special WML requirements. In both cases, you can add portal site support for the client. If the tag required by the new client is not supported by the portal site, you must first define the support for the new tag.

To add a new client, first create a subdirectory that contains resources that must support the new client in each of the following locations:

Wp_root/WPS. Ear/WPS. War/APP/screens

The screen is the JSP called by the Portal Server to display various contents. The main screen is most often displayed because it is used in the Portlet content area. Other screens include logon or error screens. For more information about the screen, see Change Portal layout.

Wp_root/WPS. Ear/WPS. War/APP/themes

In addition to JSP, the topic directory may also require images, style sheets, or any other file types necessary for new tags. For more information, see define your own topic.

Wp_root/WPS. Ear/WPS. War/APP/skins

See define your own appearance to obtain information about the resources in the appearance directory.

For example, to add a stripe page with a tag specific to the Netscape 6 browser, you can create a topic for each of the following locationsBanner. jsp:

  wp_root/app/wps.ear/wps.war/themes/html/theme_name/ns6

See the search order of portal website resources to obtain complete information about how to find client resources in the directory structure.

Use the management location to add a new client to the portal site. Make sure that the name of the added client is the same as that of the subdirectory used for the client. AvailablePortal website settingsAdd a new client to the page.

Define support for the new Markup Language

WebSphere Portal supports HTML, WML, and chtml Markup languages. If you want to define another supported markup language, make sure that you have A Portlet that provides the markup for that language. In addition, you must create a subdirectory for the tag in each of the following locations:

Wp_root/WPS. Ear/WPS. War/APP/screens

The screen is the JSP called by the Portal Server to display various contents. The main screen is most often displayed because it is used in the Portlet content area. Other screens include logon or error screens. For more information about the screen, see Change Portal layout.

Wp_root/WPS. Ear/WPS. War/APP/themes

In addition to JSP, the topic directory may also require images, style sheets, or any other file types necessary for new tags. For more information, see define your own topic.

Wp_root/WPS. Ear/WPS. War/APP/skins

See define your own appearance to obtain information about the resources in the appearance directory.

See the search order of portal website resources to obtain complete information about how to find client resources in the directory structure. JSP in each of these locations must provide the tags required for the new markup language.

Use a management location to add a new tag to the portal site. Make sure that the added tag name is the same as the subdirectory name used for the tag. FromPortal website settingsAdd tags on the page.

Portal website Style

The style sheet used by WebSphere Portal contains a class that the Portlet can be used to ensure the visual consistency between the Portlet on the page. Use these classes to ensure that the appearance and feelings of the Portlet match those of other Portlet and portal pages no matter what theme you select.

CheckWp_root/APP/WPS. Ear/WPS. War/themes/html/DirectoryStyles.cssFile to determine the class called in the Portlet output. The file contains comments that explain the use of each class. Find the Portlet class and find the following comments in the style sheet.

/*************************************** ***************************************/ /* The style used in the Portlet *//****************************** **************************************** ********/

Change company information

The text displayed in the banners on the portal page is in the fileEngine. PropertiesIs located in the directory../Appserver/lib/APP/NLS. For websites that use multiple languages, the file can have a language suffix corresponding to the language environment, suchEngine_es.propertiesIt is applicable to Spanish. If the WebSphere Portal cannot determine the client language environmentEngine. Properties. Follow these steps to change the text in the language supported by each portal site.

1. Edit FileEngine. Properties.
2. SetTitleThe parameter changes the name that you want to display in the portal banners.
3. Save and closeEngine. Properties.
4. Restart the application server of WebSphere Portal.

The License Agreement and Privacy Policy documents contain information that should be changed to include relevant content unique to your company. These files areLicense.htmlAndPrivacy.html, Located inWp_root/APP/WPS. Ear/WPS. War/htmlDirectory.

Change portal page help

WebSphere Portal provides help information for portal websites. You can customize this help page to reflect the content and information about your organization's site. Portal help is a collection of HTML and image files. The Help page contains information about managing portals. This information can be accessed from the help link in the portal navigation bar. To prevent access management information, you can change the link to access another help file set or remove the link provided in the file.

To change the help link, edit the link in JSP provided for each topic you use. For more information, see define your own topic.

To change the existing Help file, find the file in the following path:

   wp_root/app/wps.ear/wps.war/doc/locale/InfoCenter/help  

WhereWp_rootIs the WebSphere Portal root directory,LocaleIndicates the language.

The main portal help file isWp_root/APP/WPS. Ear/WPS. War/doc/Locale/InfocenterDirectoryHelp_index.html. This file sets the frame of banners, navigation, and help content. When you add new help content, you need to updateNavtext.txtAndHtmltoc.htmlTo link to the new file.

The original help can be used in multiple languages. If you need to support multiple languages, you need to convert any new files created. Before making changes, create a backup copy for the original help.

Related information
Change Portal website layout Internationalization How to Create A Portlet