How to Make Own SPB Shell Skin ? - Full Step by Step Tutorial ~ SmartPhoneCity.in

You can check out our Great Spb Shell skins Over here. What will be if you can make your own desired Skin ?Now you can learn how to make own SPB Shell skin from below tutorial. Whole credit goes to Raakaysh.

=> There are so many people who want to edit the Spb Mobile Shell to customize it in their own way and share their creation with the world. So here is a short article that will try to give you a step by step guide for modding the Spb Shell. I have had so many requests from my friends and others to tell them about modding the Shell. Since it was not possible to write a guide every time one asks you on a specific problem, I decided to prepare a wholesome account of the procedures.

The Spb Mobile for Symbian consists of two elements: the rle/bmp files that are made by converting a png file, and the xml part that lies inside all the dat files along with the rle/bmp files. The rle/bmp is related to the visual effect of the shell, while the xml entries define the function, arrangement and positioning of the elements of the Shell. Thus, for example, you will not be able to see any graphical widget unless there is an entry for it in the Widgets.xml (that is found inside the qa_layouts.dat) and the Index.xml (that is found inside every widget dat file). Thus, inside each va_xxx.dat there is the images of that widget ( 2 .bmp files for one image or 1 .rle file) and an archive called index.xml that contains the widget´s properties.

Opening a Dat File

You cannot open a dat file directly on your desktop so you need to change the extention .dat into .zip. Then right click on the file and extract it with WinRar or PowerArchiver. It would ask for a password that is ‘b0fm18zq’. Having extracted the dat files, you can edit them as you wish.

Converting a PNG Image to RLE or BMP Using Png2Skin

The Spb Mobile Shell for Symbian supports only rle/bmp images for its widgets and other graphical elements. Download a Sotware called Png2Skin.exe. I’ll set out my way of using png2skin.exe for you. This is how you can use the program: First of all create a folder as “1” in the C drive of your PC, and copy Png2Skin.exe inside it. So, it’s location is in C:\1. Now into that folder place all your files you want to convert to Rle format. Use Photoshop or any other Photo editor to make/convert/save as an image file in Png format. Copy the Png files to the newly created folder (‘1’). Now create a new text document and copy the following line in it:

c:\1\png2skin.exe c:\1\Arrows.png c:\1\ 8 RLE

In the above line ‘Arrows’ is the name of the png file to be converted to Rle. You can replace ‘Arrows’ with you own file name. Now copy the text-

And paste it in the Windows Command Box. Then press the Enter key. Now you will see an Rle file beside your Png file. You can convert only one image at a time. Repeat the procedure to convert several images. Grab the Rle files and copy/replace them to your desired dat package.

You can also convert your Png images to Bmp by using Png2Skin.exe. For this, you will have to simply drag the Png image over the program icon. To edit an existing Bmp file, open it with Photoshop and cut out the image background to make it transparent. You can then convert it to to Rle or Bmp.

Creating a Widget in Spb Mobile Shell

As I have already said above, you need to do two things to create/add a new widget. Here we shall try to make a digital clock widget. The va_dclock_widget.dat file, for example, consists of three files: digits.rle, face.rle and index.xml. Therefore, you need to make the graphics file for the clock first. Thus, for this digital clock -

You will need two images: ‘face.rle’ and ‘digits.rle’. This is how they look before being converted to .rle format.

Now take a look at the Index.xml file for this digital clock:

All you have to do is to play with the ‘x’ and ‘y’ values here. X value defines the horizontal (left/right) position of an image or element on your phone’s screen, so if you want to move the digits to the right side of the face, you only need to modify “22” in the timerect to a highernumber and if you want to move it to the left, give a lower number. In the same way Y defines the vertical (up/down) position. Use lower value to move it up and higher numbers to move down.

Having done this, we will have to pack the file into a .dat package. Put the there files (2 Rle and index.xml) in a new folder. Open the folder and select all files by pressing Ctrl+A. Now right click on one of the files and select ‘Compress with Options’ (I use Powerarchiver for the purpose). The program will prompt you to input the password two times. Then click the Add button. You will have a new zip file in the same folder. Change the file extension from .zip to .dat. Now our dat package is ready. Rename the file name to ‘va_dclock_widget_green.dat’ (in this case).

The next step is to add the details of this widget in the widgets.xml that can be found inside the qa_layouts.dat. The widgets.xml generally has two entries for all widgets except the date and weather widgets. The first one looks like this:

