Theme:Theme Components
Article Metadata
Contents
|
A brief introduction to Carbide.ui
- Introduction to Carbide.ui
- Packaging and installing the theme
- Activating the theme
- Testing
- Distributing your theme
List Of Various UI Theme Components
Background
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.
Areas
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.
|
|
Elements:
|
Title pane
|
|
References: |
Navi pane
|
|
References: |
Battery pane
|
|
References: |
Universal indicator pane
|
|
References: |
Signal pane
|
|
References: |
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.
|
|
References:
|
Highlights
S60 mobile phone uses highlights as a graphical effect.
List Highlight
|
Default S60 Theme Highlight: |
Custom S60 Theme Highlight: |
Grid Highlight
|
Default S60 Theme Highlight: |
Custom S60 Theme Highlight: |
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: |
Custom S60 Volume Indicators: |
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: |
Custom S60 Tabs Indicators: |
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: |
Custom S60 Scroll bars and lines: |
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 | 
|
| Current date frame | 
|
| Face 2 | 
|
| Hour pointer | 
|
| Minute pointer | 
|
|
Default S60 Analogue clock: |
Custom S60 Analogue clock: |
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: |
Custom S60 Digital clock: |
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:
Background
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
Highlight
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: |
Custom S60 Calculator: |
S60 Notepad
The Notepad application has two types of customizable backgrounds:
1:First page frame
2:Continues page frame
|
Default S60 Notepad: |
Custom S60 Notepad: |
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:
1:Areas
2:Highlights
3:Pop-ups
4:Music Player
Ovi Store Best Collection
Online Collection of Themes
- s60v5-themes Dailymobile.se
- s60v3-themes Dailymobile.se
- Wallpapers Dailymobile.se
- The Theme Section in www.symbian-freak.com
3rd Party Icons
themes.tehkseven.net
Online Theme Community
symbian-freak.com
References
- Creating a new theme file
- Theme templates
- Using the Adobe Illustrator template
- Designing for backwards compatibility
- Device Specification
- Nokia Themes
- Creating Referenced Colours
- Replacing single- and multi-piece components
Tools
SVG editor
Bitmap editor
03 Sep
2009
After reading this article you'll know what components you can theme. Author lists and presents structure of background, highlights, S60 applications, areas, indicators, scroll bars and lines as theme components. All have visual examples with explanations of theirs parts.
Article is quite long so table of contents is appreciated. I'm also glad to see a lot of references to related articles, tools and good themes and theme collections.
There's a lot more SVG tool out there than that mentioned in the article. Adobe Illustrator is a great app; Inkscape is a solid, free alternative for it. I'm sure I know a few more.
Overall very helpful article and well worth the read for beginner in theme creation space.