Designing banners

Banners display the following:

  • date, time, and wireless service provider
  • application notifications, such as the alarm indicator, missed call count indicator, unopened message count indicator, and third-party indicators
  • wireless connection indicators, such as the wireless coverage level, network coverage, Bluetooth indicator, and Wi-Fi
  • connection indicator, and roaming indicator
  • battery power indicator
  • sound profile indicator
  • search icon

Banners appear on the Home screen and on the Application list screen. The Home screen banner appears on the Home screen and, depending on the theme layout, on the Lock screen. The Application list banner appears on the Message list, Phone lists, and, depending on the theme layout, on the Lock screen. Banners display elements such as the date and time, network connectivity, and notification icons.

You can customize banners; you can replace banner and indicator images with your own, apply custom fonts, and customize the color scheme. You can also adjust the banner height for the Home screen banner and you can reposition and resize elements within the banner. When you resize the banner or add and reposition elements, make sure that you keep all elements within the banner.

For custom theme layouts, you have the option of making the banner take up the full area of the Home screen so that you can reposition banner items anywhere on the Home screen. The banner is a transparent image and by making it take up the full area of the Home screen, you can create a layered effect over the background image of the Home screen.

Some images, such as those for the Alarm, Unread items, and New items, are shared between banners. You cannot change them independently; changes you make to any of these elements for either the Home screen or Application list screen will appear on both screens.

Change the background image for a banner

  1. In the Inspector, click the Banner button.
  2. Do one of the following:
    • To change the background of the Home screen banner, on the Toolbar, click Show the Home Screen Banner.
    • To change the background of the Application list banner, on the Toolbar, click Show the Application Banner.
  3. In the preview area of the canvas, click the background image of the banner.
  4. On the Quick Edit bar, in the Banner Background drop-down list, click Change Image.
  5. Navigate to an image.
  6. Click Open.

Add or remove banner items

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click Show the Home Screen Banner.
  3. On the Quick Edit bar, in the Home Screen Banner section, click Item Visibility.
  4. In the Banner Item Visibility dialog box, do the following:
    • Select the check boxes for the items that you want to display on the banner.
    • Clear the check boxes for the items that you don't want to display on the banner.
    In the preview area of the canvas, the banner items appear or disappear as you select or clear the check boxes.
  5. Click Close.

Move the banner elements

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click Turn On/Off Bounding Boxes.
  3. Click a bounding box and drag it to the location that you want.
  4. To remove the bounding boxes, on the Toolbar, click the Turn On/Off Bounding Boxes.

Change the underlay image for the Profiles icon

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click Show the Home Screen Banner.
  3. On the Quick Edit bar, in the Home Screen Banner section, click Item Visibility.
  4. In the Banner Item Visibility dialog box, select the Profiles Icon check box and click Close. The Profiles icon appears in the preview area of the canvas.
  5. In the preview area of the canvas, click the Profiles icon.
  6. On the Quick Edit bar, in the Focus Icon drop-down list, click Change Image.
  7. Navigate to an image.
  8. Click Open.

Change the image for banner elements

You can change the image for each of the banner elements, such as the signal meters and notification icons. Some elements, such as the battery meter, use an image sprite that displays several states for the element. Some images, such as those for the Alarm, Unread items, and New items, are shared between the application and Home screen banners. You cannot change them independently; changes you make to any of these elements for either the Home screen or Application list screen appear on both screens.

For more information on the image sprites used by the banner, see Image sprites for the banner.

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click either Show the Application Banner or Show the Home Screen Banner.
  3. In the preview area of the canvas, click the banner element that you want to change the image for.
  4. On the Quick Edit bar, click the drop-down list next to the name of the banner element.
  5. Click Change Image.
  6. Navigate to an image file.
  7. Click Open.

Change the size of the Home screen banner

You can set the banner height to a value between 10 pixels and 120 pixels.

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click Show the Home Screen Banner.
  3. On the Quick Edit bar, in the Home Screen Banner section, in the Banner Height field, click the up and down arrows to specify the height of the banner in pixels.

Change the font and text settings for banner elements

  1. In the Inspector, click the Banner button.
  2. On the Toolbar, click either the Application Banner or Home Screen Banner icon.
  3. In the preview area of the canvas, click the element that you want to change the text settings for. By default, the AM/PM element uses the same font family and font settings as the Time element. You can specify the size for the AM/PM element only if you specify a TrueType font for the Time element. Note that if you choose a large font size, the Time and the AM/PM elements might appear truncated on the device. To ensure that the elements fit appropriately, either reduce the font size or adjust the size of the bounding box to accommodate the large font size.
  4. On the Quick Edit bar, select the font, font size, and font style.
  5. To change the font color, on the Quick Edit bar, click the Fill box and click a color.
  6. To change the font outline, on the Quick Edit bar, click the Stroke box and click a color.
  7. To change the text alignment, on the Quick Edit bar, click the Alignment button.