Editing styles
Use the CSS Designer to customize the cascading style sheets for a theme.
Opening the CSS Designer
There are several ways to edit the style for a theme:
Within the CSS Designer there are two views to edit from: the Preview pane and the Source editor.
- Within the Portal Designer, right-click to select
Edit Style | [styles file] from the context menu.
In the Preview pane, you can check styles such as fonts that affect the active theme and skin. To the left of the Preview pane, notice that the Outline view changes to the Styles view. To make changes to your theme and skin, click on the name of a style element within the Styles view. In this example, notice that by highlighting the .wpsToolBar element, you also highlight the corresponding element within the Preview pane and Source pane within the Styles.css file.
To customize the styles within your portlet applications, use the portlet.html file. To show the portlet.html file in the Preview pane, choose "portlet.html" from the Preview with: drop down menu in the CSS editor.
Editing styles within a theme
Opening CSS Designer while you are editing a theme in Page Designer gives you the ability to link to a new or existing style sheet or specify new classes.
To open CSS Designer:
- From the menu bar, click
Edit | Edit Style.
- Select which aspect of the style you want to edit, then click OK.
Alternatively, you can open the CSS Designer through the Page Designer.
- Within the open theme in Page Designer, select the item to edit and make your change in the Properties view. If a style class rule is defined for the selection item, it will be listed in the "class" field of the All-attributes view.
- To access the All-attributes view, click the table icon in the upper right portion of the toolbar on the Properties view. This will change the Properties view to a listing of all the attributes associated with the item you have selected in Page Designer.
- Click this icon a second time to return to the Properties view.
Previewing portlet styles
To preview the effects of styles for portlets found in a stylesheet for a theme, create a portal project containing the theme (and the stylesheet). Associate one of the portlet projects to the portal project. This makes the style sheet available in the Designs page and the Preview page of the Page Designer when you open JSP files in the portlet.
To create a Portal project:
- Click
File | New | Portal Project.
- When working in Portal v 6.0, or higher, there is no folder by default. Replace the
CSS file found from:
PortalContent | themes | html | IBM
Note: Until you deploy or add a portlet page to a particular portal, the portlet page does not take any style. The sole purpose of the portal project that you create with these procedures is to show how theme cascading style sheets affect portlets.
Related concepts
Defining Portal nodes and elements
Related tasks
Related information