×
Namespaces

Variants
Actions

Theming Symbian UI Components

From Nokia Developer 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}}.

The article is believed to be still valid for the original topic scope.


Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: kamaljaiswal (08 Jun 2009)
Last edited: lpvalente (12 Jul 2014)

Contents

Theme

Most of the users wish to give a different and unique look to their mobile phone by changing the themes and they spend a good amount in searching for the best combination of colors and images. The world of themes for the Symbian mobile phones is infinite so it becomes very easy to get lost in it.Here is just a guide which could help user to create it own theme.

Few Categories to choose from:

Category Details
1:Art wikipedia
2:Abstract Art Abstract Art uses a visual language of form, color and line to create a composition which may exist with a degree of independence from visual references in the world.
3:Animal wikipedia
4:Brands
5:Babes
6:Car
7:Cartoons
8:Celebrities
9:Games
10:Humour
11:Scifi And Fantasy
12:Movies
13:Love And Romance
15:Festival
16:Misc
17:Carnival


Points to consider while creating theme
1:Background:
2:Icons:
3:Screen Resolution:

Theme Creation Process
1:Creation of basic theme background images and general full screen background images.Images could be created using graphic tols like Gimp or Adobe Photoshop.
2:Modify the icons, text, and colors matching the context of the theme. Like if the user wants to install a theme having a look and feel of the Iphone on S60 Nokia phone then the icons and text should match that of Iphone.
3:Add images that change the outlook of specifuc areas like Status Area,Main Area,Control Area.
4:Create Application menu submenu icons.
5:Adjust list,grid, and input highlights (List Highlight,Grid Highlight).
6:Define grapics for pop-up windows.
7:Adjust miscellaneous icons(Find Pane Indicator icons and Browser Connecting icons) and theme components
8:Add application-specific theme items.
9:Add sound and screen saver.
10:Create a .sis file of your theme and project the theme using DRM.Send the theme to separate file system or mobile phone.

A brief introduction to Carbide.ui


List Of Various S60 UI Components

Following are the list of customizable screen for S60 devices.The following list could be viewed in Gallery view of Carbide UI.It is always a confusion what areas and screen could be modified during creation of theme.Here is just an overview of important views and the areas(Outline view) which could be modified using carbide UI.By considering Various UI Theme Components (explained below) all the UI screen could be edited.

Home screen

Home Sc.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Idle Background

2:Areas:

2.1:Status Area.

3:Icons

3.1:Application Icons
3.2:List Icons
3.3:Miscellaneous Icons
3.4:Toolbar Icons

4:Highlights

4.1:Grid Highlight
4.2:List Highlight

5:Colors

5.1:Highlighted Items
5.2:Main Area Items
5.3:Navi Pane Items
5.4:Others(Title Text)
5.5:Primary Item Indications
5.6:Softkey Texts

6:Pop-up Windows

6.1:Touch Nine piece

7:Applications

7.1:Clocks

Popular Home Screen Themes Themes:Home Screen
For Detail About the UI Elements Refer:Archived:Theme Components

Stylus pop-up menu

Stylus pop-up menu.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars
7:Highlights

7.1:List Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

Toolbar

Toolbar Theme.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars
7:Highlights

7.1:List Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

Choice list

Choice List.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars
7:Highlights

7.1:List Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

Forms

Forms.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars

For Detail About the UI Elements Refer:Archived:Theme Components

Form items

Form Items.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars

For Detail About the UI Elements Refer:Archived:Theme Components

Markable list

Markable List.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars

For Detail About the UI Elements Refer:Archived:Theme Components

Setting items

Pop-up setting

Pop-up setting.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Highlighted Items
4.2:Navi Pane Items
4.3:Setting Option Highlighted Items
4.4:Setting Option Items
4.5:SoftKey Text
4.6:Status Pane Items

5:Scroll Bars
6:Highlights

6.1:List Highlight

7:Applications

7.1:Settings

Multiselection list setting

Multiselection list setting.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars

Message Editor

Message Editor.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons

3.1:Toolbar icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Volume Indicators
4.4:Tab Indicators

5:Colors

5.1:Input Frame Items
5.2:Main Area Items
5.3:Navi Pane Items
5.4:SoftKey Text
5.5:Status Pane Items
5.6:Touch Input

