[iHonda]

So as it states in the title this is my first time making a theme and I am failing horribly, well not so horribly just the buttons look funny.

I used composer to resize them and line them up how I wanted and them used the svg to add them in with Theme Builder it looked ok on the simulator however when I went to test them on my Blackberry it looks like I'm only getting the top left corner of each icon on my homescreen. It worked for a while untill I added another button I tried removing it yet still have the same problem.

I included a screen shot to show you where my problem is. My goal is to have small icons not parts of icons .




Please help

If there is anyway I can I'll be sure to return the favor.


-iHonda

[Padgoi]

Use an image editing program to resize them, like photoshop or imageready or even Microsoft Office Picture Manager. Then try again.

[iHonda]

I'm trying to make it so that it uses the device order so I cant make individual icons and still have it the right size with all icons unless i make a few 1000 icons... i think... not sure, but I'll give it a try and let you know

[mrtolles]

You can NOT resize the icons in composer. For some reason it does not work right. To resize icons, AFTER you export the SVG, you have to open it up (in a text editor) and Find/Replace the icons size with the desired size. Example below.

Exported, the Theme Button(s) use this format below.
Notice width="80" height="80" (thre are 8 in my example for 1 theme button)
That's the icon size. You have to replace ALL with desired icon size. (example further down)

As exported, Full icons size. (80*80 or width="80" height="80")

<g  id="Theme_Button_1"
	transform="translate(-50 -58)">
	<!-- pz:tag type="button" -->
<useApplicationIcons app-id="slot0"
      normal-group="normalImage"
      focus-group="focusImage"/>
<g  id="Theme_Button_1-Contents">
	<!-- pz:tag type="layer" -->
<g id="normalImage">
<image id="img_1_1_09"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_10"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
<image id="img_21_1_11"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
<image id="img_31_1_12"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_13"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_11_1_14"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_21_1_15"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_31_1_16"
	x="0" y="0" width="80" height="80"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>

Modified, 50% icons size (40*40 or width="40" height="40")

<g  id="Theme_Button_1"
	transform="translate(-50 -58)">
	<!-- pz:tag type="button" -->
<useApplicationIcons app-id="slot0"
      normal-group="normalImage"
      focus-group="focusImage"/>
<g  id="Theme_Button_1-Contents">
	<!-- pz:tag type="layer" -->
<g id="normalImage">
<image id="img_1_1_09"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_10"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
<image id="img_21_1_11"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
<image id="img_31_1_12"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/normalImage_img_1_1.png"	visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_13"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_11_1_14"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_21_1_15"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>
<image id="img_31_1_16"
	x="0" y="0" width="40" height="40"
	xlink:href="Images/focusImage_img_1_1.png"	visibility="hidden"/>

Hope that helps!

[Rockdog97]

so in your example of editing the svg file, you're not actually editing the ICON itself to 40x40, instead you're just editing the displayed dimensions of the icon in the svg file.

So really, the icon is still 80x80, it's just getting reduced 50% in the svg file and is being displayed at 40x40?

[iHonda]

I actually get it now that I'm home and had time to relax haha. I'm trying mrtolles method right now.

I'll let you know how it turns out ^^.

oh also if anybody is willing to teach me the more advanced techniques i might have some webhosting for them.

[DoctorNeutron]

Is this not just the difference between portrait and landscape, as judged by the RIM OS, the FINAL arbitrator ? Doctor Neutron

[iHonda]

Ok i tried the edit of the file with a text editor now i just have tiny corners lol. I tried changing the scale with composer it worked on 1 of my icons but not the rest, I'll keep experimenting.


================================================== ========


Update: Got it working it was just trying to screw with me so I kept trying and got it right! Finished my theme and I'm gonna upload it to my website soon. I'll probably show off my result in the 9700 forums so stop by and look ^^


================================================== ========

Update on the update: Never mind it got silly with me now it wont show icons. I wonder what happened all I did was add a rounded rectangle on the bottom...



-iHonda

[DoctorNeutron]

I do all my sizing in PSE-7, the kid brother to PhotoShop that goes for $100. Doctor Neutron

[mrtolles]

so in your example of editing the svg file, you're not actually editing the ICON itself to 40x40, instead you're just editing the displayed dimensions of the icon in the svg file.

So really, the icon is still 80x80, it's just getting reduced 50% in the svg file and is being displayed at 40x40?

That is correct. But i should have been more specific. If you are using the DEFAULT icons, you can do that to resize without having to use a photo editor to resize first. You can also resize the default icons in a photo editor's batch process, and as long as you name the icons the exact same, then you can select that icon set in the Preferences.

Ok i tried the edit of the file with a text editor now i just have tiny corners lol. I tried changing the scale with composer it worked on 1 of my icons but not the rest, I'll keep experimenting.


================================================== ========


Update: Got it working it was just trying to screw with me so I kept trying and got it right! Finished my theme and I'm gonna upload it to my website soon. I'll probably show off my result in the 9700 forums so stop by and look ^^


================================================== ========

Update on the update: Never mind it got silly with me now it wont show icons. I wonder what happened all I did was add a rounded rectangle on the bottom...



-iHonda

Did you make sure to undo any resizing you have done in composer? That resizing you have done in composer will stay and continue to resize the DISPLAY "AREA" of the theme. The Display area starts at the top left corner.

So if you resized the icons by editing the SVG, then the icon size by doing that was 40*40, then, if the composer's scaling was not fixed, it would be displaying 20*20 area of the top left hand corner. Hope that makes sense.

[yellowxboy]

thanks for the help for resizing the icons

now my only problem is that my bbm contact individual/group icons do not update properly but the sms/mms and email icons do just fine, there must be something going on w/ the bbm