Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Theme Components

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Content is out of date and not useful on current platforms

Article Metadata
Series 40
Created: kamaljaiswal (29 Jun 2009)
Last edited: hamishwillee (03 Jun 2013)


List Of Various UI Theme Components


The S60 mobile phone supports backgrounds in themes. The background of a theme in Carbide.ui consists of two different component options.

Active Background

This is the active background screen of the mobile phone. Most of the S60 screens contain an active background.

Idle Background

This is the idle background screen of the mobile phone. This is the background screen for, for example, the screen that is displayed when mobile phone's keys are locked and the screen saver is not yet active.

Carbide ui.jpeg


The S60 mobile phone's screen is divided into areas. Carbide.ui allows you to edit three areas:

Status Areas

The Status area, which is the upper part of the mobile phone's screen, consists of three sub-areas: Status Area Background, Navi Pane Background, and Idle Status Area Background.

Idle status pane area.png


Carbide ui.jpeg Elements
1:Status Area

1.1:Idle Status Area Background(Marked in Red)
1.2:Navi Pane Background (Marked in Black)

Title pane

Title pane.png


Carbide ui.jpeg 

Navi pane

Navi pane2.png


Carbide ui.jpeg 

Battery pane

Battery pane.png


Carbide ui.jpeg 

Universal indicator pane

Universal indicator pane.png


Carbide ui.jpeg 

Signal pane

Signal pane.png


Carbide ui.jpeg 
Main Area

The Main area, which is the large middle part of the mobile phone's screen, consists of five different sub-areas. These sub-areas include, for example, active and idle main area backgrounds.

Control Area

The Control area, which is the bottom part of the mobile phone's screen, consists of two sub-areas, the Control Area Background and the Idle Control Area Background.

Control pane.png


Carbide ui.jpeg Elements
1:Control Area

1.1:Control Area Background


S60 mobile phone uses highlights as a graphical effect.

List Highlight

Default S60 Theme Highlight:
S60 highlights.png

Custom S60 Theme Highlight:
S60 Highlight Custom.jpg

Grid Highlight

Default S60 Theme Highlight:
S60 grid.png

Custom S60 Theme Highlight:
S60 Highlight Grid.jpg

S60 Indicators

The S60 mobile phone uses different indicators in its UI screen.

Slider Indicators

Sliders measure levels, and are used in the user interface (UI) in a similar way as volume indicators. The slider images consist of:
Slider line
Slider marker

Volume Indicators

The volume level is displayed using a scale with ten levels.

Default S60 Volume Indicators:
S60 volume indicators.png

Custom S60 Volume Indicators:
S60 Custom volume indicators.jpg

Tabs Indicators

Tabs are displayed in the Navi Pane. They indicate selectable views and may contain either icons or text. Active tabs can be selected with a horizontal movement: the tab to the left or right is highlighted and the look of the previously active tab changes to inactive.

Default S60 Tabs Indicators:
S60 tab indicators.png

Custom S60 Tabs Indicators:
S60 Custom tab indicators.jpg

S60 Scroll bars and lines

The Scroll Bars and Lines section includes:

Scroll Bars— These include the Vertical Scroll Track and the Vertical Focused Scroll Handle. Lines— These include the Primary, Secondary and Dashed Lines.

Default S60 Scroll bars and lines:
S60 scroll bars linespng.png

Custom S60 Scroll bars and lines:
S60 Custom scroll bars linespng.jpg

S60 Applications

The S60 mobile phone contains applications that all have different appearances. Carbide.ui allows you to edit these appearances.

S60 Clock

You can create clocks to match the overall theme design through Carbide UI.

Analogue clock: The analogue clock consists of five parts:

Parts Picture
Face1 Analogue face 1.png
Current date frame Analogue border num.png
Face 2 Analogue face 2.png
Hour pointer Analogue pointer hour.png
Minute pointer Analogue pointer minute.png

Default S60 Analogue clock:
S60 applications clock.png

Custom S60 Analogue clock:
S60 Clock Custom.jpg

Digital clock: The digital clock consists of masked number and separator character images.

The digital clock is created in two steps:

1:Background effect creation

2:Character creation

Default S60 Digital clock:
S60 applications clock2.png

Custom S60 Digital clock:
S60 Clock Custom2.jpg

S60 Pinboard

The Pinboard application main area consists of a background graphic. The mobile phone user can choose to view the items in a grid or list format. The Pinboard application consists of the following parts:

The application background creates a frame where the Pinboard items can be placed. The background graphics can be theme-specific.

Four corner bitmaps
Four side bitmaps
Center bitmap

The displayed highlight depends on the selected view format.

Lower screen area
The lower screen area contains the general UI background graphics.

S60 Calendar

The Calendar application has three main parts:

Calendar frame
Calendar header frame
Calendar side frame

S60 Settings

Settings items have two states:

List state
Edit state

S60 Calculator

The Calculator application has two customizable components:

Display (input and output display)
The calculator display component requires three pieces: left, center and right. The center piece is stretched to occupy the space between the left and the right piece.

Paper (calculation log)
The calculator paper component can be a one-piece or nine-piece image. The nine-piece image component has:

Four corner images
Four side images
Center images

Default S60 Calculator:
S60 applications calculator.png

Custom S60 Calculator:
S60 applications calculator1.png

S60 Notepad

The Notepad application has two types of customizable backgrounds:

1:First page frame

2:Continues page frame

Default S60 Notepad:
S60 applications notepad.png

Custom S60 Notepad:
S60 applications notepad Custom.png

S60 Music Player

The Music player application has several customizable components:

Background The Music player supports full screen background graphics. If you do not create a background, the default S60 Music player background is used.

Visualizer This is a rectangular shaped area located on the top right corner of the screen. This component also requires a mask.

Volume bar This is fully customizable.

Progress bar This is fully customizable.

Equalizer The Equalizer has a bar and a handle that can be customized.

S60 Colors

The Colours section in Carbide UI allows you to define the different colour choices of your theme components. The following components' colours, for example, can be edited:
4:Music Player

S60 colours.png

Ovi Store Best Collection

Online Collection of Themes

3rd Party Icons
Online Theme Community



SVG editor

Bitmap editor

Discussion Board


This page was last modified on 3 June 2013, at 07:44.
63 page views in the last 30 days.