How To Make S40 Theme

You may have wanted to edit a theme to change the background or to remove unwanted ringtone or to make the theme even more beautiful. Its possible to edit or create a theme for your s40 mobile on your PC or even in your mobile. To make or edit a s40 theme, you need to know how does a theme work. All the contents you see in the theme are present in a archive file of extension .nth & a file named theme_descriptor.xml or theme.xml expresses them. There is the description of every content in the file. If there is description about a file which is not present, then you may see the text "1 or more elements invalid" after applying the theme.

Requirements:

You need a archieve file manager to view or extract the contents and a text editor to edit the theme descriptor file. Minicommander can do both the jobs in mobile.

Procedure:

You can view & extract, delete the contents or add new content in the theme with MiniCommander. If you change a file, the new file inserted should be of the same name or you should update the name in the theme_descriptor file using text editor. e.g.- suppose you deleted the file wallpaper.jpg & inserted new file titanic.gif in place of it. Then rename the file to wallpaper.jpg or change the name to titanic.gif in the theme_descriptor.
Simply, if you cannot understand how to edit theme descriptor file, just replace the image in the theme with desired image. Accordingly, when you apply the theme, you will get desired image in stead of that image.

If you still cannot understand, try this. First get the theme you want to edit. Then if you want to change an image, say background, you can check which is the background image inside the theme with Minicommander. Note down its name. Then get another image which you want to make the background. Rename it to the name you had noted down. Then add it to the theme archive with Minicommander. Its easy. You can use any archive manager in stead of Minicommander. Refer its manual for instruction to extract, add, delete or view files inside an archive.

Hexadecimal colour codes:

Changing font colours needs knowledge of hexadecimal coding of colours. A colour code has 3 parts. The 1st part represents red, 2nd green & 3rd represents blue. The colour can be set adjusting the amount of these fundamental colours. Their amount in increasing order is represented by 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E & F. e.g.- 0x000000 represents black while 0xFFFFFF represents white. Similarly 0x00FFFF represents sky blue. 0xFF will represent blue colour as there are no components of red & green.

Adding thumbnail:

To add thumbnail to your theme, just add two picture files named small_thumbnail.gif & large_thumbnail.gif.

Edit in PC:

In PC, you can use Winrar to pack or unpack the contents & the theme descriptor can be edited with notepad or wordpad. After making necessary changes, pack them to theme.nth, then it's ready.

Theme descriptor:

The theme_descriptor.xml is basically a xml file with all the style info. You can replace values to match your choice. In newer s40 phones, you cannot find theme_descriptor.xml, instead you will get a file named theme.xml which serves the same purpose.

