BlackBerry Theme Builder Version: 6.
Published: 2011-05-19 SWD-1298781-0519083651-001
Contents 1 BlackBerry Theme Builder overview................................................................................................................. Customizable screen elements......................................................................................................................... Quickstart screen.............................................................................................................................................. Theme layout types..........................
Banner images with multiple states.......................................................................................................... Message list images with multiple states.................................................................................................. Phone images that show multiple states................................................................................................... Best practice: Creating images................................................................
Create a slide show for your wallpaper............................................................................................................ Create a wallpaper that changes on specific dates or time.............................................................................. Change the font settings for the Home screen................................................................................................. Customizing a Today theme Home screen..................................................
Change BlackBerry device elements in portrait or landscape mode................................................................ Design a Home screen that is different in landscape mode............................................................................. Keep focus on an object.................................................................................................................................... Change background images for the Shortcut bar.................................................
Layer the Lock screen over the banner............................................................................................................. Add an animation to the Lock screen............................................................................................................... 92 92 16 Customizing global UI elements....................................................................................................................... Change images for global UI elements.....................
BlackBerry Theme Builder overview User Guide BlackBerry Theme Builder overview 1 You can create themes to personalize the screens on the BlackBerry® device. For example, you can change the background image, change the color of the font, change the applications that appear on the screens, set an application to open a webpage, add a ring tone, and create screen transitions.
Customizable screen elements User Guide Screen element Application list Description The Application list displays the applications, games, and folders that are on the device. For devices running BlackBerry® 6 with a BlackBerry 6 theme layout, you can tap All on the tray to display the list of applications. For devices running BlackBerry Device Software 5.0 and earlier, the Application list appears when you press the Menu key on the Home screen of the BlackBerry device.
Customizable screen elements User Guide Screen element Description In the BlackBerry Theme Builder, you can customize the Home screen banner for your theme by clicking the Banner button in the Inspector and then clicking the Show the Home screen Banner button on the toolbar. The Application banner appears on the Application list, message list, phone screens, and depending on the theme layout, on the Lock screen.
Customizable screen elements User Guide Screen element Description Active Call screen The Active Call screen appears when you make a call on the device. In your theme, you can make the following changes to the Active Call screen: • • • Change the background image Change the font type and color Change phone icons In the BlackBerry Theme Builder, you can customize the items on the Active Call screen for your theme by clicking the Active Call screen button in the Inspector.
Customizable screen elements User Guide Screen element Phone Hotlist screen Description The Phone Hotlist screen appears when you view the call log on the device.
Quickstart screen User Guide Screen element UI controls Description Controls, such as dialog boxes, menus, title bars, buttons, lists, pop-up menus, group boxes, and the search field, can appear on all the device screens. You can change the icons, fonts, and colors for these items. In the BlackBerry Theme Builder, you can customize the controls for your theme by clicking the Controls button in the Inspector.
Theme layout types User Guide Theme layout types When you create a theme, you must first select a theme layout type. A theme layout type determines how the applications appear on the Home screen of the BlackBerry® device. You can choose from one of the following theme layout types: BlackBerry 6 The Home screen displays a notification bar and a tray. BlackBerry device users can tap the notification bar to display Today notification items for new email messages and new phone calls.
Theme layout types User Guide Zen The Home screen displays application icons along the bottom of the screen. Users can click an icon to access that application on the device. Today The Home screen displays three notification items (message, calendar, and phone by default), and the most recent entries appear below each application icon. Users can click an icon to access that application, or they can click an entry (for example an appointment on the calendar) to see details of the entry.
BlackBerry Theme Builder workspace User Guide Icon The Home screen displays application icons in a grid layout. You can organize the application icons into a hierarchy of folders. No application list screen is available for an Icon theme layout because all applications appear on the Home screen.
User Guide Canvas Toolbar Preview area of the canvas Quick Edit bar BlackBerry Theme Builder workspace The canvas displays the preview area. You can move the preview area around the canvas. You can use the toolbar in the BlackBerry Theme Builder to access actions you use on a regular basis. After you select a screen to change, the toolbar shows only the buttons that apply to the screen you selected. The preview area of the canvas displays a preview image of the device that you created the theme for.
BlackBerry Theme Builder workspace User Guide Inspector The Inspector includes the buttons that you can use to select a screen and the elements for each screen that you can change. You can expand the Inspector to show all the elements and make the changes to them on the Inspector. If you prefer, you can hide the elements in the Inspector and use the Quick Edit bar to make changes to the elements. The Catalog panel stores images and colors for use in your themes.
BlackBerry Theme Builder workspace User Guide Inspector Active Call Button Lock Screen Shortcut Bar Global items External Screen Description You can click the Active Call screen button in the Inspector to access options to change background images, icons, and font settings for the Active Call phone screen. You can click the Lock screen selector to access the options to change the fonts and the images to use on the Lock screen.
BlackBerry Theme Builder workspace User Guide Button Preview Theme on Simulator Description You can click Preview Theme on BlackBerry to see how a theme appears on a BlackBerry device. You must first connect your computer to a device that you create the theme for. Preview Theme on BlackBerry You can click Show the Application Banner to make changes to the Application banner. This button appears on the toolbar if you selected the Banner button in the Inspector.
Align objects User Guide Button Show the Titlebar Show the Search field Show the Menu Show the Dialog and Button Show the Group Box Show the Popup Menu Description You can click Show the Titlebar to show or hide the title bar in the preview area of the canvas. When the title bar is visible in the preview area of the canvas, you can make changes to the appearance of the title bar. This button appears on the toolbar if you selected the Controls button in the Inspector.
User Guide Selecting multiple objects Selecting multiple objects You can select more than one object and make changes to all the objects at one time. For example, you can select multiple text objects in the Home screen banner and on the Quick Edit bar you can select the font to use for all the objects. You can also select multiple objects to move them simultaneously or to align them.
Configuring the BlackBerry Theme Builder User Guide Configuring the BlackBerry Theme Builder 2 Change the screen that appears when the BlackBerry Theme Builder starts By default, the Quickstart screen appears when you start the BlackBerry® Theme Builder. On this screen, you can create new theme projects, open existing projects, and access the documentation. If you typically open an existing project, you might want to specify that the Open dialog box appears instead. 1. 2.
Change the applications that you use for editors User Guide Description 3. Provide a brief description of the theme. Limit the description to one or two sentences. Click OK. Change the applications that you use for editors You can specify which applications to use as the default for image editors, SVG editors, and audio editors. 1. 2. On the Edit menu, click Preferences. On the Applications tab, click Browse and select the application to use for each file type.
Show or hide BlackBerry Theme Builder tools User Guide Show or hide BlackBerry Theme Builder tools If a BlackBerry® Theme Builder tool isn't displayed on the UI of the BlackBerry Theme Builder, you can click the tool name on the Window menu to show it. To hide the tool, you can click the tool name on the Window menu again. On the Window menu, perform one of the following actions: Task Steps Show or hide the Inspector panel. Click Inspector. Show or hide the Quick Edit bar. Click Quick Edit.
User Guide 4. Click OK. Turn off the SVG preview 1. 2. 3. 4. 24 On the Edit menu, click Preferences. Click the SVG tab. Clear the SVG Preview check box. Click OK.
User Guide Creating and changing theme projects Creating and changing theme projects 3 You can create your new theme project using the selected layout type as your starting point. You can change from one layout type to another at any time, however, if you customize the Home screen, the customizations do not apply in the new theme layout. Other changes that you make in the theme project apply. You must create your theme project for the specific screen dimensions of a BlackBerry® device.
User Guide Open a theme project Open a theme project 1. On the File menu, click Open, and navigate to the (.thm) file for the theme project that you want to open. 2. Click Open. Update a theme project created with an earlier version of the BlackBerry Theme Builder Themes that were created with earlier versions of BlackBerry® Theme Builder are not compatible with later versions of the BlackBerry® Device Software.
User Guide Changing theme layouts and screen sizes When you import a theme that targets a different screen size, all modified theme elements are imported into your new theme. After the theme is imported, you may need to make some slight adjustments, for example, in the placement of banner elements, to achieve the desired results. Change the layout type 1. 2. On the Edit menu, click Change Layout Type. Select the layout type that you want to use.
Working with images User Guide Working with images 4 When you add an image to a theme, the BlackBerry® Theme Builder stores the converted image as part of the theme. If the image is not a .png file, BlackBerry Theme Builder converts the image to a .png file. If you change the source image, the BlackBerry Theme Builder does not update the image in the theme automatically; you must reload the source image into the theme to update it.
User Guide • • 1. 2. 3. Best practice: Creating effective designs The file names of your images must have the same file names that the BlackBerry Theme Builder uses as default file names. To see the names of the files for your theme type, you can navigate to the images folders (C:\Program Files\Research In Motion\BlackBerry Theme Studio 6.0\samples\Themes\Images\BlackBerry6_360x480).
User Guide Creating background images for dynamically sized screen elements Since background images for dynamic elements require borders and you do not know what size you should use for the dynamic elements, you should use dynamic background images instead of static images. If you create an image that includes a border and background and then scale the image to fit, the borders scale as well, resulting in inconsistent border widths for similar elements.
Creating images with multiple states User Guide Creating images with multiple states Themes contain several elements that you cannot create a single static image for. Some images must display different levels or states. For example, the battery meter displays how much power remains in the battery. The image for the battery meter must display the battery power levels from 100% power to 0% power. The image must also show the increase in the battery power level as the battery charges.
Creating images with multiple states User Guide Element Component images Description wireless coverage indicator 9 This composite image must include one row of 9 equal-sized images.
Creating images with multiple states User Guide Element Component images Description Example: Message list images with multiple states Element message icons Component images 96 Description This composite image must include four rows of 24 equal-sized images, that represent all possible message types that the message list can display. The message list can contain messages of three types: email messages, SMS text messages, and MMS messages.
Creating images with multiple states User Guide Element Component images Description web icons 6 This composite image must include one row of 6 equal-sized images, representing all the possible browser-related messages that appear in the messages list.
Best practice: Creating images User Guide Element Component images Description • • • BlackBerry® Bold™ 9000 smart phone BlackBerry® Curve™ 8900 smartphone BlackBerry® Pearl™ Flip 8200 Series smartphone The following BlackBerry devices support 13 phone states: Phone volume (active call) 11 • BlackBerry® 8800 Series smartphone • BlackBerry® 8700 Series smartphone • BlackBerry® Curve™ 8500 Series smartphone • BlackBerry® Curve™ 8350i smartphone • BlackBerry® Curve™ 8300 Series smartphone This composit
Image sizes for the BlackBerry Torch 9800 smartphone User Guide Screen element Home screen Application list Controls Image Application list Application list (landscape) alarm indicator new items indicator unread icons Image size in pixels 360 x 21 480 x 21 11 x 13 to 21x 21 21 x 21 composite image 252 x 21 focus icon focus icon (landscape) underlay focus for profiles icon overlay battery meter component image 21 x 21 360 x 60 480 x 60 40 x 40 21 x 21 composite image 396 x 32 signal meter componen
Image sizes for the BlackBerry Style 9670 smartphone User Guide Screen element Phone Lock screen Global images Image message icons Image size in pixels component image 26 x 26 composite image 624 x 104 phone receiver (active phone call) component image 26 x 26 composite image 396 x 25 volume control (active phone call) component image 36 x 25 composite image 880 x 4 phone icons (phone hotlist) component image 80 x 4 composite image 522 x 29 button active, button focus, button disabled (phone h
Image sizes for the BlackBerry Style 9670 smartphone User Guide Screen element Home screen Application list Controls Image underlay focus for profiles icon unread icons Image size in pixels component image 29 x 12 36 x 36 composite image 325 x 22 Wi-Fi® signal meter component image 25 x 22 composite image 108 x 15 background focus search icon tab, tab focus tray, tray focus application icons move icon dialog box icons dialog box background pop-up focus pop-up background group box body component i
Image sizes for the BlackBerry Bold 9780 smartphone User Guide Screen element Phone Lock screen Global images Image message icons Image size in pixels component image 29 x 29 composite image 696 x 116 phone receiver (active phone call) component image 29 x 29 composite image 396 x 25 volume control (active phone call) component image 36 x 25 composite image 880 x 4 phone icons (phone hotlist) component image 80 x 4 composite image 522 x 29 phone icons (active call) button, button focus (active
Image sizes for the BlackBerry Bold 9780 smartphone User Guide Screen element Image Image size in pixels to composite image 468 x 38 signal meter component image 39 x 19 composite image 261 x 12 component image 29 x 12 to composite image 306 x 14 Wi-Fi® signal meter component image 34 x 14 composite image 108 x 15 component image 18 x 15 to composite image 132 x 18 Home screen Application list Controls background search icon tray, tray focus icons move icon dialog box icons dialog box background
Image sizes for the BlackBerry Bold 9700 smartphone and BlackBerry Bold 9650 smartphones User Guide Screen element Message list Phone Lock screen Global images Image search field cursor menu arrow menu background menu cursor list cursor background web icons Image size in pixels 4 x 18 15 x 12 40 x 40 193 x 29 360 x 42 480 x 56 composite image 162 x 27 message icons component image 27 x 27 composite image 624 x 104 button, button focus (active call) button focus (incoming call) background (incoming
Image sizes for the BlackBerry Bold 9700 smartphone and BlackBerry Bold 9650 smartphones User Guide Screen element Image Image size in pixels BlackBerry 6 underlay focus for profiles icon 36 x 36 alarm indicator 11 x 13, 13 x 13, or 15 x 15 new items indicator 25 x 22 unread icons composite image 252 x 21 component image 21 x 21 focus icon battery meter 480 x 70 composite image 396 x 32 component image 33 x 16 to composite image 468 x 38 signal meter component image 39 x 19 composite image 261 x 12
Image sizes for the BlackBerry Bold 9700 smartphone and BlackBerry Bold 9650 smartphones User Guide Screen element Image Image size in pixels pop-up background group box body BlackBerry 6 tiled image tiled image BlackBerry® Device Software 5.
Image sizes for the BlackBerry Storm 9500 smartphone User Guide Screen element Image Image size in pixels BlackBerry 6 phone icons (hotlist) composite image 522x 29 component image 29 x 29 6.
Image sizes for the BlackBerry Curve 9300 and BlackBerry Curve 9330 smartphones User Guide Screen element Lock screen Global images Image background transmission arrows Alt mode, NUM lock, CAP lock multi-tap navigation arrows hourglass cursor Image size in pixels 360 x 480 22 x 22 to 50 x 30 30 x 30 to 50x 50 32 x 30 to 50x 50 15 x 11 to 28 x 18 28 x 28 to 50 x 50 Image sizes for the BlackBerry Curve 9300 and BlackBerry Curve 9330 smartphones You can use the image sizes in the BlackBerry® 6 column to c
Image sizes for the BlackBerry Curve 9300 and BlackBerry Curve 9330 smartphones User Guide Screen element Application list Controls Image Image size in pixels BlackBerry® Device Software 5.
Image sizes for the BlackBerry Pearl 9100 Series smartphones User Guide Screen element Phone Image Image size in pixels BlackBerry® Device Software 5.
Image sizes for the BlackBerry Pearl 9100 Series smartphones User Guide Screen element Image new items indicator cursor battery meter Image size in pixels Image size in pixels BlackBerry 6 BlackBerry® Device Software 5.
Image sizes for the BlackBerry Pearl 9100 Series smartphones User Guide Screen element Image Image size in pixels Image size in pixels BlackBerry 6 BlackBerry® Device Software 5.
Image sizes for the BlackBerry Tour Series, BlackBerry Curve 8900, and BlackBerry Curve 8910 smartphones User Guide Screen element Lock screen Global images Image phone icons (active call) button, button focus (active call) button focus (incoming call) background (incoming call) background (active call) background lock icon transmission arrows Alt mode, NUM lock, CAP lock navigation arrows hourglass Image size in pixels Image size in pixels BlackBerry 6 50 x 40 180 x 70 BlackBerry® Device Software
Image sizes for the BlackBerry Bold 9000 smartphone User Guide Screen element Message list Phone Lock screen Global images Image dialog box background, dialog box buttons (all states), menu background, title bar background background web icons Image size in pixels tiled image 480 x 42 composite image 156 x 26 message icons component image 26 x 26 composite image 624 x 104 phone receiver component image 26 x 26 composite image 880 x 80 volume control component image 80 x 80 composite image 990
User Guide Screen element Phone Lock screen Global images Image sizes for the BlackBerry Curve 8300, and BlackBerry 8800 Series smartphones Image phone receiver volume control incoming call background background transmission arrows Alt mode, NUM lock, CAP lock multi-tap navigation arrows hourglass cursor Image size in pixels variable (multistate image) variable (multistate image) 480 x 320 480 x 320 22 x 22 to 50 x 30 30 x 30 to 50 x 50 32 x 30 to 50 x 50 16 x 11 to 28 x 18 28 x 28 to 50 x 50 Image si
Image sizes for the BlackBerry Curve 8350i smartphone User Guide Screen element Lock screen Global images Image incoming call background background transmission arrows Alt mode NUM lock, CAP lock multi-tap navigation arrows hourglass cursor Image size in pixels 320 x 240 320 x 240 26 x 15 o 50 x 30 23 x 17 to 50 x 24 32 x 20 to 50 x 24 40 x 25 to 50 x 24 16 x 9 to 28 x 18 36 x 36 to 50 x 50 Image sizes for the BlackBerry Curve 8350i smartphone Screen element Banner Home screen (Zen theme) Controls M
Image sizes for the BlackBerry Pearl 8220 smartphone User Guide Screen element Image navigation arrows hourglass cursor Image size in pixels 10 x 7 to 28 x 18 19 x 19 to 50 x 50 Image sizes for the BlackBerry Pearl 8220 smartphone Screen element Banner Home screen (Zen theme) Controls Message list Phone Lock screen Global images Image Image size in pixels background 240 x 55 new item indicator 16 x 16 focus icon 46 x 46 battery meter variable (multistate image) signal meter variable (multistate im
Using catalogs to manage theme images and colors User Guide Screen element Home screen (Icon theme) Home screen (Zen theme) Home screen (Today theme) Controls Message list Phone Lock screen Global images Image battery meter signal meter background Image size in pixels variable (multistate image) variable (multistate image) 240 x 260 icons, focus icon new item indicator background 60 x 55 48 x 36 240 x 260 tab, tab focus new item indicator, application menu, application icon background 56 x 38
User Guide Using catalogs to manage theme images and colors If you want to create themes for various BlackBerry device models and you want to use similar background images and colors on each device, you can create the first theme, then drag the images and colors from the theme into a catalog. When you create a theme for a different BlackBerry device, you can use the catalog with the images that you added.
User Guide Using catalogs to manage theme images and colors Delete items from a catalog 1. 2. In the Catalog pane, click the item that you want to delete. In the upper-right corner of the Catalog pane, click the Delete Catalog Item button. Open a catalog In the Catalog drop-down list, click a catalog. Change a catalog 1. 2. 3. 4. In the corner of the Catalog pane, click the Catalog Options button. Click Edit. Change the name of the catalog or the types of items that you can add to the catalog.
Changing fonts for themes User Guide Changing fonts for themes 5 You can change fonts throughout your theme. You can specify a font for dialog boxes, buttons, lists, and the phone and message applications from one location. You can adjust the base font as necessary or choose a different font for a theme element. To achieve a consistent look throughout your theme, use fonts from the same font family and make minor adjustments to color and size where appropriate.
Change fonts for multiple screens User Guide Setting Stroke color Highlight font Description The stroke color specifies the color of the outline of the text. This setting is only available for text elements on the following Inspector panels: Banner, Home Screen, Icon grid, and Lock screen. When this setting is available, you can apply it to any BlackBerry font or TrueType font. The bold setting does not affect the thickness of the font stroke.
User Guide • • • • 60 Best practice: Using fonts effectively in themes complete set of bitmaps. For example, if you use the same TrueType font in a menu, but you specify different colors for the highlighted text and normal text, the BlackBerry Theme Builder must generate two complete sets of bitmaps. As with images, you should use a limited color palette for fonts. Consider the background color as well; text becomes illegible when displayed on a background of a similar color or brightness.
Using colors User Guide Using colors 6 You can use the color selector to specify the color of a theme element or to define and save a palette of custom colors. You can also save custom colors by dragging colors from the Inspector pane to the Catalog pane. Change the color of a theme element 1. 2. Click a color swatch. In the Color Picker dialog box, perform one of the following actions: Task Steps Specify an RGB color.
User Guide Customizing the Home screen Customizing the Home screen 7 The Home screen for each available base theme is unique and is the primary difference between the base themes. You can customize different elements depending on the theme layout that you choose. BlackBerry® 6 layout types include a Today Home screen that provides a quick view of email messages and phone calls. If you choose a Zen layout type, the Home screen displays application icons along the bottom of the BlackBerry® device screen.
User Guide Create a wallpaper that changes on specific dates or time 3. 4. 5. 6. 7. Click Slideshow. In the Slides section, click Add. In the Open dialog box, click the images that you want to include in the wallpaper. Click Open. In Time Between Slides, click the up and down arrows to choose how long you want to display an image and click the drop-down list to select the unit of time. 8. To change the order of the images in your slide show, in the Slides area, drag an image to a new location. 9.
User Guide 4. 5. 6. Customizing a Today theme Home screen To change the font color, on the Quick Edit bar, click the Fill box and click a color. To change the font outline, on the Quick Edit bar, click the Stroke box and click a color. To change the text alignment, on the Quick Edit bar, click the Alignment button. Customizing a Today theme Home screen Change the images on the Home screen for Today applications 1. 2. 3. In the Inspector, click the Home Screen button.
User Guide Customizing a Home screen with a BlackBerry 6 theme layout • To change the image that is displayed in front or behind the application icon that the user selects, on the Quick Edit bar, click the Tab Focus drop-down list. 3. 4. 5. 6. 7. Click Change Image. Navigate to an image. Click Open. To display the Tab image or Tab Focus image in front of an application icon, in the Inspector, select the Overlay option.
User Guide Customizing a Home screen with a BlackBerry 6 theme layout Change the background color of the Notification bar You can change the color of the background of the Notification bar in a theme with a BlackBerry® 6 layout. 1. 2. 3. 4. 5. 6. 7. In the Inspector, click the Home Screen button. In the preview area of the canvas, click the Notification bar. On the Quick Edit bar, in the Notify Background drop-down list, click Change Image. Click Color or Gradient.
Customizing a Home screen with a BlackBerry 6 theme layout User Guide 2. 3. 4. 5. 6. 7. 8. In the preview area of the canvas, in the Notification bar, click the number that represents the number of unread items. On the Quick Edit bar, in Unread Font, click a font. To change the size of the text, in the Size field, type a number. To apply bold, click the Bold button. To apply italic, click the Italics button. To apply anti-aliasing, click the Anti-alias button.
Customizing a Home screen with a Custom or Custom 6 theme layout User Guide Change the font settings for the a. subentry. b. c. d. e. f. In the preview area of the canvas, click an entry under an application, for example an email message under the Message application. On the Quick Edit bar, in the Font drop-down list, click a font. To change the size of the text, in the Size field, type a number. To apply bold, click the Bold button. To apply italic, click the Italics button.
User Guide Customizing a Home screen with a Custom or Custom 6 theme layout Layer the Home screen over the banner You can create a layered effect by placing the Home screen over the banner. The .svg file and any applications that you choose are placed in front of the banner. 1. 2. In the Inspector, click the Home Screen button. On the Quick Edit bar, in the Home Screen section, select the Home Screen Over Banner check box. Customize the cursor navigation path on a Home screen with a Custom layout 1. 2.
User Guide Customizing a Home screen with a Custom or Custom 6 theme layout • To create horizontal links automatically, select the Auto Create Horizontal Defaults option. • To create links manually, select the Do Not Create Default Links option.
User Guide Designing banners Designing banners 8 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, Wi-Fi® connection indicator, and roaming indicator battery power indicator sound profile indicator search icon Bann
User Guide Change the size of a banner Change the size of a banner You can set the banner height to a value between 10 pixels and 120 pixels. If you are creating a theme for a BlackBerry® device that is running BlackBerry® 6, you can only change the size of the Home screen banner. 1. 2. In the Inspector, click the Banner button. To change the size of the Home screen banner, do the following: a. On the Toolbar, click Show the Home Screen Banner. b.
User Guide Move the banner elements Move the banner elements 1. In the Inspector, click the Banner button. 2. 3. 4. On the Toolbar, click Turn On/Off Bounding Boxes. Click a bounding box and drag it to the location that you want. To remove the bounding boxes, on the Toolbar, click the Turn On/Off Bounding Boxes. Change the underlay image for the Profiles icon 1. 2. 3. 4. 5. 6. 7. In the Inspector, click the Banner button. On the Toolbar, click Show the Home Screen Banner.
User Guide Customizing external flip screens Customizing external flip screens 9 You can customize external flip screens of BlackBerry® Pearl™ Flip Series devices using the same elements you use for other BlackBerry devices. However, you can access additional BlackBerry Pearl Flip Series device elements from the Inspector to customize additional UI elements on the external screen. Customize the external Home screen 1. 2. 3. 4. 5. 6. 7. In the Inspector, click the External Screen button.
User Guide b. Customize indicators on the external screen On the Quick Edit bar, click the color swatch and specify the color that you want to use. 5. To change the indicator images for notifiers, do the following: a. In the Inspector, click the Show Notifiers radio button and click the image for each type of notifier b. Navigate to an image. 6. To change the indicator images for alerts, do the following: a.
Customizing BlackBerry devices with touch screens User Guide Customizing BlackBerry devices with touch screens 10 You can customize BlackBerry® devices with a touch screen using the same elements that you use for other devices. However, you can customize additional UI elements for portrait and landscape modes.
User Guide Change background images for the Shortcut bar Change background images for the Shortcut bar The Shortcut bar appears only on BlackBerry® devices with a touch screen. 1. 2. 3. 4. 5. 6. In the Inspector, click the Shortcut Bar button. In the preview area of the canvas, click the element in the Shortcut bar that you want to change the background image for. On the Quick Edit bar, click the drop-down list next to the name of the image. Click Change Image. Navigate to an image. Click Open.
Customizing the Application List screen User Guide Customizing the Application List screen 11 The Application List screen is a part of all theme layouts. It is the Home screen for the Icon layout type, and is the Application List screen for the Zen, Today, and Custom layout types. Change the background image for the Application list screen You can change the background image for the Application list screen, except for a theme with a BlackBerry® 6 layout. 1. 2. 3. 4.
Change the font for the calendar User Guide Change the background color of the tray. d. e. f. g. To apply bold, click the Bold button. To apply italic, click the Italics button. To apply anti-aliasing, click the Anti-alias button. To change the alignment of text, click the Alignment button. a. b. In the preview area of the canvas, click the tray. On the Quick Edit bar, in the Tray Background drop-down list, click Change Color. Click a color. Click OK. c. d. Change the font for the calendar 1. 2. 3.
User Guide 1. 2. 3. 4. Add a link to the Application list screen In the Inspector, click the Application List Screen button. On the Quick Edit bar, in the Application List section, click Application Icons. Drag the folder that contains the icons to the Application Icons dialog box. Click Close. Add a link to the Application list screen On the Application list screen, you can add up to ten icons that link to specified web pages.
Customizing UI controls and application lists User Guide Customizing UI controls and application lists 12 Show or hide UI controls You can show only the controls that you want to change the appearance for and you can hide the other controls. 1. 2. In the Inspector, click the Controls button. On the Toolbar, perform any of the following actions: Task Steps Show or hide dialog boxes and dialog box buttons. Click Show the Dialog and Buttons. Show or hide the menu. Click Show the Menu.
Change the images for UI controls User Guide Change the image for a button. You can change the image for buttons in normal, disabled, highlight, disabled highlight, and active states. a. On the Toolbar, click the Show the Dialog and Buttons button. b. c. In the preview area of the canvas, click a button in the dialog box. On the Quick Edit bar, in the drop-down list next to the name of the button, click Change Image. Navigate to an image. Click Open. d. e. Change the background for a menu.
Change the text settings for UI controls User Guide Change the image for the group box a. body. b. c. d. e. Change the background image for the a. pop-up menu. b. c. d. e. Change the focus image for the pop- a. up menu. b. c. d. e. On the Toolbar, click the Show the Group Box button. In the preview area of the canvas, click the body of the group box. On the Quick Edit bar, click the Body drop-down list and click Change Image. Navigate to an image. Click Open.
Change colors for UI controls User Guide Change text settings for the title bar. a. b. c. On the Toolbar, click Show the Titlebar. In the preview area of the canvas, click the text in the title bar. On the Quick Edit bar, select the font, font size, and font style. Change text settings for the search field. a. b. c. On the Toolbar, click Show the Search Field. In the preview area of the canvas, click the text in the search field. On the Quick Edit bar, select the font, font size, and font style.
Change colors for UI controls User Guide b. c. d. e. Change the colors for list elements. In the preview area of the canvas, click the cursor. On the Quick Edit bar, click a color swatch. In the Color Picker dialog box, select a color. Click OK. You can change the color for list stripes, the highlight font, the highlight for multiple selected items, and the cursor. a. b. c. d. In the preview area of the canvas, click an element in the list. In the Quick Edit bar, click a color swatch.
User Guide Customizing the message list Customizing the message list 13 Change the text settings for the date 1. 2. 3. In the Inspector, click the Message List button. In the preview area of the canvas, click the date. On the Quick Edit bar, select the font, font size, font style, color, or outline. Change the background image for the date bar 1. 2. 3. 4. 5. In the Inspector, click the Message List button. In the preview area of the canvas, click the background image for the date bar.
User Guide Change the color for messages sent with high importance Change the color for messages sent with high importance You can specify the color of messages that are sent with high importance to the BlackBerry® device. 1. 2. 3. 4. 5. In the Inspector, click the Message List button. In the preview area of the canvas, click a message sent with high importance. On the Quick Edit bar, click the Priority 1 color swatch. Specify a color. Click OK.
User Guide Customizing the Phone screens Customizing the Phone screens 14 You can customize the Phone hotlist, the Active Call screen, and the Incoming Call screen. Depending on the phone screen and the BlackBerry® device model, you can change the text color, font, background, and composite images that are used on the phone. You can also add a ring tone to the Incoming Call screen.
Add a ring tone User Guide 3. 4. 5. On the Quick Edit bar, in the drop-down list next to the name of the image that you want to change, click Change Image. Navigate to an image. Click Open. Add a ring tone You can add a ring tone to themes for devices that run BlackBerry® Device Software 5.0 or later. The sound file must not exceed 4 MB. 1. 2. 3. 4. 5. 6. 7. In the Inspector, click the Incoming Call button. On the Quick Edit bar, in the Incoming Call Screen section, click the folder beside Ring Tone.
Incoming Call screen settings for BlackBerry devices with a touch screen User Guide Area Icons Element Conference Buttons Speaker Flash/Hold Resume Bluetooth Mute Add Participant Join Unmute Description Change text properties for conference call text. Change text properties for button text. Change the icon image for the Speaker button. Change the icon image for the Flash/Hold button. Change the icon image for the Resume button. Change the icon image for the Bluetooth button.
User Guide Customizing the Lock screen Customizing the Lock screen 15 Change the background image for the Lock screen If the image does not have the same dimensions as the BlackBerry® device screen, the BlackBerry Theme Builder scales the image to fit. 1. 2. 3. 4. 5. In the Inspector, click the Lock Screen button. In the preview area of the canvas, click the background image. On the Quick Edit bar, in the Background drop-down list, click Change Image. Navigate to an image. Click Open.
User Guide Layer the Lock screen over the banner Layer the Lock screen over the banner The owner information appears on the BlackBerry® device when the BlackBerry device is locked. You can create a layered effect on the Lock screen so that an .svg file and the owner information appear in front of the banner. If the owner information and the banner items overlap, both are visible, but the owner information appears to be on top of the banner item. 1. 2. 3. 4. 5.
Customizing global UI elements User Guide Customizing global UI elements 16 You can use the Global Items Inspector to change the UI elements used across all BlackBerry® applications. Change images for global UI elements 1. 2. In the Inspector, click the Global Items button. Perform any of the following actions: Task Steps Change the send and receive data images. a. Change the key modifier images. b. In the preview area of the canvas, click the transmission icon.
Change colors for global UI elements User Guide c. d. e. Click Change Image. Navigate to an image. Click Open. Change colors for global UI elements 1. 2. In the Inspector, click the Global Items button. Task Steps Change the color of the progress indicator. a. b. Change the color of the progress indicator text. c. In the Color Picker dialog box, click a color. d. Click OK. a. In the preview area of the canvas, click either the complete or incomplete part of the progress bar.
User Guide 3. 4. Apply screen transitions In the drop-down list for the screen or list, click a transition effect. You can click the button beside each drop-down list to preview the screen transition effects that are available. Click Close.
User Guide Testing your theme Testing your theme 17 You can test your themes by using the BlackBerry® Smartphone Simulator or a BlackBerry device. Using the BlackBerry Smartphone Simulator to test your theme You can use the BlackBerry® Smartphone Simulator to simulate the functionality of a BlackBerry device in a range of conditions.
User Guide Test your theme on a device View a theme in the BlackBerry Smartphone Simulator After you configure the BlackBerry® Smartphone Simulator, you can view a theme in the BlackBerry Smartphone Simulator to test how it appears. 1. 2. On the toolbar, click Preview Theme on Simulator. Navigate through the UI to verify that images, colors, and fonts appear as expected.
User Guide Managing themes on the BlackBerry device Managing themes on the BlackBerry device Delete a theme from the BlackBerry device 1. 2. 3. 4. Connect your BlackBerry® device to a computer. On the File menu, click Manage themes on Blackberry. Click a theme. Click Delete. After you delete the themes, the BlackBerry device restarts automatically.
Making themes available to BlackBerry device users User Guide Making themes available to BlackBerry device users 19 Considerations for exporting themes When you export a theme, the BlackBerry® Theme Builder places the theme automatically in a .cod file that BlackBerry devices that are running BlackBerry® Device Software 4.2 or later can read. Depending on the export type that you choose, the BlackBerry Theme Builder also creates either an .alx file or a .
Add a theme to a .zip file to upload to BlackBerry App World User Guide Consideration Description • Include international characters You can export the theme so that BlackBerry device users can download it over the wireless network directly to a BlackBerry device. • You can export the theme so that BlackBerry device users can export the theme from the BlackBerry Theme Builder to a BlackBerry device that they connect to their computer.
User Guide Install a theme directly on the BlackBerry device After you finish: In BlackBerry App World, you must create an application in the vendor portal and set the category to Themes. For more information about adding applications to BlackBerry App World, see the administration guide for the BlackBerry App World storefront Vendor portal. Before you submit an application for review, you can change any information about the application.
User Guide 6. 7. 8. Export a theme for distribution using the application loader tool of the BlackBerry Desktop Manager In the Target OS drop-down list, click the version of the BlackBerry® Device Software that you created the theme for. To overwrite any existing files automatically, select the Overwrite existing files check box. If you want to support the theme in languages other than English, select the Include international characters check box. The BlackBerry Theme Builder creates a .
User Guide Export a theme for distribution using the application loader tool of the BlackBerry Desktop Manager Distribute the .alx and .cod files to all BlackBerry device users who require the theme.
User Guide Provide feedback about the BlackBerry Theme Studio Provide feedback about the BlackBerry Theme Studio Research In Motion can use the feedback that you provide to help improve the BlackBerry® Theme Studio. Before you begin: You must register and log in to the BlackBerry® Developer Zone. 1. 2. 104 In the BlackBerry Theme Builder, on the Help menu, click Report Issue. Submit your feedback using the Developer Issue Tracker.
User Guide Provide feedback Provide feedback 21 To provide feedback on this deliverable, visit www.blackberry.com/docsfeedback.
User Guide Legal notice Legal notice 22 ©2011 Research In Motion Limited. All rights reserved. BlackBerry®, RIM®, Research In Motion®, and related trademarks, names, and logos are the property of Research In Motion Limited and are registered and/or used in the U.S. and countries around the world. Adobe Illustrator is a trademark of Adobe Systems Incorporated. Bluetooth is a trademark of Bluetooth SIG. TrueType is a trademark of Apple Inc. Wi-Fi is a trademark of the Wi-Fi Alliance.
User Guide Legal notice REFERENCED HEREIN INCLUDING WITHOUT LIMITATION ANY OF THE FOLLOWING DAMAGES: DIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, INDIRECT, SPECIAL, PUNITIVE, OR AGGRAVATED DAMAGES, DAMAGES FOR LOSS OF PROFITS OR REVENUES, FAILURE TO REALIZE ANY EXPECTED SAVINGS, BUSINESS INTERRUPTION, LOSS OF BUSINESS INFORMATION, LOSS OF BUSINESS OPPORTUNITY, OR CORRUPTION OR LOSS OF DATA, FAILURES TO TRANSMIT OR RECEIVE ANY DATA, PROBLEMS ASSOCIATED WITH ANY APPLICATIONS USED IN CONJUNCTION WITH RIM PR
User Guide Legal notice The terms of use of any RIM product or service are set out in a separate license or other agreement with RIM applicable thereto. NOTHING IN THIS DOCUMENTATION IS INTENDED TO SUPERSEDE ANY EXPRESS WRITTEN AGREEMENTS OR WARRANTIES PROVIDED BY RIM FOR PORTIONS OF ANY RIM PRODUCT OR SERVICE OTHER THAN THIS DOCUMENTATION.
