Go Back   PreThemer Community > Main Category > Help & How-Tos

 
 
Thread Tools Display Modes
  #1  
Old 09-20-2009, 07:29 AM
PreThemer's Avatar
PreThemer PreThemer is offline
Administrator
 
Join Date: Aug 2009
Posts: 447
Default Theming Guide: Image Locations, Sizes etc

One of the first things a new themer will want to know is locations and sizes of common elements. Here's an ongoing list:

Wallpaper:
Size: 320x480 - should be JPG. No location, just upload it under wallpaper when you go to create a theme.

Boot Logo:
The boot logo is in 2 files, both are located under /usr/palm/sysmgr/images/. The default images from palm are:
  • palm-logo.png (200x200) this is the boot logo in the normal (non-glow) state.
  • palm-logo-bright.png (200x200) this is the boot logo in the glowing state.
Although both images are 200x200, when you make your own logos, you should make them 320x480. Why? Well if the image is smaller than that, WebOS fills the background with black around your logo which could end up looking weird. It works fine for the default images because the edges of them are black.

Application Icons:
Each application has a folder located under /usr/palm/applications. In each application folder there is an icon.png file that can be edited. These should be 64x64 PNG files.



To be continued
  #2  
Old 09-22-2009, 04:41 PM
PreThemer's Avatar
PreThemer PreThemer is offline
Administrator
 
Join Date: Aug 2009
Posts: 447
Default

