s40 ts 2 2 users guide

8/3/2019 S40 TS 2 2 Users Guide

1/54

Nokia Series 40 Theme StudioVersion 2.2

User GuideSeptember 2006


2/54

Copyright Nokia 2006. All rights reserved.

This document is for use with the Series 40 Theme Studio. Reproduction, transfer, distribution or

storage of part or all of the contents in this document in any form without the prior written permission

of Nokia is prohibited.

Nokia, Series 40 Theme Studio, and the Nokia Connecting People logo are trademarks or registered trademarks

of Nokia Corporation. Other product and company names mentioned herein may be trademarks or trade names of

their respective owners.

Java and all Java-based trademarks and logos are trademarks or registered trademarks of Sun

Microsystems, Inc.

Nokia operates a policy of on-going development. Nokia reserves the right to make changes and

improvements to any of the products described in this document without prior notice.

UNDER NO CIRCUMSTANCES SHALL NOKIA BE RESPONSIBLE FOR ANY LOSS OF DATA OR

INCOME OR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL OR INDIRECT DAMAGES

HOWSOEVER CAUSED.

THE CONTENTS OF THIS DOCUMENT ARE PROVIDED "AS IS". EXCEPT AS REQUIRED BY

APPLICABLE LAW, NO WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED,

INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY

AND FITNESS FOR A PARTICULAR PURPOSE, ARE MADE IN RELATION TO THE ACCURACY,

RELIABILITY OR CONTENTS OF THIS DOCUMENT. NOKIA RESERVES THE RIGHT TO

REVISE THIS DOCUMENT OR WITHDRAW IT AT ANY TIME WITHOUT PRIOR NOTICE.

The availability of particular phone products may vary by region. Please check with the Nokia dealer

nearest to you.

