Change the appearance and behavior of a theme. You can select colors,
fonts, graphics, turn areas of the page on and off, and adjust the settings
for areas of the page such as the navigation.
Customizations are saved as Theme Styles that are applied to pages
by editing the page properties in the Managing Pages portlet. To get started,
select Create a new style
or Edit an existing
style
. Once you have applied a style to a page, you can click
the Customize Theme
icon to edit the style
directly from the page.
- Customizing Page Settings
Page Settings allows you to modify the background color and background
images of the page, as well as the text and link color.
- Customizing the Banner
Modify the banner color, border, text, and linking, and also brand
the banner by uploading an image.
- Customizing Page Navigation
Choose the navigation layout for the default page navigation style.
- Customizing the Portlet Area
Modify the text and link colors, and the border size and color
for portlets.
- Customizing the Footer
Choose how to display the Quick Links Shelf and Footer.
- Selecting a graphic
Select a graphic to use as the logo or a background. You can also
upload a new graphic or work with graphics that have already been added to
your theme style.
- More Actions
The More Actions menu contains several links that allow you to
save, edit, discard, or preview your changes.
- Previewing and applying a theme style
Preview the new theme style as you are making modifications, and
once you are done, apply the style to a page.
Customizing Page Settings
Page Settings allows you to modify the background color and background
images of the page, as well as the text and link color.
- Select the image you would like to use for your
background.
- From the Background repeat
menu,
select how you would like the background image to repeat.
- None
- This option places the image only in the location that you specify under Position
.
- Horizontally
- This option repeats the image horizontally across either the top, middle,
or bottom of the page, depending on the location that you specify under Background
position
.
- Vertically
- This option repeats the image vertically across either the left, center,
or right of the page, depending on the location that you specify under Background
position
.
- Tile
- This option repeats the image over the entire background of the page.
- Theme default
- This option repeats the image as specified by the theme in use on the
page where the style is applied.
- From the Background position
menu,
select where you would like to place the first instance of the background
image. The position selected determines how the image is repeated.
- Top Left
- This places the first occurrence of the image in the top left corner of
the page.
- Top Center
- This places the first occurrence of the image in the top center of the
page.
- Top Right
- This places the first occurrence of the image in the top right corner
of the page.
- Middle Left
- This places the first occurrence of the image in the middle left corner
of the page.
- Middle Center
- This places the first occurrence of the image in the middle center of
the page.
- Middle Right
- This places the first occurrence of the image in the middle right corner
of the page.
- Bottom Left
- This places the first occurrence of the image in the bottom left corner
of the page.
- Bottom Center
- This places the first occurrence of the image in the bottom center of
the page.
- Bottom Right
- This places the first occurrence of the image in the bottom right corner
of the page.
- Theme default
- This option positions the image as specified by the theme in use on the
page where the style is applied.
- Click the Background color
field,
then select the color that you would like to use for your background. This
color will appear anywhere that the background image is not displayed.
If you know the six-digit hexadecimal code
for the color you would like to use, you can enter it instead of selecting
a color from the picker window.
- Click the Text color
field,
then select the color that you would like to use for your text.
This color will be used for any text that is displayed
on the page. If you know the six-digit hexadecimal code for the color you
would like to use, you can enter it instead of selecting a color from the
picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
This color will be used for any link that is displayed
on the page. If you know the six-digit hexadecimal code for the color you
would like to use, you can enter it instead of selecting a color from the
picker window.
- Select the content you want to display in the theme:
- Portlets link
- links to the Portlet Palette, which provides you with a collection of
portlets that you can drag to the page for quick and easy page customization.
- People link
- links to the People Finder, which lets you find people in your organization
and see detailed information about them, such as name, phone number, or job
title.
- Help link
- links to the Getting Help and Support page.
- Search controls
- lets you display the search controls to access the search feature.
- Application name
- lets you display the name of the portal application.
- Customize theme link
- links to the theme customizer portlet.
- To remove the breadcrumb trail, clear the Display breadcrumb
trail
check box.
- Click the Text color
field,
then select the color that you would like to use for your text.
This color will be used for any text that is displayed
on the page. If you know the six-digit hexadecimal code for the color you
would like to use, you can enter it instead of selecting a color from the
picker window.
- Click the Link color
field,
then select the color that you would like to use for your links.
This color will be used for any link that is displayed
on the page. If you know the six-digit hexadecimal code for the color you
would like to use, you can enter it instead of selecting a color from the
picker window.
Customizing the Banner
Modify the banner color, border, text, and linking, and also brand
the banner by uploading an image.
- Customize branding by modifying the following options:
- To change the title of the site, enter a title for the site
in the Site title
field.
If this field is
left blank, the default text that is coded into the theme will be used. For
themes shipped with IBM products, this text will be the product name.
- To remove the title from the banner clear Display
site title in banner
.
- From the Text font
menu,
select the font that you would like to use.
If
you know the name of the font you would like to use, you can enter it instead
of selecting a font from the menu.
- From the Font size
menu, select the size
of the font.
If you know the size of the font you would like to
use, you can enter it instead of selecting a font size from the menu.
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- To display a logo in the banner, select Browse for
image
.
- To remove a logo in the banner, clear Display logo
in banner
.
- Customize the banner settings by modifying the following options:
- Select the image you would like to use for your
background.
- From the Background repeat
menu,
select how you would like the background image to repeat.
- None
- This option places the image only in the location that you specify under Position
.
- Horizontally
- This option repeats the image horizontally across either the top, middle,
or bottom of the page, depending on the location that you specify under Background
position
.
- Vertically
- This option repeats the image vertically across either the left, center,
or right of the page, depending on the location that you specify under Background
position
.
- Tile
- This option repeats the image over the entire background of the page.
- Theme default
- This option repeats the image as specified by the theme in use on the
page where the style is applied.
- From the Background position
menu,
select where you would like to place the first instance of the background
image. The position selected determines how the image is repeated.
- Top Left
- This places the first occurrence of the image in the top left corner of
the page.
- Top Center
- This places the first occurrence of the image in the top center of the
page.
- Top Right
- This places the first occurrence of the image in the top right corner
of the page.
- Middle Left
- This places the first occurrence of the image in the middle left corner
of the page.
- Middle Center
- This places the first occurrence of the image in the middle center of
the page.
- Middle Right
- This places the first occurrence of the image in the middle right corner
of the page.
- Bottom Left
- This places the first occurrence of the image in the bottom left corner
of the page.
- Bottom Center
- This places the first occurrence of the image in the bottom center of
the page.
- Bottom Right
- This places the first occurrence of the image in the bottom right corner
of the page.
- Theme default
- This option positions the image as specified by the theme in use on the
page where the style is applied.
- Click the Background color
field,
then select the color that you would like to use for your background. This
color will appear anywhere that the background image is not displayed.
If you know the six-digit hexadecimal code
for the color you would like to use, you can enter it instead of selecting
a color from the picker window.
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- From the Border size
menu,
select the size of the border.
- Click the Border color
field,
then select the color that you would like to use for the border.
If you know the six-digit hexadecimal code for the
color you would like to use, you can enter it instead of selecting a color
from the picker window.
- Customize banner links by modifying the following options.
- Clear Display quick links in banner
to
remove the links.
To create these links:
- Click More Actions in the portlet header
.
- Click Edit Quick Links
.
- In the Manage Pages portlet, select
.
- Select a node to add Quick Links, for example, Banner Links
.
- Select New URL
, enter the required information
and click OK
The link will now appear in the Quick Links in the banner.
Customizing Page Navigation
Choose the navigation layout for the default page navigation style.
- Select the type of navigation you want to set.
- Side navigation only
- The side navigation displays a navigation tree starting at navigation
level two.
- One row of tabs and side navigation
- The row of tabs displays the navigation level two nodes. The side navigation
displays a tree starting at navigation level three.
- Two rows of tabs and side navigation
- The first row of tabs displays the navigation level two nodes. The second
row of tabs displays the navigation level three nodes. The side navigation
displays a tree starting at navigation level four.
A row or side navigation only displays if there are pages to show at
the required navigation level. For example, if you select Two
rows of tabs and side navigation
but do not have any pages at
navigation level three or level four, the second row and side navigation is
not displayed.
- Modify the settings for the top level navigation in the banner.
The top level navigation displays the navigation level one nodes.
- Click the Background color
field, then
select the color that you would like to use for your background.
If
you know the six-digit hexadecimal code for the color you would like to use,
you can enter it instead of selecting a color from the picker window.
- Click the Selected background color
field,
then select the color that you would like to use for the selected background.
If you know the six-digit hexadecimal code for the color you would like
to use, you can enter it instead of selecting a color from the picker window.
- Click the Text color
field, then select
the color that you would like to use for your text.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- Click the Selected text color
field,
then select the color that you would like to use for selected text.
If you know the six-digit hexadecimal code for the color you would like
to use, you can enter it instead of selecting a color from the picker window.
- Modify the settings for each part of the navigation you are using:
- Click the Background color
field, then
select the color that you would like to use for your background.
If
you know the six-digit hexadecimal code for the color you would like to use,
you can enter it instead of selecting a color from the picker window.
- Click the Selected background color
field,
then select the color that you would like to use for the selected background.
If you know the six-digit hexadecimal code for the color you would like
to use, you can enter it instead of selecting a color from the picker window.
- Click the Text color
field, then select
the color that you would like to use for your text.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- Click the Selected text color
field,
then select the color that you would like to use for selected text.
If you know the six-digit hexadecimal code for the color you would like
to use, you can enter it instead of selecting a color from the picker window.
- From the Border size
menu, select the
size of the border.
- Click Border color field
, the select
the color that you would like to use for the border.
If you know
the six-digit hexadecimal code for the color that you would like to use, you
can enter it instead of selecting a color from the picker window.
Customizing the Portlet Area
Modify the text and link colors, and the border size and color
for portlets.
- Customize the portlet area header by modifying the following options.
The portlet area header is the area above the portlets where the application
name, first row of tabs, and search controls are displayed.
- Select the image you would like to use for your
background.
- From the Background repeat
menu,
select how you would like the background image to repeat.
- None
- This option places the image only in the location that you specify under Position
.
- Horizontally
- This option repeats the image horizontally across either the top, middle,
or bottom of the page, depending on the location that you specify under Background
position
.
- Vertically
- This option repeats the image vertically across either the left, center,
or right of the page, depending on the location that you specify under Background
position
.
- Tile
- This option repeats the image over the entire background of the page.
- Theme default
- This option repeats the image as specified by the theme in use on the
page where the style is applied.
- From the Background position
menu,
select where you would like to place the first instance of the background
image. The position selected determines how the image is repeated.
- Top Left
- This places the first occurrence of the image in the top left corner of
the page.
- Top Center
- This places the first occurrence of the image in the top center of the
page.
- Top Right
- This places the first occurrence of the image in the top right corner
of the page.
- Middle Left
- This places the first occurrence of the image in the middle left corner
of the page.
- Middle Center
- This places the first occurrence of the image in the middle center of
the page.
- Middle Right
- This places the first occurrence of the image in the middle right corner
of the page.
- Bottom Left
- This places the first occurrence of the image in the bottom left corner
of the page.
- Bottom Center
- This places the first occurrence of the image in the bottom center of
the page.
- Bottom Right
- This places the first occurrence of the image in the bottom right corner
of the page.
- Theme default
- This option positions the image as specified by the theme in use on the
page where the style is applied.
- Click the Background color
field,
then select the color that you would like to use for your background. This
color will appear anywhere that the background image is not displayed.
If you know the six-digit hexadecimal code
for the color you would like to use, you can enter it instead of selecting
a color from the picker window.
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- From the Border size
menu,
select the size of the border.
- Click the Border color
field,
then select the color that you would like to use for the border.
If you know the six-digit hexadecimal code for the
color you would like to use, you can enter it instead of selecting a color
from the picker window.
- Customize the portlet area by modifying the following options:
- Select the image you would like to use for your
background.
- From the Background repeat
menu,
select how you would like the background image to repeat.
- None
- This option places the image only in the location that you specify under Position
.
- Horizontally
- This option repeats the image horizontally across either the top, middle,
or bottom of the page, depending on the location that you specify under Background
position
.
- Vertically
- This option repeats the image vertically across either the left, center,
or right of the page, depending on the location that you specify under Background
position
.
- Tile
- This option repeats the image over the entire background of the page.
- Theme default
- This option repeats the image as specified by the theme in use on the
page where the style is applied.
- From the Background position
menu,
select where you would like to place the first instance of the background
image. The position selected determines how the image is repeated.
- Top Left
- This places the first occurrence of the image in the top left corner of
the page.
- Top Center
- This places the first occurrence of the image in the top center of the
page.
- Top Right
- This places the first occurrence of the image in the top right corner
of the page.
- Middle Left
- This places the first occurrence of the image in the middle left corner
of the page.
- Middle Center
- This places the first occurrence of the image in the middle center of
the page.
- Middle Right
- This places the first occurrence of the image in the middle right corner
of the page.
- Bottom Left
- This places the first occurrence of the image in the bottom left corner
of the page.
- Bottom Center
- This places the first occurrence of the image in the bottom center of
the page.
- Bottom Right
- This places the first occurrence of the image in the bottom right corner
of the page.
- Theme default
- This option positions the image as specified by the theme in use on the
page where the style is applied.
- Click the Background color
field,
then select the color that you would like to use for your background. This
color will appear anywhere that the background image is not displayed.
If you know the six-digit hexadecimal code
for the color you would like to use, you can enter it instead of selecting
a color from the picker window.
- From the Border size
menu,
select the size of the border.
- Click the Border color
field,
then select the color that you would like to use for the border.
If you know the six-digit hexadecimal code for the
color you would like to use, you can enter it instead of selecting a color
from the picker window.
- Customize the default portlet skin by modifying the following options:
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- From the Border size
menu,
select the size of the border.
- Click the Border color
field,
then select the color that you would like to use for the border.
If you know the six-digit hexadecimal code for the
color you would like to use, you can enter it instead of selecting a color
from the picker window.
Customizing the Footer
Choose how to display the Quick Links Shelf and Footer.
The Quick Links Shelf is an expandable and collapsible area at the
bottom of the page that displays links to the user. There are two sets of
links that display in the Quick Links Shelf. One set displays when the shelf
is expanded and the other set displays when the shelf is collapsed. The expanded
shelf displays two levels of links and the collapsed shelf displays one level
of links. When displaying two levels of links, the first level is used as
a category.
- Customize the Quick Links Shelf by modifying the following options:
- Clear Display Quick Links Shelf
to hide
the Quick Links Shelf.
- Clear Display shelf expanded by default
to
display the Quick Links Shelf collapsed by default.
- Clear Display expand/collapse shelf link
to
hide the link used to expand and collapse the shelf.
- Select the image you would like to use for your
background.
- From the Background repeat
menu,
select how you would like the background image to repeat.
- None
- This option places the image only in the location that you specify under Position
.
- Horizontally
- This option repeats the image horizontally across either the top, middle,
or bottom of the page, depending on the location that you specify under Background
position
.
- Vertically
- This option repeats the image vertically across either the left, center,
or right of the page, depending on the location that you specify under Background
position
.
- Tile
- This option repeats the image over the entire background of the page.
- Theme default
- This option repeats the image as specified by the theme in use on the
page where the style is applied.
- From the Background position
menu,
select where you would like to place the first instance of the background
image. The position selected determines how the image is repeated.
- Top Left
- This places the first occurrence of the image in the top left corner of
the page.
- Top Center
- This places the first occurrence of the image in the top center of the
page.
- Top Right
- This places the first occurrence of the image in the top right corner
of the page.
- Middle Left
- This places the first occurrence of the image in the middle left corner
of the page.
- Middle Center
- This places the first occurrence of the image in the middle center of
the page.
- Middle Right
- This places the first occurrence of the image in the middle right corner
of the page.
- Bottom Left
- This places the first occurrence of the image in the bottom left corner
of the page.
- Bottom Center
- This places the first occurrence of the image in the bottom center of
the page.
- Bottom Right
- This places the first occurrence of the image in the bottom right corner
of the page.
- Theme default
- This option positions the image as specified by the theme in use on the
page where the style is applied.
- Click the Background color
field,
then select the color that you would like to use for your background. This
color will appear anywhere that the background image is not displayed.
If you know the six-digit hexadecimal code
for the color you would like to use, you can enter it instead of selecting
a color from the picker window.
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
- From the Border size
menu,
select the size of the border.
- Click the Border color
field,
then select the color that you would like to use for the border.
If you know the six-digit hexadecimal code for the
color you would like to use, you can enter it instead of selecting a color
from the picker window.
- Clear Display footer Quick Links
to hide
the Quick Links in the footer outside of the Quick Links Shelf.
- Click the Text color
field,
then select the color that you would like to use for your text.
If you know the six-digit
hexadecimal code for the color you would like to use, you can enter it instead
of selecting a color from the picker window.
- 6. Click the Link color
field,
then select the color that you would like to use for your links.
If you know
the six-digit hexadecimal code for the color you would like to use, you can
enter it instead of selecting a color from the picker window.
Selecting a graphic
Select a graphic to use as the logo or a background. You can also
upload a new graphic or work with graphics that have already been added to
your theme style.
- To select a graphic to use as your logo or background, click the
thumbnail for the graphic.
Click the thumbnail labeled None
if
you do not want to use a graphic, or Theme default
if
you want to use the graphic specified by the theme in use on the page where
the style is applied.
- To delete a graphic from the theme style:
- Click the x icon under the thumbnail image you would like to
delete.
- Click OK
to confirm the delete, or cancel
to keep the graphic in your style.
- To see a full-size preview of a graphic in the theme style, click
the plus (+) icon under the thumbnail image you would like to preview.
- To upload a graphic:
- Click Browse...
to locate an image.
- Click Open
in the File Upload
window.
- Click Upload
to add the image to your
theme style.
After the file uploads, it will become the selected
graphic.
- Click Done
to return to the Theme Customizer.
To add a sample graphic to your style, click on the link to add a
sample graphic, and then click on the thumbnail for the graphic.
Previewing and applying a theme style
Preview the new theme style as you are making modifications, and
once you are done, apply the style to a page.
- To preview the new theme style:
- Click Save style
to save your changes.
- Navigate to a page to which you have applied the style to see
your changes.
- Return to the Theme Customizer to continue editing the style.
Once you have applied a style to a page, you can click the Customize
Style
paintbrush icon to edit the style directly from the page.
- To apply a style to a page, use the Manage Pages
portlet
to edit the properties for the desired page and set the style.
- Click Administration
.
- Click Manage Pages
.
- Locate your page in the Manage Pages
portlet.
- Click the Edit Page Properties icon.
- Select your style in the Theme style (Theme Policy) list.
- To apply a style to the current page, use the Page Menu
on
the selected page tab to access the page properties.
- Hover your mouse over the selected page tab.
- Click the arrow
to display the Page Menu.
- Click Edit Page Properties
- Select your style in the Theme Style (Theme Policy) list.
More Actions
The More Actions menu contains several links that allow you to
save, edit, discard, or preview your changes.
The following tasks can be accessed by clicking
More
Actions
when accessing the Theme Customizer using the Customize
Theme icon:
- Revert to last save
- Discard all changes made since the last save.
- Help
- Open the help for the Theme Customizer.
The following tasks can be accessed by clicking
More
Actions
when you have not accessed the Theme Customizer using
the Customize Theme icon:
- Create new style...
- Enter a name to create a new style. Select the style with the settings
that you want copied into the new style. If you are currently
editing a style, any unsaved changes will be discarded. After the new style
is created, it is saved and then opens for editing.
- Save this style as...
- Enter a name to create a new style. Any unsaved changes in the current
style will only be saved in the new style. After the new style is created,
it is saved and then opens for editing.
- Revert to last save
- Discard all changes made since the last save.
- Delete this style
- Delete the current style. This will take you back to the Theme Customizer
Welcome page.
- Show style details
- See a list of attributes, properties, and graphics that have been set
for the current style.
- Apply styles to pages...
- Takes you to the Manage Pages portlet where you can apply the style to
your pages.
- Edit Quick Links...
- Takes you to the Manage Pages portlet where you can edit links.
- Reset to Welcome
- Discard any unsaved changes in the current style and return to the Theme
Customizer Welcome page.
- Preview a style
- Information on how to preview the current style.
- Help
- Open the help for the Theme Customizer.
