[hertz_huang]

thanks for sharing the tutorial

[loyd87]

amazing... thanks...

[gandhos]

Thank you very much!!

[HannaBB]

Awesome instructions!! Thanks!!!

[apalm8]

Thank you for this tutorial.

[ewright11]

what program is this because this is interesting and would like to try it

[darren.miller18]

Thank you very much for your help

[[email protected]]

can u help me.... i want to add a sliding dock to the hidden dock. so far i have 18 icons and i nowe i have to expand your code to match all 18 icons but this is the code i have for the sliding dock but when i put it into the theme builder and preview it on my blackberry i get errors on the pc saying


Warnings:
homescreen.svg: Failed to compile SVG file.

Errors in homescreen.svg:
>>> Transcoding homescreen.svg.
Error: A parse error has occurred at line 1041 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l1'.).
Error: A parse error has occurred at line 1041 column 164 (cvc-attribute.3: The value '_anim_l1' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1042 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l2'.).
Error: A parse error has occurred at line 1042 column 164 (cvc-attribute.3: The value '_anim_l2' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1043 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l3'.).
Error: A parse error has occurred at line 1043 column 164 (cvc-attribute.3: The value '_anim_l3' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1044 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l4'.).
Error: A parse error has occurred at line 1044 column 164 (cvc-attribute.3: The value '_anim_l4' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1045 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l5'.).
Error: A parse error has occurred at line 1045 column 164 (cvc-attribute.3: The value '_anim_l5' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1046 column 164 (cvc-id.2: There are multiple occurrences of ID value '_anim_l6'.).
Error: A parse error has occurred at line 1046 column 164 (cvc-attribute.3: The value '_anim_l6' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1048 column 167 (cvc-id.2: There are multiple occurrences of ID value '_anim_l7'.).
Error: A parse error has occurred at line 1048 column 167 (cvc-attribute.3: The value '_anim_l7' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1049 column 167 (cvc-id.2: There are multiple occurrences of ID value '_anim_l8'.).
Error: A parse error has occurred at line 1049 column 167 (cvc-attribute.3: The value '_anim_l8' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1050 column 167 (cvc-id.2: There are multiple occurrences of ID value '_anim_l9'.).
Error: A parse error has occurred at line 1050 column 167 (cvc-attribute.3: The value '_anim_l9' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1051 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l10'.).
Error: A parse error has occurred at line 1051 column 169 (cvc-attribute.3: The value '_anim_l10' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1052 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l11'.).
Error: A parse error has occurred at line 1052 column 169 (cvc-attribute.3: The value '_anim_l11' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1053 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l12'.).
Error: A parse error has occurred at line 1053 column 169 (cvc-attribute.3: The value '_anim_l12' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1056 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l13'.).
Error: A parse error has occurred at line 1056 column 169 (cvc-attribute.3: The value '_anim_l13' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1057 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l14'.).
Error: A parse error has occurred at line 1057 column 169 (cvc-attribute.3: The value '_anim_l14' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1058 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l15'.).
Error: A parse error has occurred at line 1058 column 169 (cvc-attribute.3: The value '_anim_l15' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1059 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l16'.).
Error: A parse error has occurred at line 1059 column 169 (cvc-attribute.3: The value '_anim_l16' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1060 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l17'.).
Error: A parse error has occurred at line 1060 column 169 (cvc-attribute.3: The value '_anim_l17' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: A parse error has occurred at line 1061 column 169 (cvc-id.2: There are multiple occurrences of ID value '_anim_l18'.).
Error: A parse error has occurred at line 1061 column 169 (cvc-attribute.3: The value '_anim_l18' of attribute 'id' on element 'animateTransform' is not valid with respect to its type, 'ID'.).
Error: The SVG file "homescreen.svg" cannot be compiled.
36 error(s) were encountered.





THIS IS MY CODE....



<animateTransform xlink:href="#Buttons" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d1" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l2" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d2" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l3" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d3" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l4" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d4" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l5" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d5" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l6" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d6" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l7" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d7" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l8" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d8" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l9" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d9" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l10" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d10" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusout" />
<animateTransform xlink:href="#Buttons" id="_anim_l11" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_11.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d11" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_11.focusout" />
<animateTransform xlink:href="#Buttons" id="_anim_l12" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_12.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d12" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_12.focusout" />
<animateTransform xlink:href="#Buttons" id="_anim_l13" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_13.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d13" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_13.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l14" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_14.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d14" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_14.focusout" />

<animateTransform xlink:href="#Buttons" id="_anim_l15" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_15.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d15" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_15.focusout" />





<animateTransform xlink:href="#Buttons" id="_anim_l16" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_16.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d16" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_16.focusout" />


<animateTransform xlink:href="#Buttons" id="_anim_l17" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_17.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d17" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_17.focusout" />
<animateTransform xlink:href="#Buttons" id="_anim_l18" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_18.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_d18" attributeName="transform" type="translate"
to="0,100" dur="0.5s"
fill="freeze"
begin="Theme_Button_18.focusout" />


<animateTransform xlink:href="#Buttons" id="_anim_l1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l2" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_2.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l3" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_3.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l4" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_4.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l5" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_5.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l6" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_6.focusin" />

<animateTransform xlink:href="#Buttons" id="_anim_l7" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_7.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l8" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_8.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l9" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_9.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l10" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_10.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l11" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_11.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l12" attributeName="transform" type="translate"
to="-480,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_12.focusin" />


<animateTransform xlink:href="#Buttons" id="_anim_l13" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_13.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l14" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_14.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l15" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_15.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l16" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_16.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l17" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_17.focusin" />
<animateTransform xlink:href="#Buttons" id="_anim_l18" attributeName="transform" type="translate"
to="-960,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_18.focusin" />


</svg>

any help would be appreciated thanks

[araLe-tot]

Hi, I successfully created a working Hidden dock thanks to this amazing tutorial!!!, but I was wondering if there is a way to make it so i can scroll left and right instead of up and down in the dock.

Thanks

Kris

Blackberry Theme Studio - Navigational Paths Tutorial

Just happened to watch this video today. Hope it helps!

EDIT:

can u help me.... i want to add a sliding dock to the hidden dock.
any help would be appreciated thanks

[shagooory]

how i can but the time inside the dock ?

[sandidonk]

thank you... its work!

[lindalucky123]

I've decided to write a tutorial for a friend that needs help with a hidden dock. I know there's one that's already out but he needs a little more detailed instructions. So hope this helps everyone who needs it.

So what you need to do first is open up composer. I'm making one for the 8900 so that's what I'm gonna select and I always do a white background.


Next we need to add some buttons. Go over to the left where the "tool box" is and click the "Theme Button" Click to view quoted image
.

Click anywhere in the white area, you should see a green square. Then go over to the "inspector" and click the "Use Device Application Order" (if you do not have inspector click the windows tab and check "Inspector"). Keep doing that until you get the desired amount of buttons. I usually only do about 6.

Click to view quoted image


After you've done hopefully you've already created a dock that you want to use. If you have then go to file>import. Select the one you've created. If you haven't then go on ahead and make one I'll wait.

After you import it it should show up on your screen, position it over the icons where you like. Right click the dock>select order>send to back. It should then look like this:

Click to view quoted image


Go to File>Export>SVG. Pick a title and save it somewhere you can find it.

Click to view quoted image


Go to wherever you saved it right click and select open with>notepad.

Look for "Layer_1" and rename that "Buttons". If for some reason you can't find "Layer_1" then go back to composer and see what your layer is called. You'll be able to find it in the "Layers" table. For the most part it's usually titled "Layer_1" unless you merged them.

Click to view quoted image


Scroll all the way to the bottom and look for this:

Click to view quoted image


Put your cursor EXACTLY where mine is and press enter 4 times. NOW LEAVE THAT ALONE.

Download and Open the attatched zip on here. For each button there are 2 codes, hope that makes sense. Since I added 6 buttons in composer I'm going to highlight and copy 12 of those codes. Just look at the picture below, the text that is highlighted is for 1 button.

Click to view quoted image


So I'm going to highlight until I see this:
begin="Theme_Button_6.focusout"

All because I have only 6 icons. Get it? GO back where you left off...after you pressed enter 4 times. Right Click and Paste.

Depending on the type of blackberry your making a hidden dock for also depends on the number your going to put in place of those 100's.

Click to view quoted image


The 100 is how far it will go out measured in pixels. So since the 8900 icons are 80 X 80 I usually put about 90. The higher you increase the number the more it will come out. So change those 100's to either 90 or you can leave em' as is. Just play
around with it til' you get it to where you like. Once your done just go to file>save as>switch the "save as type" to "all files" it will ask you to replace file and click yes!

Click to view quoted image


Open up Theme Builder and Upload your SVG. If you can't find it it's in the same area where you upload a new background, right below it says "SVG File:". Scroll down to "navigation" and select "no memory".

Click to view quoted image


ALL DONE!!!! Run it in simulator and it should work like a charm.




Here are a few things that will help you out when creating a hidden dock.
When your changing the second part of that coding the part where it looks like this:

<animateTransform xlink:href="#Buttons" id="_anim_d1" attributeName="transform" type="translate"
to="0,0" dur="0.5s"
fill="freeze"
begin="Theme_Button_1.focusout" />

The first 0 is your left & right and the second 0 is your up & down. If your trying to make a side dock to the left your going to have to put a neg. sign (-) next to the number so -95,0. Same with the top, 0,-95.

Also, when I made my first hidden dock I kept getting the same icon over and over even though I clicked "use device application order" in composer. So what I had to do is search "slot" in my notepad coding. If it says something like "slot0" make sure you can see theme_button_1" near. That tells your file where to put the icon at. The slot number is always going to be 1 less whatever the button so "theme_button_2" will be "slot1" etc.

This is just incase your composer doesn't export the svg right. I've only had this problem once. So you might not even get it.

If your having difficulty feel free to message me and I'll try to help you out.

I hope everyone can understand this and good luck to anyone who tries it out!!!

Thank you so much for your step by step guide!it's really helpful and fix my problem.Again thanks for your time and patience to write this tutorial.

[phoreoneone]

oh man !!
this is really helpful. I have been trying to make my own dock theme for so long but i couldny get the dock right. THANKS

[Hyorin]

Dude is so awesome tutorial but i got a little prob when i moving cursor to the left and right the dock always little moving up and down how to fixed this prob i want the dock not moving up and down when i moving to another icon can you give me a way to fixed this please and sorry for my bad english