Customizing the Banner

Modify the banner color, border, text, and linking, and also brand the banner by uploading an image.

  1. Customize branding by modifying the following options:
    1. 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.
    2. To remove the title from the banner clear Display site title in banner.
    3. 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.
    4. 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.
    5. 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. To display a logo in the banner, select Browse for image.
    7. To remove a logo in the banner, clear Display logo in banner.
  2. Customize the banner settings by modifying the following options:
    1. Select the image you would like to use for your background.
    2. 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.
    3. 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.
    4. 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.
    5. 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. 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.
    7. From the Border size menu, select the size of the border.
    8. 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.
  3. Customize banner links by modifying the following options.
    1. Clear Display quick links in banner to remove the links. To create these links:
      1. Click More Actions in the portlet header.
      2. Click Edit Quick Links.
      3. In the Manage Pages portlet, select Content Root > Theme Links.
      4. Select a node to add Quick Links, for example, Banner Links.
      5. Select New URL, enter the required information and click OK
      The link will now appear in the Quick Links in the banner.
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.