<Plugin Name="ClockGreen" Class="Spb.LSP.DigitalClock" DoubleSkin="va_dclock_widget_green">
<BoundRect X="0" Y="0" Width="360" Height="115"/>
<String Name="_Size" Value="Green Digital Clock"/>
</Plugin>

And the second one, as follows:

<Plugin Name=" ClockGreen ">
 <BoundRect X="0" Y="0" Width="360" Height="115"/>
 </Plugin>

By changing the ‘x’ and ‘y’ values of the BoundRect, you can change the position of the highlight square line that appears over a widget when you try to drag its position on your screen in the Edit Mode of the Spb Shell. Changing the values of the Width and Height you can define the size of the highlight box of the widget. After making the entry of the widget in the widgets.xml, we need to save the changes and repack the qa_layouts.dat by following the above-mentioned procedure and put the file to the SpbShell folder located in E:/Others. Remember that each time you make any change in the qa_layouts.dat, you will have to exit delete the ‘SpbShell_20028b16.reg’ file from C:\System\Apps, and SpbShellBackup.reg from E:\Private\20028b16 \ to let the changes take effect.

Modifying the Features of the Shell

Exit the shell, then edit the file in the folder Spbmobileshell.rgs located in E:/private/20028b16. Search/find the string ‘Panels’ or ‘ForceRemove Panels’ and delete unneeded panel to retain the structure and numbering. After that, you will have to delete the ‘SpbShell_20028b16.reg’ file from C:\System\Apps, and SpbShellBackup.reg from E:\Private\20028b16 \ to let the changes take effect.(WARNING: This will reset the Shell to the defaults, so do not forget to backup your settings from backup options in Menu> Settings> Right click the lower bar> Save Settings). Using less number of panels would free more RAM.

Sizes of Images for Wallpaper

You can use three sizes of images as wallpapers in the Spb Shell. In the Professional Mode, you can use 360×640 pixels Png/Jpeg images as wallpapers. However, in the Lifestyle Mode, the ideal size of images should be 720×594 pixels in Jpeg format. You need to put these images in put in the folder E:\Images\Pictures\SPBShell\ (in the same drive on which you have installed the program). In some mods (my Spb Ultimate Edition Series, for example), you can configure different wallpapers on each homescreen. For this, you need to crop your images in 360×614 pixels. You can set fullscreen wallpapers with the help of the Picture Frame widget.

Adding Your Applications Folder to SPB Menu

Open the file spbmobileshell.rgs by changing its extension to .xml. Here we shall try to add the “Video Player’’ to the program, for example, in the folder “Internet”. There are two ways to add an application to a specific folder: by defining the location of the .exe of a particular application, and by giving the UID. Here is the first method. Let’s begin and find the code:

ForceRemove 'Internet'
 {
 val Index = d '1 '
 val Image = d '2 '
 val Text = s 'Internet'
 val DrawType = s 'List'
 val MRUImage = d '185 '
 Code:
 ForceRemove 'Internet' - the name of the program
{
val Index = d '1 ' - her next number in the list
val Text = s 'Internet' - the name for the shortcut
val File = s' Z: \ sys \ bin \ BrowserNG.exe ' - path to .exe file or program in a form UID - '0 x101F4DED'
val ImagePath = s 'Z: \ sys \ bin \ BrowserNG.exe' - path to icon bend. This is either the path to the program, or UID
val MRU = d '0' - Parameter indicates the presence of the translation of the program's shortcut in some other language.
}

Or to add programs via UID, here is the code:

ForceRemove 'OperaBrowser'
 {
 val Index = d '2 '
 val Text = s 'Opera'
 val UseProgramName = d '1 '
 val Check = d '1 '
 val File = s '0 x101F4DED '
 val ImagePath = s '0 x101F4DED '
 val MRU = d '0 '

To add programs to the “Organizer”, search code:

ForceRemove 'Organizer'
 {
 val Index = d '0 '
 val Image = d '3 '
 val Text = s 'Organizer'
 val DrawType = s 'List'
 val MRUImage = d '186 '

To add programs in “Media”, look for the code:

ForceRemove 'Multimedia'
 {
 val Index = d '2 '
 val Image = d '6 '
 val Text = s 'Multimedia'
 val DrawType = s 'List'
 val MRUImage = d '189 '

Do not forget about the correct numbering, to avoid overlap.

Configuring the Number of Homescreens

Exit the Shell first
Edit the file E: /System/apps/SpbShell_20028b16.reg.
Find the following lines:

[\ Software \ Spb Software House 2 \ Spb Mobile Shell \ Widgets \ HomeScreen]
ActivePage = 0
PageCount = 5

And change the PageCount = 5 to any value. For example, for 9 pages change the value to ‘9’:

[\ Software \ Spb Software House 2 \ Spb Mobile Shell \ Widgets \ HomeScreen]
ActivePage = 0
PageCount = 9

After the changes restart the Shell.

How to Configure the Shell to Drag the Widgets to Bottom

1. Extract qa_layouts.dat
2. Edit LockScreen2.xml:

Height = "512" changed to "560"
 <Layout Name="360x640">
 <General>
 <Rect Name="DragRect" X="0" Y="0" Width="360" Height="512"/>
 </ General>
 </ Layout>

3. Edit MenuBar.xml
Find the line:

<General>
<DialogObject Value="Spb.Data.MenuBar"/>
<LayerAlign Value="Bottom"/>

Change in:

<General>
 <DialogObject Value="Spb.Data.MenuBar"/>
 <LayerAlign Value="Bottom" Clip="0" />

Repack the qa_layouts.dat with the password “b0fm18zq” and copy to the folder /Others/ SPBShell. Restart the shell.

Editing the Bottom of the Spb Mobile Shell

Here is a list of xml files inside the qa_layouts.dat that determine the bottom portion of the shell in different screens (almost all files names start with ‘menu’). Take a look to find whwt is responsible for what.

MenuBar.xml – is responsible for the bar on the desktop;
MenuBar2.xml – for small menus and carousel;
MenuBarContacts.xml – a bar menu configures the contacts panel;
MenuBarCrop.xml – a bar on a page image cut to the desktop;
MenuBarList.xml – for when choosing a bar widgets;
MenuBarPopup.xml – For the pop-up window when you click the right button bar;
MenuBarPrograms.xml – Defines the configuration of the program panel;
MenuBarSkinDownloader.xml – at a bar when downloading images from Spb server;
MenuBarTransp.xml – I do not know why;
MenuBarWeather.xml – a bar in the weather.

Changing the Value of the Left Button Bar

Copy the folder qa_layouts.dat shell on the computer.
Rename a qa_layouts.zip.
Unpack with winrar (password b0fm18zq).
Open LockScreen2.xml and see what the name of a file that is responsible for the lower bar (if the custom theme). In the standard skin the code is:
```
 <Layers> <Layer/> <Layer Name=”Menu” Dialog=”MenuBar”/> </ Layers>
```
Open MenuBar.xml with Notepad.
Edit the following line:

 <Plugin Name="Panels" ID="3">
 <Int Name="ActivateOnPress" Value="1"/>
 <String Name="Action" Value="Panels"/>
 <Int Name="LeftBtn" Value="1"/>
 <Rect Name="SrcIcon" X="0" Y="108" Width="54" Height="54"/>
 </ Plugin>

Options for the Designation of Panels

<String Name=”Action” Value=”Panels”/> (3D carousel)
<String Name=”Open” Value=”:BTN0″/> (Selected Programs)
<String Name=”Open” Value=”:LAUNCHER”/> (Selected Programs)
<String Name=”Open” Value=”:SPBMENU”/> (Spb Menu)
<String Name=”Open” Value=”:BTN1″/> (Contact)
<String Name=”Open” Value=”:CALLLOG”/> (Call History)
<String Name=”Open” Value=”:CONTACTS”/> (Spb Contacts)
<String Name=”Open” Value=”:FAVORITES”/> (Selected Contacts)
<String Name=”Open” Value=”:WEATHER”/> (Weather)
<String Name=”Open” Value=”:WEATHERCOND”/> “(Current weather)
<String Name=”Open” Value=”TASKMANAGER” /> (SPBshny Task Manager)
<String Name=”Open” Value=”:MANAGEFAVS”/> (Carousel favorite contacts)
<String Name=”Open” Value=”:AGENDA”/> (Schedule)
<String Name=”Open” Value=”:TIME”/> (Time (world + clock)

Posted in: Symbian,Symbian Apps,Symbian SPB Skins,Symbian Tips n tricks,Symbian V5 Apps,Symbian^3 Anna Belle Appllication

Menu

Monday, 21 May 2012