Visit Forum Nokia (http://www.forum.nokia.com), the site designed for developers using technologiessupported by Nokia.
http://www.forum.nokia.com/http://www.forum.nokia.com/


3/54

Nokia Series 40 Theme Studio 2.2 User Guide 1

Content

About this document..........................................................................................................................3

Target audience ............................................................................................................................. 3

Typographical conventions ............................................................................................................ 3

References ..................................................................................................................................... 3

Introduction to Nokia Series 40 Theme Studio...............................................................................5

Supported content types and elements for each handset ..................................................................6

Sending comments to Nokia Corporation.......................................................................................7

Getting started with Nokia Series 40 Theme Studio......................................................................9

Defining Nokia Series 40 Theme Studio preferences...................................................................... 11

Theme Editor.....................................................................................................................................13

Editor buttons.............................................................................................................................. 14

Importing media files................................................................................................................. 15

Naming media files.................................................................................................................... 15

Theme Editor tabs ....................................................................................................................... 15

Default tab ................................................................................................................................ 16

Idle tab...................................................................................................................................... 17

Main Menu tab ......................................................................................................................... 18

Menu Icons sub-tab................................................................................................................ 18

List View, Grid View and Tab View sub-tabs.......................................................................... 20

General tab ............................................................................................................................... 20

Animations sub-tab ................................................................................................................ 21

Alerts sub-tab......................................................................................................................... 21

Thumbnails sub-tab ............................................................................................................... 22

Apps tab.................................................................................................................................... 22

Audio sub-tab ........................................................................................................................ 22

Calendar sub-tab.................................................................................................................... 23

Forms sub-tab ........................................................................................................................ 24

Sounds tab ................................................................................................................................ 24

Mini Screen tab ......................................................................................................................... 25

Managing themes .............................................................................................................................27

Creating new themes.................................................................................................................... 27

Opening existing themes .............................................................................................................. 28

Editing themes ............................................................................................................................. 28

Editing the theme name ............................................................................................................. 28

Editing colors ............................................................................................................................ 29

Editing images ........................................................................................................................... 31

Image scaling.......................................................................................................................... 32

Full screen images................................................................................................................... 32


4/54

2 Nokia Series 40 Theme Studio 2.2 User Guide

Highlight images .................................................................................................................... 34

Main menu icons.................................................................................................................... 34

Miscellaneous images ............................................................................................................. 35

Editing sounds........................................................................................................................... 36

Evaluating themes........................................................................................................................ 37

Evaluating themes with Screen Options...................................................................................... 37

Evaluating icons against the wallpaper.................................................................................... 38Evaluating note texts against backgrounds.............................................................................. 38

Evaluating the appearance of list and form items, and icons .................................................... 39

Evaluating full-screen animations and calendar options........................................................... 40

Evaluating themes with Bill of Materials .................................................................................... 41

Saving themes .............................................................................................................................. 41

Theme file format...................................................................................................................... 42

Unpacking themes ..................................................................................................................... 42

Duplicating themes ...................................................................................................................... 42

Uploading themes to a handset or SDK .........................................................................................45

Index ..................................................................................................... .............................................47


5/54


About this document

This document describes how to use the Nokia Series 40 Theme Studio. When referringto Nokia Series 40 Theme Studio, this document uses the abbreviation Nokia S40 TS.

Target audience

Read this document if you want to create and simulate user interface themes for a Series40 handset. The themes consist of elements such as a color scheme, wallpaper, screen

saver, and ringtone.

Typographical conventions

This document uses the following typographical conventions:

References

The following documents contain additional information about Nokia S40 TS:

Nokia Series 40 Theme Studio Handset Guidelines

Notation Explanation

Courier Text that you enter (as opposed to system prompts and responses)

Italic Names of books and documents or new terminology

Bold Names of menus, commands, buttons, and icons

Link Active link


6/54

About this document


Nokia Series 40 Theme Studio Installation Guide

Nokia Series 40 Theme Studio Release Notes

You can download the Installation Guide in www.forum.nokia.com/themes. The otherdocuments are located in the Help menu of Nokia S40 TS.
http://www.forum.nokia.com/themeshttp://www.forum.nokia.com/themes


7/54


Introduction to Nokia Series 40 Theme Studio

Nokia S40 TS allows you to create and modify theme packages for Series 40 handsets.

Themes (or skins) are used to change the look (and sound) of the user interface (UI) of a

mobile phone. A theme consists oftheme elements, which can include:

Background images displayed under various conditions and applications

Highlight images used as selection highlights in lists

Menu icons to replace the standard main menu item icons and animations

Colors for various fonts and background areas

Ringtones played in response to various alerts

After coordinating and previewing the elements of a theme, you can save the theme.Nokia S40 TS saves a theme in a single .nth (Nokia THeme) file that the consumer candownload and apply to their handset. So, by modifying the appearance of some or all ofthe theme elements, you can create a whole new look for the handset UI.

All theme elements, except the theme name, are optional. If an element is not specifiedin a theme, the handset uses the default resource or color value built into the handset.

Make sure that you have image and audio editing applications installed on your system.

Nokia S40 TS cannot edit the media files themselves, it only allows you to view themand import them into theme packages.

Nokia S40 TS is delivered with several display simulations. A display simulation

provides the graphics and layout of a specific handset display. The purpose of a displaysimulation is to help you design a theme for handsets that have common characteristics


8/54



(especially screen size). Display simulations also let you see how one theme displays ondifferent handsets:

Figure 1: Example of one theme displayed on different display simulations

Note: Display simulations are combinations of actual handset screens, and as such donot illustrate any individual handset screens. To see how a theme looks on aspecific handset, you have to upload it to the handset.

Supported content types and elements for each handset

Different handsets support different image and audio content types and different themeelements. Select Help>Handset Guidelines to open the Nokia Series 40 Theme Studio

Handset Guidelines that describes what content types and elements each handsetsupports.

If you enter an image content type that Nokia S40 TS does not support, a warningmessage is displayed in all screens using that theme element. However, the element is stillsaved in the .nth file because the handset may support it.

Identical theme

with a 64x64

wallpaper image

Different display

simulations


9/54

Sending comments to Nokia Corporation


Sending comments to Nokia Corporation

If you have an active Internet connection, you can send any comments you have aboutthis product to Nokia Corporation by selecting Help>Feedback. Selecting this optionautomatically opens www.forum.nokia.com/feedback where you can enter your

comments.
http://www.forum.nokia.com/feedbackhttp://www.forum.nokia.com/feedback


10/54




11/54


Getting started with Nokia Series 40 Theme

Studio

Before starting Nokia S40 TS, make sure the monitor is set to a minimum of 1024 x 768pixel display.

To start Nokia S40 TS from the Windows Start menu, select:

Start>Programs>Nokia Developer Tools>Nokia Series 40 Theme Studio 2.2> S40Theme Studio 2.2

An example of the window in which Nokia S40 TS opens is illustrated below.


12/54

Getting started with Nokia Series 40 Theme Studio


Figure 2: Example of the Nokia S40 TS window

To modify or save a theme, first activate it by clicking it in the Workspace. When thetheme is active:

Its title bar is highlighted.

The title bar of the Nokia S40 TS window reflects the name of the theme and thedisplay simulation it uses.

Its elements are displayed in the various tabs of the Theme Editor.

The All Screens Display shows how the theme affects different UI screens.

The state of the buttons on the toolbar (Undo, Redo, Display Size, and Zoom) reflectthe current editing state for the theme.

Tip: The Undo and Redo buttons on the toolbar do not apply to the changes made inScreen Options. They only apply to the changes made in the Theme Editor.

In theTheme Editor, you can edit thetheme elements. Each element has

an editor button and a value field.

In Screen Options, you can test how

other screen elements interact with the

theme elements.

The All Screens Display shows thumbnails of all the UI

screens available in the display simulation. To display a

screen in the Workspace, click it in the All Screens Display.

To see the name of the screen, rest the cursor over the

screen: a tool tip appears. To switch the All Screen Display

off or on, press F5.

The Workspace shows the themes on different display

simulations. Click on a theme to activate it and display all

simulation screens in the All Screens Display.

Toolbar


13/54

Defining Nokia Series 40 Theme Studio preferences


To manage the theme and the Nokia S40 TS window, use the menus or the toolbarbuttons. You can also right-click the theme window in the Workspace to display the

following floating menu:

Figure 3: Floating theme menu

Defining Nokia Series 40 Theme Studio preferences

Preferences allow you to control the interface of Nokia S40 TS without any effects on

the theme you are designing.To increase or decrease the size of the images for the active theme in the Workspace andAll Screens Display, select View>Zoom>[Zoom factor]. The available zoom factors forthe Workspace are 100, 200, and 300. The All Screens Display only supports factors 100and 200: if you select the factor 300, 200 is used.

To control how many files are listed in the recent files list of the File menu, selectView>Options. The following Options window opens:

Figure 4: Options window

The maximum number of files that can be listed is 10.


14/54

Getting started with Nokia Series 40 Theme Studio



15/54


Theme Editor

Theme Editor is the main part of Nokia S40 TS where all theme editing takes place.

Figure 5: Theme Editor

You edit the themes in the Theme Editor by importing images and audio files andselecting color values for each theme element you want to customize. When you save thetheme, all the elements in the Theme Editor that have been set to a value are saved as atheme in a file with a.nth suffix.

The themes are independent of any specific handset. A handset ignores any themeelement that it does not support. This feature allows you to create one theme thatcontains all the elements for a variety of handsets.

All image and audio media that are delivered with Nokia S40 TS are the copyrightedproperty of Nokia and must not be distributed as part of a theme that is soldcommercially. The media are offered in the application as example files with which you


16/54

Theme Editor


can experiment while learning to use the Theme Editor. You can see the examples in theTheme Editor drop-down menus.

Editor buttons

Each theme element has one or more buttons that are part of the elements editing areain the Theme Editor:

An example of the editing areas of the Theme Editor is illustrated below.

Figure 6: Editing areas in the Theme Editor

A Browse button allows you to import an image, animation, or audio filefrom your local file system.If the file you want has already been imported for the theme, you canselect it from the drop-down menu without having to import it.

A Color Edit button allows you to specify or clear a color value for anelement. It displays a color editor with multiple editing styles.

A Play button allows you to audition an audio element (if AppleQuicktime 7 or later is installed on your system).

Editor buttons allow you to

change the current element value.


17/54

Theme Editor tabs


Importing media files

The Browse button shows that an image, animation or audio file can be imported andused as a value for a theme element. To import a file, do one of the following:

Click the Browse button and browse to the media file you want to import.

Drag the media file from Windows Explorer and drop it on the element in the ThemeEditor.

Drag the media file from Windows Explorer and drop it on the active theme in theWorkspace, or a screen in the All Screens Display.Note that the active screen on the Workspace or the screen in the All Screens Displayon which the file is dropped determines which element is set.

Tip: If you update a file that you have previously imported to a theme, that file is not

automatically updated in Nokia S40 TS. Nokia S40 TS creates internal copies ofthe imported files and does not monitor the original files. If you want to updatethe file in the theme, import it again.

Naming media filesIn theme packages, the file names of all imported image, animation, and audio files mustbe unique within the package. Nokia S40 TS enforces this policy. If you import a file thathas the same name (but different data) as a file already assigned to one or more themeelements, Nokia S40 TS replaces all occurences of the old file with the new one. This isespecially useful when you are updating a file that is assigned to multiple elements - youonly need to update one item.

If you want to assign different files to different theme elements, the files must havedifferent names, even if they are imported from different directories.

Theme Editor tabs

The Theme Editor is divided into seven tabs:

Default - Elements that apply to the common elements

Idle - Elements that apply to the Idle and Active Idle screens

Main Menu - Menu item icons and other elements for the main menu views

Dragging and dropping on this screen Sets this theme element

Idle Screen Wallpaper (main)

Active Idle Screen Wallpaper (main)

Full Screen Animations Screen Saver Animation (main)

Any other screen Background (main)


18/54

Theme Editor


General - Miscellaneous elements, such as animations and alerts, not associated witha specific screen or feature

Apps - Application-specific elements

Sounds - Audio elements and related constraints

Mini Screen - Elements that only apply to the mini screen of the flip phonesAll elements in these tabs do not appear in all display simulations, and even if the

element is displayed in the simulation, it may not be supported by some handsets. Forexample, some handsets can ignore some of the main menu icons, and all single-screenhandsets ignore mini screen elements.

Default tab

The Default tab of the Theme Editor allows you to edit elements that affect the common

elements of all UI screens.

Figure 7: Default tab

The element editors in the Default tab allow you to edit the font color of common text

elements and the background images of the softkey areas and the main screen.


19/54

Theme Editor tabs


Idle tab

The Idle tab of the Theme Editor allows you to edit the background images and fontcolors for the elements that are displayed on the Idle and Active Idle screens. The Idle tab

contains two sub-tabs: Idle Screen and Active Idle.

Figure 8: Idle Screen sub-tab

Figure 9: Active Idle sub-tab

The Idle Screen sub-tab contains the elements that are displayed on the Idle screen onlyor on both the Idle and Active Idle screens. The Active Idle sub-tab contains the elementsthat are displayed on the Active Idle screen only.


20/54

Theme Editor


Main Menu tab

Themes allow you to customize the icons that the handset displays to represent items inthe main menu - for example, Gallery, Organizer, and Settings. You can even specify

different images and animations for different views (tab, list and grid) for a given menuitem.

The Main Menu tab of the Theme Editor allows you to edit the background and menu

item images of the main menu. The Main Menu tab contains four sub-tabs:

Menu Icons

List View

Grid View

Tab View

Menu Icons sub-tab

The elements associated with a given menu item are called a Menu Item Set. There arefour theme elements in a Menu Item Set:

List. The image displayed for this menu item in the list and tab menu views. Thisimage is also displayed in the Active Idle shortcut bar. If you define an animation file

for this element, only the first frame of the animation is displayed.

Grid. The image displayed for this menu item in the grid menu view, when the item is

not highlighted (selected).

Animated Grid. The animation that is displayed for this menu item in the grid menu

view when the item is highlighted (selected). If you specify the same animation file forboth the Grid and Animated Grid elements for a given menu item, the handset

displays the first frame of the animation as the Grid element and plays the entireanimation as the Animated Grid element when the item is selected.

Tab View Background. The background image displayed in the tab menu view when

this menu item is selected.

The Menu Icons sub-tab allows you to define the Menu Item Set elements for all the

main menu items. In the Menu Icons sub-tab, first select the menu item whose elementsyou want to edit from the list at the top, and then define values for the elements at thebottom.


21/54

Theme Editor tabs


Figure 10: Menu Icons sub-tab

A checkmark appears next to any menu item for which you have customized one or moreelement in its Menu Item Set.

Different handsets typically support a subset of the menu items in Nokia S40 TS. Also,

some providers can add their own main menu items; icons for those items are notcurrently customizable with themes.

Checkmarks indicate that one or

more elements for these menu

items have a value

The cursor and the title text indicate

which menu item is currently being

edited

Menu Item Set for the currently

selected menu item


22/54

Theme Editor


List View, Grid View and Tab View sub-tabs

The List View, Grid View and Tab View sub-tabs allow you to set various elements of themain menu on a handset, depending on which view the handset user has selected (List,Grid, or Tab). Each of these sub-tabs also has an associated screen in the Screen Optionspanel that emulates these elements on the phone UI.

The List View sub-tab allows you to set the list selection highlight image, and the fontcolors for selected and unselected items.

The Grid View sub-tab allows you to set the grid selection highlight image or color,the font colors for selected and unselected items (if the grid images are labelled), andthe background image for the grid view. The tab also allows you to set the highlightimage and font colors for when the user is reordering the menu items (these elementsare not currently emulated in Nokia S40 TS).

The Tab View sub-tab allows you to set the selection highlight image in the tab view.

General tabThe General tab of the Theme Editor allows you to edit the images for a variety of themeelements. The General tab contains three sub-tabs:

Animations

Alerts

Thumbnails


23/54

Theme Editor tabs


Animations sub-tab

The Animations sub-tab allows you to set full-screen images or animations for variousstate changes in the phone (screensaver time-out, startup, shutdown, open, and close).

Figure 11: Animations sub-tab

All the elements in the Animations sub-tab apply to the main screen in case the handset

has two screens. The Startup Image (main) and Shutdown Image (main) elements alsohave optional duration settings which apply to both the graphics and the sound (see the

Sounds tab for setting duration values). If no duration has been set, the handset uses thedefault duration of 3 seconds.

If you want to define a startup or shutdown animation that works on folding phones(that have two screens), you must define a value for both the main and the mini screens(for defining a value for the mini screen, see the Mini Screen tab).

Alerts sub-tab

The Alerts sub-tab contains two graphics elements:

Wait Graphics - the animation shown when the handset is waiting for an operation to

complete Background (notes) - the background image used for displaying alert messages


24/54

Theme Editor


Figure 12: Alerts sub-tab

Both these elements can appear on either main or mini screens.

Thumbnails sub-tab

The Thumbnails sub-tab allows you to specify images that represent the theme itself asdisplayed in the file browser on a handset. The thumbnails are the only theme elements

that are not applied to the handset UI itself.

Figure 13: Thumbnails sub-tab

The theme format specifies that the thumbnails must be GIF images and that they must

have specific filenames (small_thumbnail.gifand large_thumbnail.gif). NokiaS40 TS automatically renames these files internally (if necessary) before adding them tothe theme package.

Apps tab

The Apps tab of the Theme Editor allows you to edit the images for the elements that are

specific to an application. The Apps tab contains three sub-tabs:

Audio

Calendar Forms

Audio sub-tab

The Audio sub-tab allows you to customize the background shown for the Audio Playerand Radio Screen applications. These elements do not appear on phone models that donot include these applications.


25/54

Theme Editor tabs


Figure 14: Audio sub-tab

Calendar sub-tab

The Calendar sub-tab allows you to customize the background images that are displayedin the Calendar application. You can set a different background image for each of the 12months. In the Calendar sub-tab, first select the month whose background you want toedit from the list at the top, and then define a value for the element at the bottom.

A checkmark appears next to any month for which you have customized thebackground.

Note: All 12 months must be customized for any calendar background to be shown onthe phone.

You can also set the color of the highlight cursor used in the application to select a day.This highlight color value is also used in standard-level phones as the highlight color forlists.

Figure 15: Calendar sub-tab

Select the month for which you want to

edit the background.

Checkmarks indicate that one or more

elements for these menu items have a

value.

Select the color of the highlight cursor (this is

the same for all months).

Edit the background image for the selected

month.


26/54

Theme Editor


Forms sub-tab

The Forms sub-tab allows you to customize the font colors and background images forUI screens that use forms.

Figure 16: Forms sub-tab

Sounds tab

The Sounds tab of the Theme Editor allows you to customize various ringtone soundson a handset. Nokia S40 TS recognizes the file extensions for AAC, AMR, AWB, MIDI,MP3, and MP4, although it allows you to import any type of audio content. Each audioelement allows you to import sound files and to audition the selected sound with a Playbutton. The Play button only plays audio content that the underlying Quicktime

implementation supports.

Figure 17: Sounds tab

Sound elements for alerts

Sound (and duration)

elements for phone state

changes


27/54

Theme Editor tabs


The Sounds tab allows you to customize two kinds of audio elements: sounds played as aresult of an alert, and sounds played as a result of a state change in the entire phone.

Each phone state change sound element allows you to set an optional duration setting(in milliseconds) that limits how long the audio file plays each time it is triggered. If youspecify a value of 0 for any duration, the phone uses the default duration (3000 ms).

Note: If you define a tone for Startup Tone or Shutdown Tone, you must define acorresponding Startup or Shutdown Image in the General>Animations tab.

Mini Screen tab

Some handsets, such as fold phones, have two screens. One screen (mini screen) is visiblewhen the phone is closed and the other screen (main screen) is visible only after you open

the phone. Often, the mini screen also has reduced functionality. Nokia S40 TS allowsyou to set some theme elements to have different values on the mini screen than on themain screen.

The Mini Screen tab of the Theme Editor allows you to customize various elements onthe mini screen. The Mini Screen tab contains two sub-tabs: Colors (Mini) and Images(Mini).

The elements on the sub-tabs are the same as their main screen equivalents, except thatthey are applied only to elements displayed on the second screen.

The mini screen elements are all color elements and full-screen images. Typically, if you

do not select a specific wallpaper, screen saver, or background for a mini screen, thehandset applies the wallpaper, screen saver, and background element (respectively) of themain screen to the mini screen. If no value is defined for the main screen, the handsetuses the build-in default.

Select Help>Handset Guidelines to open the Nokia Series 40 Theme Studio HandsetGuidelines document that describes which handsets have a mini-screen.


28/54

Theme Editor



29/54


Managing themes

Use the following workflow to create a new theme for a handset with Nokia S40 TS:

1 Create a new theme or open an existing theme.

2 Edit the theme elements you want to include in the theme. Except for the themename, all theme elements are optional. You can edit as many or as few elements asyou want.

3 Evaluate how the elements work together in the UI.

4 Save the theme.

Tip: After you create a theme on one display simulation, you can view and comparehow that theme works on other display simulations by using the Display Size

toggle buttons on the toolbar. The display simulation of the active theme changesaccording to the toggle buttons.You can also duplicate the theme. For more information, see Duplicating themeson page 42.

Creating new themes

When you start the theme creation, first you have to select the display simulation to be

used. Display simulations are organized by the pixel area of the screen in a handset, andby whether the screen is a main screen or mini screen.

The current release includes the following simulations:

240x320 (main)

128x128 (main)

128x160 (main)

128x160m (mini)


30/54

Managing themes


208x208 (main)

96x65m (mini)

Each time you start Nokia S40 TS, a 240x320 display simulation opens in theWorkspace. Each display simulation contains a theme with default elements that youcan customize to create your own theme.

If you do not want to work with a 240x320 display simulation, close it by clicking the X

button at the top corner of the theme window. Then open another display simulation byselecting File>New>[Display simulation]. The selected display simulation opens in theWorkspace with a default theme.

Opening existing themes

You can open and edit an existing theme and display it on a Nokia handset display

simulation of your choice. This feature lets you see how a theme works on differenthandsets.

To open a previously saved theme:

1 Select File>Open and browse to the .nth file you want to open.

2 In the Open Theme window, under the Select Display drop-down menu, select the

display simulation on which you want to display the theme.

3 Click Open.

If the currently displayed simulation has a theme with default values, the newtheme replaces the default theme in the Workspace.

If the currently displayed simulation has a theme that you have already modified,

the theme you selected opens in a separate display simulation in the Workspace.

Editing themes

A theme consists of a name (mandatory) and a set of optional theme elements. In

addition to the theme name, Nokia S40 TS allows you to change three types of screenelements in a handset: colors, images, and sounds.

Editing the theme name

You can edit the theme name in the Theme Name text box at the top of the ThemeEditor.

The theme name is the only mandatory element of the theme. It is typically shown as thetext the user sees when browsing themes in a folder. Note that it is not (necessarily) thename of the file that contains the theme (*.nth). The theme name should be intuitiveand reflect the content of the theme (for example: Spaceship, Flowers, or Van Gogh).


31/54


32/54

Managing themes


The table below summarizes the highlight and background colors available for the mainscreen, the screens on which they are simulated and the Theme Editor tab on which theycan be edited.

Shortcut BarPopup Font

Color

Color of text in the popup bar whennavigating the shortcut bar in Active

Idle mode

This element isnot simulated

Idle>Active Idle

Menu/ListFont Color Color of text in list and tab view ofthe main menu and selection lists Main Menu(List) and

(Tab), Folder,andAudioPlayer

MainMenu>List

View

HighlightedMenu/ListFont Color

Color of highlighted (selected) textin list and tab view of the mainmenu and selection lists

Several screens MainMenu>ListView

Labelled GridMenu Font

Color

Color of text in labelled grid view ofthe main menu

Main Menu(Grid)

MainMenu>Grid

ViewLabelled GridMenuHighlightFont Color

Color of highlighted (selected) textin labelled grid view of the mainmenu

Main Menu(Grid)

MainMenu>GridView

ReorderMenuHighlightFont Color

Color of text used when usersreorder items in a list (standard-levelphones only)


MainMenu>GridView

Selected

Form ItemFont Color

Color of text for the highlighted

(selected) item in forms

Profile Settings Apps>Forms

Unselected

Form ItemFont Color

Color of text for the items in forms Profile Settings Apps>Forms

Element Description Screen Tab


33/54

Editing themes


Tip: All the color elements can be separately edited for the mini screen. All the miniscreen color elements are located in the Mini Screen>Colors (Mini) tab in the

Theme Editor.

Editing images

A theme can specify a variety of images and animations used for full screenbackgrounds, highlight images, standard menu icons, and other miscellaneous images.The bounding areas, and the way the handset scales the images within those areas, vary


Active Idle -ContentBackgroundColor

Color of background when in ActiveIdle mode


Idle>Active Idle

Shortcut BarPopupBackgroundColor

Color of background in the popupbar when navigating the shortcutbar in Active Idle mode


Idle>Active Idle

Active Idle -Idle Font

OutlineColor

Color of text outline when in ActiveIdle mode


Idle>Active Idle

Grid Menu

HighlightColor

Color of highlight when items are

shown as a grid view (standard-levelphones only)

Main Menu

(Grid)

Main

Menu>GridView

Reorder

MenuHighlightColor

Color of highlight used when users

reorder items in a list (standard-levelphones only)

This element is

not simulated

Main

Menu>GridView

Calendar

HighlightColor

Color of highlight cursor in the

Calendar screens.On some standard-level phones that

do not support highlight images,this element is used as the highlightcolor in main menu and folder lists.

Calendar Apps>Calendar

SelectedForm ItemColor

Color of background for thehighlighted (selected) item in forms


UnselectedForm Item

Color

Color of background for the itemsin forms



34/54

Managing themes


for each theme element and from handset to handset. Nokia S40 TS displays BMP,WBMP, JPG, GIF, M3G, and (for screensavers and wallpapers) SVG and Flash, and (for

wallpapers) ZIP archives of image files. Specific handsets can support different sets ofimage content types. Select Help>Handset Guidelines to see which content types eachhandset supports.

An image that is used for multiple theme elements only appears once in the themepackage, to conserve space. To indicate that you do not want an image theme element tobe specified, select None from the elements drop-down list.

Image scaling

Images are scaled differently depending on the theme element. Four types of scaling aresupported in Nokia handsets:

Stretch. Images are stretched up or down to exactly fill the bounding area. Theoriginal aspect ratio can change.

Up/Down to Fit. Images are scaled up or down so that the entire image fits into thebounding area. Any extra space is shown as white. The image is centered along bothaxes and the original aspect ratio is preserved.

Down to Fit. Images are only scaled down until the entire image fits into thebounding area. Images smaller than the bounding area are not scaled up. The imageis centered along both axes and the original aspect ratio is preserved.

Best. Images are scaled down until the first dimension fits the area, and any excessparts of the image are cropped. Smaller images are not scaled up. The image iscentered along both axes and the original aspect ratio is preserved.

Full screen imagesThe table below lists the full screen image and animation elements you can edit, theirscaling type, and the Theme Editor tab on which they can be edited. The size of thebounding area for these images is equal to the full screen area.

Tip: All the image elements that contain the (main) text are displayed for the main

screen and can be separately edited for the mini screen. All the mini screen imageelements are located in the Mini Screen>Images (Mini) tab in the Theme Editor.

Element Description Scaling type Tab

Background

(main)

Image shown on the background of most

screens.This element is simulated on most screens.

Up/Down

to fit

Default


35/54

Editing themes


Wallpaper(main)

Image shown on the background in Idlemode.

This element can be an image, ananimation, or a zip file of images that are

displayed as a slide show.This element is simulated on the Idle andActive Idle screens.

Best Idle>IdleScreen

Background(grid view)

Image shown on the background ofselection lists in a grid view.This element is simulated on the MainMenu (Grid) screen.

Up/Downto fit

MainMenu>GridView

Screen SaverAnimation(main)

Image shown on the background in ActiveIdle mode.This element is simulated on the Full

Screen Animations screen.

Best General>Animations

Startup Image(main)

Animation shown when handset is turnedon.This element is simulated on the FullScreen Animations screen.

Up/Downto fit

General>Animations

Shutdown

Image (main)

Animation shown when handset is turned

off.This element is simulated on the FullScreen Animations screen.

Up/Down

to fit

General>

Animations

Flip/SlideOpenAnimation(main)

Animation shown when a handset is slid/flipped/rotated open.This element is simulated on the FullScreen Animations screen.


Flip/SlideClose

Animation(main)

Animation shown when a handset is slid/flipped/rotated close.

This element is simulated on the FullScreen Animations screen.


Audio Player

Background

Image shown on the background in the

Audio player application screens.

Down to fit Apps>

Audio

Radio ScreenBackground

Image shown on the background in theRadio player application screens.

Down to fit Apps>Audio

Calendar

MonthBackground

Image shown on the background in the

Calendar application screens for eachmonth of the year.

Down to fit Apps>

Calendar



36/54

Managing themes


Highlight images

The table below lists the highlight image elements you can edit for a theme, the screenson which they are simulated, and the Theme Editor tab on which they can be edited. Allthe highlight images use the Stretch scaling type. Currently, animated highlight imagesare not supported - only their first frame is displayed.

Main menu icons

Nokia S40 TS allows you to customize the images representing many of the main menuitems (such as Messages, Gallery, and Settings). For each menu item, a Menu Item Set ofimage elements can be edited. The table below lists the Menu Item Set elements you can


Active Idle RowHighlight

Image shown on the background ofrow items in the main area of thescreen

Active Idle Idle>ActiveIdle

Active IdleShortcut BarHighlight

Image shown on the background of asingle row near the top of the screen

Active Idle Idle>ActiveIdle

List Menu ItemHighlight

Image shown on the background of thehighlighted (selected) list item

Main Menu(List) and(Tab), andFolder

MainMenu>ListView

Grid Menu ItemHighlight

Image shown on the background of thehighlighted (selected) item in the grid

view

Main Menu(Grid)

MainMenu>Grid

View

Reorder MenuHighlight Color

Image shown on the background of thehighlighted (selected) item when users

reorder items in a list

This elementis not

simulated

MainMenu>Grid

View

Tab Menu Item

Highlight

Image shown on the background of the

highlighted (selected) item in a singlerow near the top of the screen in thetab view

Main Menu

(Tab)

Main

Menu>TabView

Selected Form

Item Highlight


highlighted (selected) item in a form

Profile

Settings

Apps>Forms

UnselectedForm Item

Highlight

Image shown on the background of anitem in a form

ProfileSettings

Apps>Forms


37/54

Editing themes


edit for a theme, their scaling type, and the Theme Editor tab on which they can beedited.

Miscellaneous images

The table below lists the miscellaneous image elements you can edit for a theme, theirscaling type, and the Theme Editor tab on which they can be edited.


List Image shown as a menu item in the

list view of the main menu

Down to fit Main Menu>

Menu IconsGrid Image shown as a menu item in the

grid view of the main menuDown to fit Main Menu>

Menu Icons

AnimatedGrid

Image shown as a highlighted(selected) menu item in the grid viewof the main menu

Down to fit Main Menu>Menu Icons

Tab View

Background

Image shown on the background of

the screen in the tab view of the mainmenu

Up/Down to

fit

Main Menu>

Menu Icons


Left SoftkeyBackground

Image shown on the background of theleft softkey on most screens

Up/Down tofit

Default

Middle SoftkeyBackground

Image shown on the background of themiddle softkey on most screens

Up/Down tofit

Default

Right Softkey

Background


right softkey on most screens

Up/Down to

fit

Default

Background(idle status area)

Image shown on the background of thestatus area in Idle and Active Idlescreens

Stretch Idle>IdleScreen

Background(idle softkeyarea)

Image shown on the background of thesoftkey area in Idle and Active Idlescreens

Up/Down tofit

Idle>IdleScreen

Wait Graphics Image shown on the screen when the

user is forced to wait for the device tofinish its current actions.This element is simulated on the WaitScreen.

Down to fit General>

Alerts


38/54

Managing themes


Editing sounds

You can specify a variety of audio elements by including sound files in your theme. Thesound files replace the default sounds that the handset plays, for example, for ringtonesand alerts. Some audio elements allow you to limit the play duration, which also appliesto the related animation. All sound elements are edited in the Sounds tab of the ThemeEditor. The table below lists the audio elements you can edit for a theme.

Background(notes)

Image shown on the background ofnotes.

This element is simulated on theGeneral Note screen.

Stretch General>Alerts

Thumbnail

Image (large)

Image illustrating the theme itself in

the file browser on a handset.This element is not simulated.

Up/Down to

fit

General>

Thumbnails

ThumbnailImage (small)

Image illustrating the theme itself inthe file browser on a handset.This element is not simulated.

Up/Down tofit

General>Thumbnails


Element Description Duration value range

Main Ringtone Sound played when the handset receivesa call

-

Message Alert Tone Sound played when the handset receives

a message

-

Calendar Alert Tone Sound played when a reminder alert goesoff

-

Startup Tone Sound played when the handset is turnedon (after the Nokia startup tone)

1 - 65535 ms

Shutdown Tone Sound played when the handset is turnedoff

1 - 65535 ms

Flip/Slide OpenTone

Sound played when a handset is slid/flipped/rotated open

1000 - 10000 ms

Flip/Slide CloseTone

Sound played when a handset is slid/flipped/rotated close

1000 -10000 ms


39/54

Evaluating themes


Evaluating themes

If you are creating a theme for a mobile phone for the first time, study the CreatingThemes for Series 40 and S60 Devices: Visual Guide from Forum Nokia(www.forum.nokia.com/themes) to gain an understanding of the special constraints of

mobile devices. That document lays out guidelines for designing effective themes usingreal life experiences from theme designers.

To ensure an effective theme design, make sure that the following problems do not occur:

The theme colors make text difficult to see against the wallpaper.

Graphics in the background image interfere with depictions of text or status icons.

The screen saver animation does not animate.

An image fits acceptably on the main screen but is distorted on the mini screen ofdual-screen phones.

To evaluate a theme:

1 In the Workspace, activate the theme you want to evaluate by clicking it.

2 Check the uniformity of the theme by scrolling through the All Screens Display.

3 Take a close-up look at each screen in the All Screens Display and access its ScreenOptions by doing one of the following:

Click on the screen in the All Screens Display.

Select the name of the screen from the Screen drop-down menu in Screen Options.

To increase or decrease the size of the display simulation in the Workspace and AllScreens Display, select View>Zoom>[amount].

4 In Screen Options, add or delete icons, or modify text, as the screen allows.5 Modify the theme in the Theme Editor, if necessary.

You can also open the theme in another display simulation to see how it works onanother display by toggling the display buttons on the toolbar (also see Duplicatingthemes on page 42).

Evaluating themes with Screen Options

The modifications you select from Screen Options represent variations on the screen thatcan occur during normal phone use - for example, a phone user plugs a headset into the

phone and the headset icon appears on the phone screen, or the phone displays severalmessages of varying lengths. The modifications you make in Screen Options let youevaluate the theme under the different conditions of regular phone use.

Note: The modifications you select from Screen Options for each phone screen are notpart of the theme and are not saved in the .nth file. These customizations are notpersistent across Nokia S40 TS display simulations.
http://www.forum.nokia.com/themeshttp://www.forum.nokia.com/themes


40/54

Managing themes


Each screen in the All Screens Display has different customizations that you can make inScreen Options. Some screens have no customizable parts.

Evaluating icons against the wallpaper

You can add and remove status indicator icons and evaluate their appearance against thewallpaper. In the screen options for Idle Screen, you can check the icons you want todisplay, move the sliders to vary the height of the signal and battery indicator bars, andmodify the name of the operator logo.

Evaluating note texts against backgrounds

The General Note screens allows you test the legibility of text that can vary in length. InScreen Options, select an icon from the Icon drop-down menu and enter text in the textbox to see how it looks in the display simulation.

Sample screen Associated screen options


41/54

Evaluating themes


This evaluation is especially important if you have defined a value for the Background(notes) element, which provides a background image for the note text.

Evaluating the appearance of list and form items, and icons

Some screens let you test the appearance of list and form items and main menu icons.

You can see how highlights and icons appear against image or color backgrounds.

In Screen Options, click the item name to highlight (select) it in the display simulation. Ifyou have defined both images and colors for backgrounds, change the value of the Row

Highlight Type Displayed field to see the different backgrounds (colors are used instandard-level phones that do not support background images).



42/54

Managing themes


Evaluating full-screen animations and calendar options

To evaluate the full-screen animations, select the Full Screen Animations screen. InScreen Options, you can select which animation to view in the display simulation.

Similarly, you can evaluate calendar month backgrounds by selecting the CalendarScreen and clicking the different months in Screen Options.



43/54

Saving themes


Evaluating themes with Bill of Materials

Nokia S40 TS allows you to view a summary of the list of files (or Bill of Materials) thatare included in the current theme. To view the Bill of Materials, Select View>Bill of

Materials or type CTRL-B. This brings up a separate window that shows the list ofmedia files in the current theme and their respective sizes, along with the approximatetotal size (before zip compression). This allows you to see how big your theme is andwhich theme elements are contributing to the total size. Note that you can only see theactual (compressed) size of the theme by saving the theme.

Saving themes

To save a theme:

1 In the Workspace, activate the theme you want to save by clicking it.2 Select File>Save or File>Save As.

The theme is saved into a file with an.nth suffix.



44/54

Managing themes


Theme file format

The theme files (.nth) have a straightforward format. The file itself is a standard ziparchive containing an XML-based text file (called the Theme Descriptor), followed by

the media (image, animation, and audio) files. The XML elements in the ThemeDescriptor reference these media files by filename, and the handset assigns the mediaobjects to internal UI elements accordingly.

If your theme uses the same media file twice - for example, as a screen saver andwallpaper - Nokia S40 TS puts only one copy of the file in the .nth file, although the filecan be referenced multiple times by the Theme Descriptor.

This document does not define the exact XML specification of the Theme Descriptor

file. With the specification, however, theme files can be created (and corrupted themefiles can possibly be repaired) using the Winzip utility and a text editor. Nokia S40 TScan only read correctly formatted theme files and has no repair facilities.

Unpacking themesNokia S40 TS allows you to unpack the media files in a saved theme package into adirectory. This allows you to edit and reimport the images or ringtones if you do not haveaccess to the original files.

To unpack a theme:

1 Open the theme you want to unpack.

2 In the Workspace, activate the theme by clicking it.

3 Select File>Unpack. Choose a directory where you want to unpack the files. If thereare files in the directory with the same name as the media files, Nokia S40 TS asks

whether you want to overwrite them.After unpacking the theme, you can edit the images and ringtones. You must reimportthe updated media files in order to see the effect of any edits on the handset simulations.

Note: Unpacking a theme does not unpack the Theme Descriptor file, only the imageand audio files.

Duplicating themes

You can duplicate a theme in the display simulation of another handset. To duplicate a

theme:1 In the Workspace, activate the theme you want to duplicate by clicking it.

2 Select Edit>Duplicate Theme On>[Display simulation].

The theme you selected is shown in the display simulation you selected.

Another way to duplicate a theme in the Workspace is to drag and drop a theme fromone display simulation onto another display simulation.


45/54

Duplicating themes


Tip: When you create a duplicate of a theme, the duplicate has by default the samename as the original. If you make changes to either version of the theme, make

sure that you save the correct version at the end. The version you save lastoverwrites the other version and when you exit Nokia S40 TS, only the last savedversion of the theme is stored.If you want to save both versions, save the duplicate with another name.


46/54

Managing themes



47/54


Uploading themes to a handset or SDK

To test your theme on a physical handset, you can:

Use a Nokia Software Development Kit (SDK) that supports uploading themes. AnS40 SDK is a free tool that runs the actual phone software on your PC and simulatesthe screen UI of a handset. Although the SDKs are generally used for developingMIDP Java applications that run on phones, several SDKs can also load themes.They are generally more accurate, and show more screens, than Nokia S40 TS. For

information on downloading S40 SDKs, see www.forum.nokia.com.Once you have installed an SDK, select File->Deploy to SDK. The SDK ControlPanel opens with a list of the installed SDKs. Select one or more running SDKinstances and send the theme to them by pressing Send current theme.

Figure 18: SDK Control Panel

Use Nokia PC Suite that lets you use a USB cable, IrDA, or Bluetooth to move filesbetween a computer and a mobile phone. Nokia PC Suite is available from

www.nokia.com/pcsuite.Once you have installed and started Nokia PC Suite, and connected your phone to it,

Start SDK button

Stop SDK button

Send the theme to

Running SDK instance

selected SDKs

Installed SDK product
http://www.forum.nokia.com/http://www.nokia.com/pcsuitehttp://www.forum.nokia.com/http://www.nokia.com/pcsuite


48/54

Uploading themes to a handset or SDK


select File->Deploy to phone. The currently selected theme is sent to all handsets thatare connected to your system through Nokia PC Suite.

Post the theme on a website and then download the theme to a handset just as youwould download any other file. Make sure you configure your web server to set the

content type for the theme packages (files ending in .nth) to be application/

vnd.nok-s40theme.

How you download the theme is specific to each handset. Forinstructions, consult the handset documentation.


49/54


Index

Symbols.nth file 5

Aactive idle

active font color 29

content background color 31

idle font outline color 31

row highlight image 34

shortcut bar highlight image 34

Alerts sub-tab 21

All Screens Display 10

alpha (transparency) values 29animated grid icon 35

Animations sub-tab 21

animations, evaluating 40

Apps tab 22

audio

elements 36

files 24

player background image 33

Audio sub-tab 22

Bbackground

(grid view) image 33

(idle status area) image 35

(main) image 32

(notes) image 36

color

active idle content background 31

shortcut bar popup 31

background (idle softkey area) image 35

best image scaling 32

bill of materials 41

Browse button 14

built-in media 13

buttons

Browse 14

Color Edit 14

Display Size 27

Play 14

Ccalendar

alert tone sound36evaluating background 40

highlight color 31

month background image 33

Calendar sub-tab 23

color

background 30

editing 29

font 29

highlight 30

Color Edit button 14

comments to Nokia 7

content types supported by handsets 6

creating new themes 27

Ddefault media 13

Default tab 16

display simulations 27

Display Size toggle button 27

down to fit image scaling 32

drag and drop 15, 42

duplicating themes 42

duration settings 25

Eediting

colors 29

images 31

sounds 36

theme name 28

themes 28

Editor buttons 14

elements supported by handsets 6

evaluating themes 37

Ffeedback to Nokia 7files

audio 24

built-in 13

importing 15

naming requirements 15

theme file format 42

updating 15

Index


50/54


Index

flip/slide

close animation (main) image 33

close tone sound 36

open animation (main) image 33

open tone sound 36

font color

active idle - active 29header 29

highlighted menu/list 30

idle 29

idle softkey area 29

idle status area 29

labelled grid menu 30

labelled grid menu highlight 30

menu/list 30

reorder menu highlight 30

selected form item 30

shortcut bar popup 30

softkey 29

status area 29unselected form item 30

form appearance, evaluating 39

Forms sub-tab 24

full screen images

audio player background 33

background (grid view) 33

background (main) 32

calendar month background 33

flip/slide close animation (main) 33

flip/slide open animation (main) 33

radio screen background 33

screen saver animation (main) 33

shutdown image (main) 33startup image (main) 33

wallpaper (main) 33

GGeneral tab 20

getting started 9

grid

icon 35

menu highlight color 31

menu item highlight image 34

Grid View sub-tab 20

Hhandset

loading themes to 45

support 6

Handset Guidelines 6

header font color 29

highlight color

active idle - idle font outline 31

calendar 31

grid menu 31

reorder menu 31

selected form item 31

unselected form item 31

highlight imagesactive idle row highlight 34

active idle shortcut bar highlight 34

grid menu item highlight 34

list menu item highlight 34

reorder menu highlight color 34

selected form item highlight 34

tab menu item highlight 34

unselected form item highlight 34

highlighted menu/list font color 30

I

iconsevaluating 38

main menu 34

idle

font color 29

softkey area font color 29

status area font color 29

Idle tab 17

images

built-in 13

editing 31

full screen 32

highlight 34

main menu icons 34miscellaneous images 35

scaling 32

importing media files 15

Llabelled

grid menu font color 30

grid menu highlight font color 30

left softkey background image 35

list

appearance, evaluating 39

icon 35menu item highlight image 34

List View sub-tab 20

loading theme on handset 45

Mmain menu icons

animated grid 35


51/54


Index

grid 35list 35

tab view background 35

Main Menu tab 18

main ringtone sound 36

media

audio files 24

importing files 15

naming files 15

updating files 15

menu icon appearance, evaluating 39

Menu Icons sub-tab 18

Menu Item Set 18

menu/list font color 30message alert tone sound 36

middle softkey background image 35

Mini Screen tab 25

miscellaneous images

background (idle softkey area) 35

background (idle status area) 35

background (notes) 36

left softkey background 35

middle softkey background 35

right softkey background 35

thumbnail image (large) 36

thumbnail image (small) 36

wait graphics 35monitor setting 9

Nname of the theme 28

naming files 15

Nokia media 13

Nokia PC Suite 45

Nokia S40 TS

getting started 9

introduction 5

main window 10

preferences 11starting 9

none as image 32

note texts, evaluating 38

nth file 5

Oopening existing themes 28

PPlay button 14

preferences 11

Rradio screen background image 33

recent files list setting 11

reorder

menu highlight color 31

menu highlight color image 34

menu highlight font color 30

right softkey background image 35

right-click menu 11ringtones 24

Ssaving themes 41

scaling images 32

Screen Options 10, 37

screen saver animation (main) image 33

SDK, deploying theme to 45

selected

form item color 31

form item font color 30

form item highlight image 34settings

duration of animations and audio 25

monitor 9

recent files list 11

zoom 11

shortcut

bar popup background color 31

bar popup font color 30

shutdown

image (main) image 33

tone sound 36

simulations 27

size of active theme window 11

softkey font color 29

sound editing 36

sounds

calendar alert tone 36

flip/slide close tone 36

flip/slide open tone 36

main ringtone 36

message alert tone 36


52/54


Index

shutdown tone 36

startup tone 36

Sounds tab 24

starting Nokia S40 TS 9

startup

image (main) image 33

tone sound 36status area font color 29

stretch image scaling 32

Ttab

menu item highlight image 34

view background icon 35

Tab View sub-tab 20

tabs

Apps 22

Default 16

General 20Idle 17

Main Menu 18

Mini Screen 25

overview 15

Sounds 24

theme

creating new 27

definition 5

development guidelines 37

duplicating 42

editing 28

evaluating 37

file format 42name 28

opening existing 28

saving 41

unpacking 42

uploading to handset 45

window size 11

Theme Editor

introduction 13

panel 10

tabs 15

thumbnail

image (large) image 36

image (small) image 36

Thumbnails sub-tab 22

toolbar 10

transparency values 29

UUI theme

creating new 27

definition 5

development guidelines 37

duplicating 42

editing 28

evaluating 37

file format 42

name 28

opening existing 28saving 41

unpacking 42

uploading to handset 45

workflow 27

unpacking themes 42

unselected

form item color 31

form item font color 30

form item highlight image 34

up/down to fit image scaling 32

updating a media file 15

Wwait graphics image 35

wallpaper (main) image 33

workflow for creating themes 27

Workspace 10

Zzoom setting 11


53/54


54/54

s40 ts 2 2 users guide

Documents