6:Scroll Bars

6.1:Lines
6.2:Scroll Bars

7:Highlights

7.1:Input Highlight

Display setting

Slider setting.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Volume Indicators
4.4:Tab Indicators

5:Colors

5.1:Active Tab Item
5.2:Highlighted Item
5.3:Navi Pane Items
5.4:Setting Option Highlighted Items
5.5:SoftKey Text
5.6:Status Pane Items

6:Scroll Bars
7:Highlights

7.1:List Highlight

8:Applications

8.1:Settings

For Detail About the UI Elements Refer:Archived:Theme Components

Setting list

Setting list.png

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Volume Indicators
4.4:Tab Indicators

5:Colors

5.1:Active Tab Item
5.2:Highlighted Item
5.3:Navi Pane Items
5.4:Setting Option Highlighted Items
5.5:SoftKey Text
5.6:Status Pane Items

6:Scroll Bars
7:Highlights

7.1:List Highlight

8:Applications

8.1:Settings

For Detail About the UI Elements Refer:Archived:Theme Components

Messaging Screen

Messaging.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons

3.1:List Icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors

5.1:Highlighted Items
5.2Main Area Items
5.3:Navi Pane Items
5.4:SoftKey Text
5.5:Status Pane Items

6:Scroll Bars

6.1:Scroll Bars

7:Highlights

7.1:List Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

Note Screen

Note Theme.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons

3.1:Note Icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors

5.1:Highlighted Items
5.2Main Area Items
5.3:Navi Pane Items
5.4:Pop-up Window Items
5.5:Status Pane Items

6:Scroll Bars

6.1:Scroll Bars

7:Highlights

7.1:List Highlight

8:Pop-up Windows

8.1: General Window

For Detail About the UI Elements Refer:Archived:Theme Components

Calendar Month View

Calendar Month View.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons

3.1:Toolbar Icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Navigation Indicators

5:Colors

5.1:Calendar View Items
5.2:Highlighted Items
5.3:Navi Pane Items
5.4:Pop-up Window Items
5.5:Status Pane Items
5.6:Softkey Texts

6:Scroll Bars

6.1:Scroll Bars 6.2:Lines

7:Highlights

7.1:Grid Highlight

8:Pop-up Windows

8.1: General Window

For Detail About the UI Elements Refer:Archived:Theme Components

Calendar Week View

Calendar Week View.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Status Area.
2.2:Control Area.

3:Icons

3.1:Toolbar Icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Navigation Indicators

5:Colors

5.1:Calendar View Items
5.2:Navi Pane Items
5.4:Pop-up Window Items
5.5:Status Pane Items
5.6:Softkey Texts

6:Scroll Bars

6.1:Scroll Bars

7:Highlights

7.1:Grid Highlight

8:Pop-up Windows

8.1: General Window

For Detail About the UI Elements Refer:Archived:Theme Components

Calendar Day View

Calendar Day View.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Status Area.
2.2:Control Area.

3:Icons

3.1:Toolbar Icons

4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator
4.3:Navigation Indicators

5:Colors

5.1:Calendar View Items
5.2:Navi Pane Items
5.4:Highlighted Items
5.5:Status Pane Items
5.6:Softkey Texts

6:Scroll Bars

6.1:Scroll Bars

7:Highlights

7.1:List Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

Dialer Screen

Dailer theme.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Call Handling Colours
4.2:Navi Pane Items
4.3:Status Pane Items
4.4:Touch Input

5:Applications

5.1:Dialer

6:Pop-up Windows

6.1:Call Handling Window

For Detail About the UI Elements Refer:Archived:Theme Components

Call Screen

Call Screen.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Call Handling Colours
4.2:Navi Pane Items
4.3:SoftKey Texts
4.4:Others

5:Applications

5.1:Clocks

6:Pop-up Windows

6.1:Call Handling Window

7:Icons

7.1:Toolbar Icons

8:Pop-up Windows

8.1:Call Handling Window

For Detail About the UI Elements Refer:Archived:Theme Components

Call Dialing

Call Dialing.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator
3.3:Volume Indicators

4:Colors

4.1:Call Handling Colours
4.2:Main Area Items
4.2:Navi Pane Items
4.3:SoftKey Texts
4.4:Others