Here is a sample theme_descriptor.xml file, with all necessary elements.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE theme PUBLIC "-//NOKIA//DTD THEME 2.0//EN" "theme.dtd">
<theme name="XP bliss" version="2.0">
<colors
display="main"
header_font_color="0xFFFFFF"
status_area_font_color="0xFFFFFF"
softkey_font_color="0x66"
idle_font_color="0x66"
idle_status_area_font_color="0xFFFFFF"
idle_softkey_area_font_color="0xFFFFFF"
menu_font_color="0x66"
menu_highlight_font_color="0xffffff"
grid_menu_font_color="0x66"
grid_menu_highlight_font_color="0xffffff" />
<menu_item
item_id="applications"
list_view_icon="applications.png"
grid_view_icon="applications.png"
animating_grid="applications.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="callregister"
list_view_icon="callregister.png"
grid_view_icon="callregister.png"
animating_grid="callregister.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="contacts"
list_view_icon="contacts.png"
grid_view_icon="contacts.png"
animating_grid="contacts.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="gallery"
list_view_icon="gallery.png"
grid_view_icon="gallery.png"
animating_grid="gallery.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="media"
list_view_icon="media.png"
grid_view_icon="media.png"
animating_grid="media.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="messages"
list_view_icon="messages.png"
grid_view_icon="messages.png"
animating_grid="messages.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="organizer"
list_view_icon="organizer.png"
grid_view_icon="organizer.png"
animating_grid="organizer.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="push_to_talk"
list_view_icon="push_to_talk.png"
grid_view_icon="push_to_talk.png"
animating_grid="push_to_talk.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="services"
list_view_icon="services.png"
grid_view_icon="services.png"
animating_grid="services.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="settings"
list_view_icon="settings.png"
grid_view_icon="settings.png"
animating_grid="settings.png"
app_specific_bg="gridbg.jpg" />
<menu_item
item_id="simatk"
list_view_icon="simatk.png"
grid_view_icon="simatk.png"
animating_grid="simatk.png"
app_specific_bg="gridbg.jpg" />
<wallpaper
main_display_graphics="wallpaper.jpg" />
<screensaver
main_display_graphics="screensaver.gif" />
<background
main_default_bg="gridbg.jpg"
grid_menu_bg="gridbg.jpg"
note_bg="gridhighlight.png"
idle_status_area_bg="spacer.gif"
idle_softkey_area_bg="spacer.gif" />
<calendar_bg
january="1.jpg"
february="2.jpg"
march="3.jpg"
april="2.jpg"
may="1.jpg"
june="2.jpg"
july="3.jpg"
august="2.jpg"
september="1.jpg"
october="2.jpg"
november="3.jpg"
december="2.jpg" />
<radio_audio_bg
radio_bg="audiobg.jpg"
audio_bg="audiobg.jpg" />
<softkey_bg
left="spacer.gif"
middle="spacer.gif"
right="spacer.gif" />
<wait_graphics
src="wait_graphics.gif" />
<highlight
tab="tabhighlight.png"
list="listhighlight.png"
grid="gridhighlight.png"
active_idle_row="active_idle_row.png"
active_idle_shortcut_bar="cursor.png" />
<tones ringtone="XP_Remix.mp3" />
<startup main_display_graphics="startup.gif" tone="startup.mp3" />
<shutdown main_display_graphics="shutdown.jpg" tone="shutdown.mp3" />
<transformation_open
main_display_graphics="listbg.jpg" tone="loggingon.mp3" />
<transformation_close
main_display_graphics="loggingoff.jpg" tone="loggingoff.mp3" />
</theme>

