Editing themes
The portal appearance can be controlled by theme policy and color palette in a portal project, and those are described in Changing themes section. Open a theme in Page Designer to modify the appearance of both the theme and its associated skins.
When editing a theme, you can make changes to the look and feel and layout of banners, label and place bars (i.e. navigation bars), footers, and skins. The changes will apply to all areas of the portal where the theme occurs. Changes are saved in the default.jsp file or embedded files that are specific to the theme.
For instance, if you want to create several themes based on one of the existing themes, it is best to do the following:
- Create a new theme.
- Use the Page Designer view to edit the look of the new theme.
- Test each new theme by deploying to a test server environment.
- Apply the new theme to a specific area of your portal application.
You can edit a theme using the Main menu in Portal designer, or by right clicking on the page node. To edit a theme:
- In Portal Designer, select
Edit Theme from the menu. The Default.jsp file for the active theme will open in Page Designer.
- (Option 1) To edit a tag property, click a tag icon to activate its Properties view.
- (Option 2) To edit a particular JSP file within the theme (i.e. a JSP file that is not specified by the jspInclude tag), do the following:
- From the Menu bar, select
Edit | Switch Active Document. This activates the list of all JSP files associated with the theme.
- From the list, select the JSP file that you want to edit. As you scroll the list with your cursor, notice that the component for the JSP file currently highlighted appears with a black outline in Default.jsp.
- Once you find the JSP you want to edit, click to activate it in Page Designer.
The editor will save your changes to the theme's Default.jsp file when you close it.
In WebSphere® Portal 6.1, or later projects, in addition to the Edit theme option, you can directly edit the top navigation area, side navigation area, the portlet render area, and portlet skins of a portal project.
To edit the top navigation area:
- In Portal Designer, select
Edit top navigation area from the menu.
- The “topNav.jspf" file is displayed. If you select a Portal Web 2.0 based theme, two files “topNavRender.xsl” and “topNav.jspf" are displayed. Select the one you want to edit. To edit the topNav.jspf, click
Open with Page Designer. To edit the topNavRender.xsl, use an XML editor.
To edit the side navigation area:
- In Portal Designer, select
Edit side navigation area from the menu.
- The “sideNav.jspf" file is displayed. Two files “sideNavRender.xsl” and “sideNav.jspf are dispalyed. Select the one you want to edit. To edit the sideNav.jspf, click
Open with Page Designer. To edit the sideNavRender.xsl, use an XML editor.
To edit the portlet render area:
- Right click on Portal Designer editor.
- Scroll down to Edit portlet render area, and select the file that you want to edit.
- Click on Portlet render area, the corresponding file will be displayed in the edit menu.
- Edit and save the file.
Note: To view the modifications made to the top navigation area, the side navigation area, or the portlet render area, the portal project needs to be deployed on a portal server.
If you are using the Portal Web 2.0 theme, you can also edit other XSL files. In Portal Designer, select
Edit Theme XSL files from the menu, the available XSL files will be listed.
To edit a style for a theme and its associated skins, refer to Editing styles.
In WebSphere Portal 6.0, or later projects, you can change the color palette that is associated with a screen. With your theme's Default.jsp file open in Page Designer, choose
Page | Portal Status. Select one of color palettes in a drop down list.
For additional information on editing screens, refer to Editing screens.
Limitation: To edit any area that is rendered by the screenRender tag:
This will open the JSP file in another instance of Page Designer.
- Click on any skin. This will activate the screenRender tag Properties view.
- In the Properties view, select one of the external files from the
External files menu.
- After you have selected the JSP file that you want to edit, click
Open with Page Designer.
The changes that you make to external files will not be reflected in the Design pane or Portal Designer.
Page Designer preview pane does not support previewing themes. To view your changes, test your portal on a local or remote server. For more information, refer to Testing and debugging portals in V 6.0 or later .
Related tasks
Adding portlets to portal pages
Related information