5:Applications

5.1:Clocks

6:Pop-up Windows

6.1:Call Handling Window

7:Icons

7.1:Toolbar Icons

8:Pop-up Windows

8.1:Call Handling Window

For Detail About the UI Elements Refer:Archived:Theme Components

Music Library

Music Library.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator
3.3:Volume Indicators
3.4:Navigation Indicators

4:Colors

4.1:Highlighted Items
4.2:Main Area Items
4.2:Navi Pane Items
4.3:SoftKey Texts
4.4:Status Pane Items

5:Applications

5.1:Music Player

6:Icons

6.1:Toolbar Icons

7Highlights

7.1:List Highlight

8:Scroll Bars

8.1:Scroll Bars
8.2:Lines

For Detail About the UI Elements Refer:Archived:Theme Components

Equalizer Screen

Equlizer.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Navi Pane Items
4.2:SoftKey Texts
4.3:Status Pane Items

5:Applications

5.1:Music Player

6Highlights

6.1:Grid Highlight

For Detail About the UI Elements Refer:Archived:Theme Components

File Manager Query

File Manager Query.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Cut\Copy\Paste Highlight
4.2:Cut\Copy\Paste Highlighted Items
4.3:Highlighted Items
4.4:Input Frame Items
4.2:Main Area Items
4.3:Navi Pane Items
4.4:SoftKey Texts
4.5:Status Pane Items
4.6:Pop-up Window Items

5:Icons

5.1:Toolbar Icons

6Highlights

6.1:List Highlight
6.2:Input Highlight

7:Scroll Bars

7.1:Scroll Bars

8:Pop-up Window

8.1:General Window

For Detail About the UI Elements Refer:Archived:Theme Components

Virtual KeyBoard

Virtual keyboard.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

1.1:Active Background

2:Areas:

2.1:Main Area.
2.2:Control Area
2.3:Status Area

3:Indicators

3.1:Signal Strength Indicator
3.2:Battery level indicator

4:Colors

4.1:Input Frame Items
4.2:Main Area Items
4.3:Navi Pane Items
4.4:Others
4.5:SoftKey Texts
4.6:Status Pane Items
4.7:Touch Input

5Highlights

5.1:Input Highlight

6:Scroll Bars

6.1:Scroll Bars
6.2:Lines

7:Pop-up Window

7.1:Touch Nine piece

For Detail About the UI Elements Refer:Archived:Theme Components

Virtual ITU-T

VirtualITU-T.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Colors

1.1:Call Handling Colours
1.2:Touch Input

2:Pop-up Window

2.1:General Window
2.2:Touch Nine piece

For Detail About the UI Elements Refer:Archived:Theme Components

SubMenu

Submenu Theme.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Colors

1.1:Active Tab Items
1.2:Highlighted Items
1.3:Main Area Items
1.4:Navi Pane Items
1.5:Passive Tab Items
1.6:Pop-up Window Items
1.7:Softkey Texts
1.8:Status Pane Items

2Highlights

2.1:List Highlight

3:Pop-up Window

3.1:Call Handling Window
3.2:General Window

4:Scroll Bars

4.1:Scroll Bars

5:Indicators

5.1:Signal Strength Indicator
5.2:Battery level indicator
5.3:Navigation Indicators
5.4:Tab Indicators

6:Background:

6.1:Active Background

7:Areas:

7.1:Main Area.
7.2:Control Area
7.3:Status Area

For Detail About the UI Elements Refer:Archived:Theme Components

Application Switching

Application Switching.jpg

UI Elements which could be Modified:

Carbide ui.jpeg Elements
1:Background:

Active Background

2:Areas:

2.1:Status Area.
2.2:Main Area.
2.3:Control Area.

3:Icons
4:Indicators

4.1:Signal Strength Indicator
4.2:Battery level indicator

5:Colors
6:Scroll Bars

For Detail About the UI Elements Refer:Archived:Theme Components

Nokia Store Best Collection

Online Collection of Themes

3rd Party Icons
themes.tehkseven.net
Online Theme Community
symbian-freak.com

References

Tools

SVG editor


Bitmap editor

Discussion Board

E-learning

This page was last modified on 12 July 2014, at 19:11.
138 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×