After you create a theme style, use this procedure to apply
a customized look and feel to the theme.
About this task
Do not edit the IBM® WebSphere® Portal 8.5 theme CSS style
sheets directly, because these changes might be lost during a fix
pack upgrade. Instead, create the CSS class in a new style sheet belonging
to your custom theme.
Procedure
- Apply the custom style to a page.
- On the page that you want to apply the style, turn on Edit
Mode.
- Click the on the toolbar.
- Click the custom style.
- Write the new styles.
- Open a portal page that has your theme and custom style
applied.
- Use a tool, like Firebug, to select and inspect the
style rules that you want to change.
- After determining the styles that you want to override
in the theme, copy the overrides to the custom style sheet on WebDAV.
- Apply the custom style sheet to your entire page structure.
- Figure out the root page for the area on which you want
to apply the custom style. To apply to the entire site, select the Content
Root.
- Add metadata on the root page with a key of colorPalette and
a value pointing to your custom style sheet in relation to the theme
directory on WebDAV. For example: css/custom/custom.css.
- Using Firebug to inspect the CSS file.
- Open the Firebug plug-in in a Mozilla Firefox browser.
- Click the element selection icon in
the Firebug menu bar.
- Click the area on the page that you want to change.
- Check that the correct area is selected in the HTML
tab.
- Look at the Style tab to inspect
all the CSS files that are applied to the HTML element.
- Edit the CSS file in the Style tab
until the HTML element looks how you want it to. To edit an attribute
click the text.
- After you determine that the new value applied has the
appearance that you want, copy the CSS file that you changed in the Style tab
into the custom style sheet.