Editing skin, more icon in main menu

Do you want to have more icon in your ROKR E2 menu instead of the basic 3×3 such as 3×4, 4×4 or even more? Then, editing the skins configuration files (the ini extention files) will be the best way. It’s pretty easy, and along with this article, I will show you how I made my 3×3 menu to 3×4 and 4×4.

To edit this files, you only need a text editor. Now, we will edit the common.ini and mainmenu.ini only. Here is how it looks before editing:

Okay, let’s start from mainmenu.ini and 3×4 first, this is the original value:

[ZIconView_1]
Bg_Type_Std = 0
Bg_Opacity_Std = 0
Padding_Left = 2
Padding_Right = 2
Padding_Top = 4
Padding_Bottom = 4
Spacing_H1 = 3
Spacing_V1 = 8

[ZIconViewItem_1]
Bg_Type_Std = 0
Bg_Type_H = 0
Bg_Type_HS = 0
Border_Type_Std = 0
Border_Type_H = 0
Border_Type_HS = 0
Border_Left_Stretch_H = 2
Border_Left_Stretch_HS = 2
Border_Right_Stretch_H = 2
Border_Right_Stretch_HS = 2
Border_Top_Stretch_H = 1
Border_Top_Stretch_HS = 1
Border_Bottom_Stretch_H = 1
Border_Bottom_Stretch_HS = 1
Image_Container_Type = 1
Padding_Left = 7
Padding_Right = 7
Padding_Top = 0
Padding_Bottom = 0
Spacing_V1 = 1

[ZImageContainer_1]
Bg_Type_Std = 0
Bg_Type_H = 2
Bg_Stretch_H = 5
Bg_Color_H = 255
Bg_Opacity_Std =0
Bg_Opacity_H =100
Border_Type_Std = 0
Border_Type_H = 2
Border_Color_Std = 1592405
Border_Color_H = 5592405
Border_Width_Std = 0
Border_Width_H = 0
Border_Opacity_Std =100
Border_Opacity_H =100
Bg_Size_Std = 49
Bg_Size_H = 49
Padding_Left = 4
Padding_Right = 4
Padding_Top = 4
Padding_Bottom = 4

First, we edit these ZIconView_1 properties:

Padding_Top = 1
Padding_Bottom = 1
Spacing_V1 = 0

Notice the top and bottom padding, we make it smaller than left and right padding since the 3×4 is not square. Also the Spacing_V1 to 0.

Next, we edit these ZImageContainer_1 properties:

Bg_Size_Std = 45
Bg_Size_H = 45
Padding_Top = 1
Padding_Bottom = 1

As you can see, we edit the padding value here and resize the icon to a bit smaller, the result so far is:

Hmm… Not bad… The text on the 4th rows still hide inside softkey and you can see the padding is not well yet. Well, let’s take it step by step.

Now we edit the common.ini , we will make the header and softkey a bit smaller. This is the original value before we edit:

[ZHeader_1]
Bg_Type_Std = 2
Bg_Stretch_Std = 7
Bg_Opacity_Std = 100
Padding_Left = 5
Padding_Right = 5
Padding_Top = 3
Padding_Bottom = 5
Spacing_H1 = 3
Spacing_V1 = 0

[ZSoftKey_Left]
Bg_Type_Std = 2
Bg_Type_S = 2
Bg_Stretch_Std = 5
Bg_Stretch_S = 5
Bg_Opacity_Std = 100
Bg_Opacity_S = 100
Border_Type_Std = 0
Border_Type_S = 0
Border_Width_Std = 0
Border_Width_S = 0
Padding_Left = -30
Padding_Right = 5
Padding_Top = 5
Padding_Bottom = 5
Spacing_H1 = 3

[ZSoftKey_Right]
Bg_Type_Std = 2
Bg_Type_S = 2
Bg_Stretch_Std = 5
Bg_Stretch_S = 5
Bg_Opacity_Std = 100
Bg_Opacity_S = 100
Border_Type_Std = 0
Border_Type_S = 0
Border_Width_Std = 0
Border_Width_S = 0
Padding_Left = 5
Padding_Right = -20
Padding_Top = 5
Padding_Bottom = 5
Spacing_H1 = 3

Yup, we will edit this 3 to (only changed value is written, else leave it):

[ZHeader_1]
Padding_Top = 1
Padding_Bottom = 1

[ZSoftKey_Left]
Padding_Top = 1
Padding_Bottom = 2

[ZSoftKey_Right]
Padding_Top = 1
Padding_Bottom = 2

Now it looks better. Just need a little fix and it is done!

Here we change the ZIconView_1 again, but now the left and right padding

Padding_Left = 11
Padding_Right = 11

The result is looks like this

Not bad huh? Now, the 4×4. Here is the properties I edit in mainmenu.ini:

[ZIconView_1]
Padding_Left = 10
Padding_Right = 10
Padding_Top = 3
Padding_Bottom = 3

[ZIconViewItem_1]
Padding_Left = 0
Padding_Right = 0

[ZImageContainer_1]
Padding_Left = 0
Padding_Right = 0
Padding_Top = 0
Padding_Bottom = 0

And the final 4×4 result

Perfect! Next, you might want to edit the font size to make the text fit more in the screen, but this is the end of this article. Thanks for reading and hope it useful for you.