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)
;padding-left:0px;padding-top:40px;;/>
Admin