Here is the newer version, theme.xml file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE theme PUBLIC "theme" "xml30.dtd" >
<theme name="Dark Simple" version="1.0">
<descriptor xml-version="3.0">
<toolbox>
<message-box>
<font color="0x000000"></font>
<background source="message_box_background_236x133.png"></background>
<wait-anim>
<image source="loadingbar_220x28.gif"></image>
</wait-anim>
</message-box>
<list>
<background display="main" source="background_240x320.png"></background>
<item>
<selected>
<font color="0x000000"></font>
<background color="0x999999" source="list_menu_select_224x60.png"></background>
</selected>
<unselected>
<font color="0xFFFFFF"></font>
</unselected>
</item>
<unavailable-item>
<selected>
<font color="0x999999"></font>
<background color="0xFFFFFF" source="list_menu_unavailable_select_224x60.png"></background>
</selected>
<unselected>
<font color="0x4f4f4f"></font>
</unselected>
</unavailable-item>
</list>
<choice-list>
<item>
<selected>
<font color="0x000000"></font>
<background source="choice_list_background_224x30.png"/>
</selected>
<item>
</choice-list>
<forms> <!-- e.g. Write Message-->
<unselected>
<font color="0x000000"></font>
<background source="form_unselected_222x38.png"></background>
</unselected>
<selected>
<font color="0x000000"></font>
<background source="form_selected_222x38.png"></background>
</selected>
<label>
<font color="0xFFFFFF"></font>
</label>
</forms>
<popup-list> <!-- e.g. Optionen-->
<list>
<item>
<selected>
<font color="0x000000"></font>
<background color="0x000000" source="popup_list_select_224x34.png"></background>
</selected>
<unselected>
<font color="0x333333"></font>
</unselected>
</item>
<unavailable-item> <!-- e.g. Programme - Optionen -->
<selected>
<font color="0x999999"></font>
<background color="0x999999" source="popup_list_unavailable_select_224x34.png"></background>
</selected>
<unselected>
<font color="0x999999"></font>
</unselected>
</unavailable-item>
<background display="main" source="popup_list_background_240x238.png"></background>
</list>
</popup-list>
<virtual-button>
<pressed>
<background source="softkey_left_80x26.png"></background>
</pressed>
<selected>
<background color="" source=""></background>
</selected>
<unavailable-item>
<background source=""></background>
</unavailable-item>
<unpressed>
<background source=""></background>
</unpressed>
</virtual-button>
</toolbox>
<screens>
<softkey position="left">
<background source="softkey_left_80x26.png"></background>
</softkey>
<softkey position="right">
<background source="softkey_right_80x26.png"></background>
</softkey>
<softkey position="center">
<background source="softkey_center_80x26.png"></background>
</softkey>
<idle>
<active-idle>
<font color="0xFFFFFF"></font>
<selected>
<background source="active_idle_list_select_240x48.png"></background>
</selected>
<shortcut-bar>
<selected>
<background source="active_idle_tab_select_44x50.png"></background>
</selected>
</shortcut-bar>
</active-idle>
<font color="0xFFFFFF" outline="0x000000"></font>
<status-area>
<font color="0xFFFFFF"></font>
<background source="status_area_240x46.png"></background>
</status-area>
<softkey-area>
<font color="0xFFFFFF"></font>
<background source="softkey_area_240x26.png"></background>
</softkey-area>
<wallpaper>
<image display="main" source="background_240x320.png"></image>
</wallpaper>
</idle>
<!--Idle -->
<menu-app>
<status-area>
<font color="0xFFFFFF"></font>
</status-area>
<header>
<font color="0xFFFFFF"></font>
</header>
<softkey-area>
<font color="0xFFFFFF"></font>
</softkey-area>
<menu>
<grid-menu>
<background source="background_240x320.png"></background>
<unselected>
<font color="0xFFFFFF"></font>
</unselected>
<selected>
<font color="0x000000"></font>
<background color="0xffffff" source="grid_menu_select_74x79.png"></background>
</selected>
<reorder>
<selected>
<background source="reorder_grid_74x79.png"></background>
</selected>
</reorder>
</grid-menu>
<tab-menu>
<selected>
<background source="tab_menu_select_44x50.png"></background>
</selected>
</tab-menu>
<!-- List view -->
<reorder>
<font color="0x3300FF"></font>
<list-reorder>
<background color="0xffffff" source="reorder_list_224x60.png"></background>
</list-reorder>
</reorder>
</menu>
<applications>
<calendar>
<font color="0xFFFFFF"></font>
<month-view>
<selected>
<font color="0x000000"></font>
<background color="0xF4F4F5" source="calendar_month_highlight_34x24.png"></background>
</selected>
<month-background month="january">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="february">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="march">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="april">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="may">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="june">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="july">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="august">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="september">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="october">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="november">
<background source="background_240x320.png"></background>
</month-background>
<month-background month="december">
<background source="background_240x320.png"></background>
</month-background>
<last-weekday>
<font color="0x666666"></font>
</last-weekday>
<weekdaybar>
<font color="0x000000"></font>
<background source="calendar_weekdaybar_240x26.png"></background>
</weekdaybar>
</month-view>
<week-view>
<selected>
<background color="0xFFFFFF"></background>
</selected>
<timebar>
<font color="0x000000"></font>
<background source="calendar_timebar_51x145.png"></background>
</timebar>
<grid color="0xFFFFFF"></grid>
<overlapping-slot>
<background color="0xAAAAAA"></background>
</overlapping-slot>
<reserved-slot>
<background color="0xCCCCCC"></background>
</reserved-slot>
</week-view>
<preview-pane>
<font color="0x000000"></font>
<background source="calendar_preview_pane_240x72.png"></background>
</preview-pane>
</calendar>
<big-clock>
<analog-clock>
<background source="analog_clock_background_240x320.png"></background>
<hand color="0xFFFFFF"></hand>
</analog-clock>
<digital-clock>
<background source="background_240x320.png"></background>
</digital-clock>
<font color="0xFFFFFF"></font>
</big-clock>
</applications>
</menu-app>
</screens>
</descriptor>
</theme>

Once you understood the codes, you will become an expert. Believe me, it is not so hard!