WebSphere Portal provides a predefined portal page that is available immediately after installing and starting the product. You can use the web-based user interface of the portal to change your appearance and feel to switch to other predefined visual elements and layouts provided by WebSphere Portal. The following topics describe how to modify the portal page, create your own visual elements and layout for the portal site.
Gathering Concept Change Appearance and Feeling Portal Style Class Corporate Information Change Portal Page Help
Gathering concept
The portal should provide users with consistent views on the portal application and allow the user to define a specific application set that is supplied to the user in a single context. Depending on the user's device, this application set provides a variation to meet the requirements of the device. For example, consider a set of applications that include news, stock, weather, and search, which must be provided to conventional phones that use sound interactions, with limited monitors and keyboard WML devices or Browser-based PCs. Durable aggregate tasks due to each request from the device is:
Collect information about users, devices, and selected languages. Select the active portlet from the user with access to access. The aggregated active portlet is output to the consistent, available display.
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 item to a complete page. WebSphere Portal provides a full dynamic gathering of pages of page descriptors in the portal database.
Page components are available in JSP, images, style sheets, and other resources. These resources are positioned in the file system in the path naming convention, which is the correct resource of Portal Server to locate the client. It is necessary to understand the location of these resources before designing your own appearance and feeling, layout, or other tag language or client.
Theme and appearance
The Portal Server page is displayed in the appearance and topic defined by the Web designer or administrator defined by the portal. The subject represents the entire appearance and feelings of the portal, including colors and fonts. For example, the subject is also used in the navigation bar to pick the correct color image on the corner of the page tab. The subject also contains JSP resources for defining the layout of the portal components. WebSphere Portal offers the following topics.
Default Theme Scientific Theme Project Theme Financial Theme Company Theme
WebSphere Portal also contains the topics called 'Management'. This topic is associated with the 'no appearance' appearance of the portlet that provides the title bar. The management topic and "no appearance" appearance are provided for managing portlets and is not applied to other locations in the portal site or portlet.
The appearance represents the border presented around the single portlet. Appearance Use the topic name to select a graphic that match the topic color. When all markers have appearance, only HTML provides multiple appearances. WebSphere Portal provides the following appearance.
Album: Clear: Diamonds: Fade: Hint: NoBorder: Noskin: Outline: Pinstripe: Shadow: Wave:
Searching order for portal resources
During the aggregation, Portal Server starts searching from the most specifically subdirectory, then searching for a more summarized, higher level directory to search for topics and appearance.
/ The location / skins directory in the / themes directory
/ locale_country / local / client / theme_name / markup
/ locale_country / locale / client / skin_name / markup
For example, a request is obtained from a client using Internet Explorer version 5 using a language environment to en_us and the user's appearance is set to "shadow". Portal Server's aggregation components searched file control.jsp.
1. /skins/html/shadow/ie5/EN_us/control.jsp2. /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.jsp
10. /skins/html/en_us/control.jsp
11. /skins/html/en/control.jsp
12. /skins/html/control.jsp
13. /skins/control.jsp
In this example, if the file is not found in the ../ie5/en_us directory, Portal Server will find files in the ../ie5/en directory. Portal Server continues to move through this hierarchy until this file is found. If this file is required, it should be stored at least in the / Skins or / Themes directory, and the more specific versions of the file are placed in the appropriate subdirectory.
Change your appearance and feel
Understanding the order of Portal Server search resources allows you to create your own topics, appearances, and layouts. In addition, you can create support for new clients using the portal site, and even set support for new tag language. Before starting any tasks described in this section, make sure you read the concept of aggregation.
Define your own topics Define your own look definition to support for new clients Support for new tag language
Define your own theme
Define your own topic involves creating subdirectories using the topic names in WP_ROOT / App / WPS.EAR / WPS.WAR / Themes / Markup / Directory, and create support resources in this directory. HTML is the unique tag provided by WebSphere Portal that supports multiple topics. The following steps show a way to create your own HTML-based topics using the existing topic.
Create a new directory using the new topic name, for example, wp_root / app / wps.ear / wps.war / themes / html / mytheme. Copy all files and subdirectories to the new directory from another topic directory. For example, you can copy files from the / science topic.
JSP
DEFAULT.JSP,
Banner.jsp and
Navigation.jsp is used to provide layout and determination of the position of the screen element. See
Change the portal layout to get more detailed information about how to customize these content.
image
Banner.jpg is the background image used by the portal banner.
Navfade.jpg is used by the navigation of the left. You can modify these images or create your own images and add them to JSP.
Style sheet
Styles.css is the default style sheet. For entering Internet Explorer requests, use
IE / Styles.css style sheet. You can change the tag definition and class definitions in the CSS style sheet.
Use the portal management to add a new topic to the portal site. Make sure the added topic name is the same as the subdirectory name used for this topic. You can add topics and appearance from the portal settings page. See Managing Topics and Description Descriptions to get more information. When processing a new topic, select the location to test and change to a new topic. See use location for more information. When you are ready to provide topics for routine use, you can create a preview that users and administrators can view from location or location features.
Create a topic screen image. Reduce the screen image to accommodate the preview box. It is recommended to be 300 x 225 pixels. The named image is preview.gif. The GIF file is limited to 256 colors. Copy the image to WP_ROOT / App / WPS.EAR / WPS.WAR / Themes / HTML / Theme_Name. In our example, the files and positions are: wp_root / app / wps.ear / wps.war / themes / html / mytheme / preview.gif. Define your own look
Define your own appearance involves creating subdirectories using the appearance names in WP_ROOT / APP / WPS.EAR / WPS.WAR / SKINS / Markup / Directory, and create support resources in this directory. The following steps show a way to create your own HTML-based appearance using the existing appearance.
Create a new directory using the new appearance name, for example, wp_root / app / wps.ear / wps.war / Skins / HTML / MYSKIN. Copy all files and subdirectories to the new directory from another appearance directory. For example, you can copy files from / fade.
JSP
The only JSP you want to modify is
Control.jsp, which is used to provide each portlet on the page. The rest JSP, such as
RowContainer.jsp and
COLUMNCONTAINER.JSP is customized by the portal to schedule the portlet. See
The portal JSP is used to obtain reference information.
image
These are images for creating a portlet title bar or background image. E.g,
Title_edit.gif is used to provide an icon that opens the portlet help. You can modify these images or create your own images and add them to JSP.
Use the portal management to add a new look to the portal site. Make sure the added appearance name is the same as the subdirectory name used for the appearance. You can add topics and appearance from the portal settings page. See Managing Topics and Description Descriptions to get more information. When processed new appearance, use the location where the use location is used to test and change the new look. See use location for more information. Creating a user and administrator can view a preview from location or location features when preparing to provide appearance for routine use.
Create a screen shot of the appearance. Reduce the screen image to accommodate the preview box. It is recommended to be 307 x 159 pixels. The named image is preview.gif. The GIF file is limited to 256 colors. Copy the image to WP_ROOT / App / WPS.EAR / WPS.WAR / SKINS / HTML / SKIN_NAME. In our example, the files and positions are: wp_root / app / wps.ear / wps.war / skins / html / myskin / preview.gif.
Define support for new clients
During the portal site operation, you may find that some users have upgraded their browsers, and the new browser has some HTML requirements. Alternatively, you may get a request to support a new mobile phone with special WML requirements. In both cases, you can add support to the portal site for the client. If the mark you need for the new client is not supported by the portal site, you must first define support for new tags.
To add a new client, first create a subdirector of the resource containing the new client in each of the following locations:
WP_ROOT / WPS.EAR / WPS.WAR / APP / Screens
The screen is a JSP called Portal Server to display various content. The main screen is the most often displayed because it is used for the portlet content area. Other screens include login or error screens. See
Change the portal layout to get more information about the screen.
WP_ROOT / WPS.EAR / WPS.WAR / App / Themes
In addition to JSP, the topic directory may also require image, style sheet, or any other new file type necessary for any new tag. See
Define your own topics for more information.
WP_ROOT / WPS.EAR / WPS.WAR / APP / SKINS See
Define your own appearance to get information about resources in the appearance directory.
For example, to add a Banner.jsp for each of the Netscape 6 browsers, you can create banner.jsp for each topic in the following locations:
WP_ROOT / APP / WPS.EAR / WPS.WAR / Themes / HTML / Theme_Name / NS6
Please refer to the search order of the portal resource for complete information about how to find the client resource in the directory structure.
Add a new client to the portal site using the management location. Make sure the added client name is the same as the subdirectory name used for the client. You can add a new client using the portal settings page.
Define support to new tag language
WebSphere Portal supports HTML, WML, and Chtml tag language. If you want to define another supported tag language, you must ensure that portlets with tags that provide this language. In addition, you need to create a subdirectory in each of the following points:
WP_ROOT / WPS.EAR / WPS.WAR / APP / Screens
The screen is a JSP called Portal Server to display various content. The main screen is the most often displayed because it is used for the portlet content area. Other screens include login or error screens. See
Change the portal layout to get more information about the screen.
WP_ROOT / WPS.EAR / WPS.WAR / App / Themes
In addition to JSP, the topic directory may also require image, style sheet, or any other new file type necessary for any new tag. See
Define your own topics for more information.
WP_ROOT / WPS.EAR / WPS.WAR / APP / SKINS
See
Define your own appearance to get information about resources in the appearance directory.
Please refer to the search order of the portal resource for complete information about how to find the client resource in the directory structure. JSP in each of these locations must provide a new tag language essential tag.
Add a new marked to the portal site using the management location. Make sure the added tag name is the same as the subdirectory name used for the tag. You can add tags from the portal setting page.
Portal style
The style table used by WebSphere Portal contains a class that portlets can be used to ensure visual consistency between the portlets on the page. Use these classes to ensure that the topline and feelings of the portlet match the appearance and feelings of other portlets and portal pages.
You can check the styles.css file in the WP_ROOT / App / WPS.EAR / WPS.WAR / Themes / HTML / Directory to determine the class called in the portlet output. The file contains comments that explain the usage of each class. To find the portlet class, find the following comments in the style sheet.
/ ************************************************** **************************** /
/ * Style used in portlet * /
/ ************************************************** **************************** /
Change company information
The text displayed in the banner of the portal page is defined in the file engine.properties, which is located in the directory ../appserver/lib/App/nls. For sites that use multiple languages, files can have language suffixes corresponding to locale, such as engine_es.properties, for Spanish. If WebSphere Portal cannot determine the client locale, the banner text is defined in Engine.properties. Use the following steps to change the web text for the language supported by each portal site.
Edit file engine.properties. Change the Title parameter to the name you want to display in the portal banner. Save and close ENGINE.PROPERTIES. Restart the application server for WebSphere Portal. The license protocol and privacy policy file contain information that should be changed to include your company's unique content. These files are license.html and privacy.html, located in the WP_ROOT / App / WPS.EAR / WPS.WAR / HTML directory.
Changing Portal Page Help
WebSphere Portal provides help information for the portal. This help page can be customized to reflect the content and information about your organization site. The portal help is a collection of HTML and image files. The help page contains information about the management portal. This information can be accessed from the help link from the portal navigation bar. To prevent access management information, you can change the link to access another help file set or remove the links provided in the file.
To change the help link, edit the links in the JSP provided for each topic you use. See Defining your own topics for more information.
To change the existing help file, find the files in the following path:
WP_ROOT / APP / WPS.EAR / WPS.WAR / DOC / LOCALE / InfoCenter / Help
Where wp_root is the root of the WebSphere Portal, Locale indicates the language.
The main portal help file is a Help_index.html in the wp_root / app / wps.ear / wps.war / doc / locale / infocenter directory. This file sets the frame, navigation, and the framework of the help. When adding new help content, you need to update Navtext.txt and HTMLTOC.html to link to new files.
Original help can be used in a variety of languages. If the user needs to support multiple languages, any new files created will be required. Before making changes, create a backup copy for the original Help.
Related Information
Changing Portal Layout Internationalization Portlet Creating Guidelines