Sysmgr Images
These files can be found under /usr/palm/sysmgr/images/ - Most, if not all, of these should be PNG images (they're the best for transparency).

  • screen-lock-padlock-off.png, screen-lock-padlock-on.png: These two files are the lock image that can be slid up to unlock your phone. They should be 84x84 png files and the "on" variation is how the image looks while your finger is pressed on it.
  • screen-lock-incoming-call-off.png, screen-lock-incoming-call-on.png: These two 84x84 files are the call button that comes up when you receive a call when your phone is locked. The "on" variation is how the image looks when your finger is pressed on it.
  • screen-lock-shutdown-off.png, screen-lock-shutdown-on.png: shutdown button displayed when the phone is locked. "on" variation is when your finger is on the button. Should be 84x84.
  • screen-lock-target-scrim.png: A 320x190 png file that is displayed behind the lock image when you press on the lock icon (when the screen is locked and you go to unlock it.
  • screen-lock-wallpaper-mask.png: this 320x480 image is displayed OVER the wallpaper when the screen is locked. It's what makes the wallpaper fade down to black in the default theme.
  • penindicator-ripple.png: This is a 66x67 png file that is displayed when you tap around the screen. In the Left 4 Dead theme, it's what causes blood splatters to appear around the screen.
  • quick_launch_highlight.png: This 64x64 png image shows up when you tap an icon on the quick launcher.
  • meta-move.png: This is a 32x32 png image. It's the directional icon that appears when you press down and try to navigate in text fields.
  • quick_launch_stash.png: This is the "wavy banner" that shows up when you drag your finger up from the gesture bar and get the quick launch. The file should be 616x165
  • quick_launch_bg.png: This 336x78 png is what's shown behind the quick launch bar. In this batman theme, the yellow belt bit is the quick launch bg image.
  • drive-mode-fullscreen.png: This is a 320x480 png image that shows up when you connect your phone via USB and put it in drive mode.
  • media-sync-fullscreen.png: This is a 320x480 png image that shows up when you put your device in media sync mode.
  • reorder-ripple.png: this is the ripple image that shows around an application icon when you're dragging/reordering. It should be 180x180
The boot logo images are also located in this folder, but they're covered in the first post.
  #3  
Old 09-22-2009, 07:05 PM
PreThemer's Avatar
PreThemer PreThemer is offline
Administrator
 
Join Date: Aug 2009
Posts: 447
Default

Battery & Signal Icons
These are located under /usr/lib/luna/system/luna-systemui/images/

  • battery-#.png: these files are 17x20 and are numbered 0 through 11 (so battery-0.png, battery-1.png ... battery-11.png) and represent the various states of battery charge (from 0 to 11, 0 being empty, 11 being full).
  • battery-charging-#.png: these files are also 17x20 and are also numbered 0-11. The main difference is that these icons are shown while the battery is charging (the default icons are the same as the battery-# icons only they have a lightning bolt beside the battery).
  • battery-error.png: shown when there's a problem with the battery. Default icon is a gray battery with white question mark. Also 17x20
  • flight-mode-icon.png: Pretty self-explanatory. Shown when the phone is in flight mode. File is 53x55
  • network icons: There are a number of icons here which are for the most part self-explanatory. They are for the various network connection types and their current state (active, connected, dormant).
    • network-XXXXX-active.png
    • network-XXXXX-connected.png
    • network-XXXXX-dormant.png
    Where XXXXX is one of the following services:
    • 1x
    • edge
    • evdo
    • gprs
    • hsdpa
    • roaming
    • umts
    All icons are 13x18 PNG files.
  • rssi-#.png: These are the reception icons. They range from 0 to 5 (indicating the number of "bars"). all files are 19x18
  • rssi-error.png, rssi-flightmode.png: Both of these files indicate an error in reception, or flightmode respectively. Icons are also 19x18
  • wifi-#.png: 20x18 icons ranging from 0 to 3 indicating the wifi signal quality (0 being lowest, 3 being highest).
  • wifi-connecting.png: 20x18 image shown when wifi is connecting
  • wifi-error.png: 20x18 image shown when there was an error connecting to wifi
  • wifi-security.png: 20x18 image, not sure of use. Assumed it's used when the wifi needs a password as the default icon is of a lock.
Addition via Slinkster:

App Launcher
These are located under /usr/lib/luna/system/luna-applauncher/images
  • fade-arrow-down.png: This is a 24x24 file that is displayed on the app launcher and when more apps are available further down the page this will show up on the bottom.
  • fade-arrow-up.png: Also a 24x24 file and the same as fade-arrow-down.png but on the top of the launcher page.
  • launcher-drag-ready.png: A 180x180 file that is displayed when an icon is ready for dragging to a new spot within the app launcher pages.
  • launcher-page-fade-bottom.png: This is a 320x30 file that is the bottom fade section of the app launcher background image (scrim.png).
  • launcher-page-fade-top.png: Another 320x30 file that is the top fade section of the app launcher background image (scrim.png).
  • scrim.png: The 320x480 image that is the background for the app launcher.
  • launcher-page-indicator.png: The small 7x15 little hash marks that are seen at the bottom of the app launcher that display how many launcher pages are available left or right of the current page.
  • launcher-touch-feedback.png: This 90x90 image is seen after you click on an app icon. This is NOT seen by simply clicking the screen.
  #4  
Old 09-22-2009, 08:07 PM
CagedReality CagedReality is offline
Member
 
Join Date: Sep 2009
Posts: 57
Default

This thread is great, thanks!
  #5  
Old 09-22-2009, 09:57 PM
DraztikRhymez DraztikRhymez is offline
Junior Member
 
Join Date: Sep 2009
Posts: 1
Default

Great Job!
  #6  
Old 09-23-2009, 07:55 AM
fritos1406 fritos1406 is offline
Junior Member
 
Join Date: Sep 2009
Posts: 6
Default

where is the wave bar located? its the one u hold the gesture+drag up..the wave bar launcher

EDIT: i found it

Last edited by fritos1406; 09-23-2009 at 08:00 AM.
  #7  
Old 09-23-2009, 08:20 PM
pixielee pixielee is offline
Junior Member
 
Join Date: Sep 2009
Posts: 21
Default

This is awesome!

So I make the files per the above information .. easy enough, but I see all this talk of css, .xml and so on and I dont know what any of that is. Is it something I need to know in order to make themes??

I think if I understand that the Theme Builder will turn the files into a zip, that I need to install it through WOSQI - buuuut ive not been able to figure that out (nothing happens when I click the green +) and I am thinking now its "not as simple", there is more to this than just making the files and putting the in the themebuilder - or maybe not and Im being blonde :|

Can we get a step by step of HOW to make a theme? What do I do with the files I made? What other steps/information is needed to do? or is it really that complicated that the avg. joe shouldnt mess with it??
  #8  
Old 09-23-2009, 10:29 PM
PreThemer's Avatar
PreThemer PreThemer is offline
Administrator
 
Join Date: Aug 2009
Posts: 447
Default

Quote:
Originally Posted by pixielee View Post
This is awesome!

So I make the files per the above information .. easy enough, but I see all this talk of css, .xml and so on and I dont know what any of that is. Is it something I need to know in order to make themes??
Nope, prethemer takes care of that. The xml file is the file WOQI uses when you install a zip. You can still install with an ipk, but just to make things easier all around, I added the theme.xml file

As for js and css, js changes mainly are for adding battery % instead of icon and css for changing text color (like on the bar at the top of the screen).

PreThemer does not support directly modifying those files (which is good, there are already a number of reports of themes breaking phones because the js/css changes are not playing nice with other installed hacks), but I AM adding in support for common changes like carrier text and text color (these are already implemented). I'm doing those changes in such a way that I do not believe it will cause issues with other hacks and apps.

Quote:
Originally Posted by pixielee View Post
I think if I understand that the Theme Builder will turn the files into a zip, that I need to install it through WOSQI - buuuut ive not been able to figure that out (nothing happens when I click the green +) and I am thinking now its "not as simple", there is more to this than just making the files and putting the in the themebuilder - or maybe not and Im being blonde :|
Don't even worry about that. If you upload the files to prethemer (the process is straight forward, and there's a location to upload each file and preview it), the site will make an ipk and a zip with the theme.xml file that WOQI would normally have made.

Same result, less hassle

Quote:
Originally Posted by pixielee View Post
Can we get a step by step of HOW to make a theme? What do I do with the files I made? What other steps/information is needed to do? or is it really that complicated that the avg. joe shouldnt mess with it??
Have you checked out the theme upload process on the site? I've worked pretty hard to make it as straight forward as possible. There are places to upload the wallpaper, boot logo, application icons etc. You can do it that way and let the site do the dirty work of putting the theme together in zip and ipk files
  #9  
Old 09-24-2009, 04:26 AM
pixielee pixielee is offline
Junior Member
 
Join Date: Sep 2009
Posts: 21
Default

OH thank you!!! That all helps very much - - i THINK i can makes us some themes now
  #10  
Old 09-24-2009, 04:55 AM
chexmix chexmix is offline
Junior Member
 
Join Date: Sep 2009
Posts: 22
Default

Hey I recently uploaded my first theme its New Orleans saint theme but b4 i put it online I did preview screens and I found some errors on my part the lock screen shows the "default wallpaper" as also my "wallpaper" is this code right?

<themelist>
<wallpaper>
<image>Saints.jpg</image>
</wallpaper>

also which file/png do i have to change for the background image on lock screen is it:

screen-lock-wallpaper-mask.png

Thanks in advance to who all that help

*nevermind I got it - this site is GREAT!!

Last edited by chexmix; 09-24-2009 at 05:49 AM.
 

Tags
file list, images, theme list

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 07:17 PM.


Powered by vBulletin® Version 3.7.1
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.