I really like the new theming system, but I haven't seen a full explanation of it. Here's what I can deduce from experimentation. Hopefully this will be of use to other themers.
Please let me know if I got anything wrong.
This information is the best I can figure out from version 2.0b5, but I can't guarantee that it will stay entirely the same for future betas.
The Platform/Menu has both Built-in themes, and the ability to install Custom themes.
The Built-in themes are not really intended for editing.
Custom themes can only be installed one at a time.
Selecting themes is done through Options>Theme, which displays a long list of built-in themes, and at the very bottom, three small dots...
To install a custom theme, click on these dots and browse to your custom *.patheme file.
-The Built-in Themes:
While the built-in themes are not intended to be edited, you can get an excellent understanding of the system by examining them.
The new theme system uses layers of .png files and html colors to achieve a color-mixing effect.
It will be pretty powerful once it's finished, but themers will need to understand exactly how it works to use it to its best advantage.
The two layers for the background are:
- background.png
- the "chrome" files: white.png, dark.png, white_opaque.png, dark_opaque.png
There are also a lot of small .png files for the buttons and icons.
The html colors, choice of background and choice of "chrome" are set in the patheme.ini file.
First, let's look at the file locations.
The built-in themes locations:
X:\PortableApps\PortableApps.com\App\DefaultData\Themes\
subfolders.
Each of these subfolders corresponds to one of the built-in themes in the list Options>Theme
The base of all of these is the Default
folder.
It includes all the button .png files, including a subfolder called menu_icons
that has the icons for the buttons in the right pane.
There's also a patheme.ini file, that defines the html colors, "chrome" and background.
Now, if you look in the other folders, you only see a patheme.ini file, except for Rainbow
and Textured
, which also have a background.png file.
When that theme is selected, whatever's in that folder overrides what's in the Default folder, but leaves everything else alone.
So, for example, in the Green
folder's patheme.ini file, the [menu] section specifies
Chrome=white Background=none BackgroundColor=182802 ;GREEN
While in Textured Dark the patheme.ini file has
Chrome=dark Background=custom
Here, the background color doesn't show through, so it doesn't matter.
The last piece of the puzzle is the "chrome" files. These are here:
X:\PortableApps\PortableApps.com\App\Graphics\Chrome
These .png files are the basis for the real look of the built-in themes.
They currently cannot be changed or added on to.
The color-mixing comes from the fact that .png files support transparency.
The "chrome" files and many of the the button files are partially transparent.
The menu layers them in this order:
TOP - "Chrome" file
MIDDLE - Background.png
BOTTOM - HTML color
So, that's how it works for the built-in themes. It's not recommended to directly edit these.
You CAN'T edit or delete the list of themes that appears in the list Options>Theme. It's built into the platform exe file. You're stuck with that list.
-Custom Themes:
Making your own theme uses the same concepts, but the files are in a different location.
There are also a few tricks that make theme creation easier.**
Custom Themes automatically install to X:\PortableApps\PortableApps.com\Data\Theme
You can build one directly in this spot, and then package it really easily.
Whatever you put in this location will override the default theme.
**TIP - First, we have to install an initial custom theme, so let's package a simple one to use.
Copy the default patheme.ini file to the X:\PortableApps\Documents
folder.
Zip it.
Rename the zipped file to Base.patheme (make sure you replace .zip with .patheme).
Now, to install it in the menu, choose Options>Theme>...
Browse to Base.patheme, and Open it.
It won't look any different, but now we can play with it.
Here's some examples of custom themes.
We'll be editing the files in X:\PortableApps\PortableApps.com\Data\Theme
1. Special color
Edit the patheme.ini file [menu] section:
Chrome=white Background=none ;BackgroundColor=550004 ;RED BackgroundColor=7FFF00 ;Chartreuse
Save the file.
Close and reopen the menu to see the new color.
2. Special background with default "chrome"
In your favorite graphics editor, create an image 406x573 pixels.
Save it as X:\PortableApps\PortableApps.com\Data\Theme\background.png
Edit the patheme.ini file [menu] section:
Chrome=white Background=custom
Save the file.
Close and reopen the menu to see the new background with the default white "chrome" overlay.
**TIP - if your background.png has any transparent areas, the BackgroundColor will show through.
If it has partially transparent colored areas, these colors will MIX with the BackgroundColor!
3. Total conversion
Copy all the files from X:\PortableApps\PortableApps.com\App\DefaultData\Themes\Default
and put them in X:\PortableApps\PortableApps.com\Data\Theme\
Now you can edit these files in the new location to your heart's content!
Edit the patheme.ini file [menu] section:
Chrome=custom Background=custom
Save the file.
**TIP - It's best not to change the dimensions of the different .png files, since that's hardcoded into the menu, and you can't relocate buttons.
**TIP - In creating/editing the .png files, there's a special color that generally displays as transparent - FF00FF. It was used in the old themes to make rounded corners, but with the new system, it can cause some weird effects.
**TIP - You can emulate the "chrome" file, sort of, with your background.png, if you make it grayscale and partially transparent. In GIMP, try reducing the opacity of the layer to 50% before you save. Then the BackgroundColor will show through...
You will need to restart the menu each time to see your changes.
Once your custom theme looks right, then you can package it easily. Select all the files in
X:\PortableApps\PortableApps.com\Data\Theme\
(don't select the actual Theme folder, though, just its contents).
Zip it.
Rename it by changing .zip to .patheme, and you are done!
This information is the best I can figure out from version 2.0b5, but I can't guarantee that it will stay entirely the same for future betas.
EDIT: I've started a site to share and host themes as 2.0 progresses.
It's here:
http://paskins.sourceforge.net/
I've got one of mine up there, and a GIMP template, but I'm OK with adding other people's themes.
Thanks for the tips. I've been playing around with the colors because most of them are too muted and not as nice as those the previous version. That is working fine. But I was wondering the best way to get rid of any themes I don't want and not have them showing up on the menu. I tried deleting (I did back it up) the Yellow Theme, but even after closing and restarting the platform, the Yellow Themes are still on the menu although it will just give you the default if you select it. Do I have to go in and edit ALL the patheme.ini files and take them out of [menu] listing?
John has built the list of themes directly into the PortableAppsPlatform.exe.
You can't edit or delete this list. Even if you removed all the folders in
X:\PortableApps\PortableApps.com\App\DefaultData\Themes
that list would still appear. I've updated my post to include that information.
I'm sure that the theming system is not a finished thing, though.
Don't forget that this platform is a beta, and an official release is a long way away. I'm sure that improvements will be done based on use input as more people try to make themes.
I made this half-pony, half-monkey monster to please you.
Thanks for the guide. Hopefully the skinning will get some improvements as you've suggested. The Violet theme - my favourite from 2.0 Beta 4 - looks awful in Beta 5. The old skins aren't directly compatible either, so I just can't get it from Beta 4 and import it into Beta 5. Even the old default theme (my second favourite from Beta 4) looked 100x better in Beta 4 than it does in Beta 5.
Anyway, one small suggestion for your skins - the bit that shows the space left on the drive is hard to read on all of your skins except for "Old Default Visibility". The template file - which looks really, really nice by the way - has the same problem. You can see what I mean when you look at the screenshots on the website.
I used to have a sig...until one of the mods ate it
I'll change the colors in the ini files for the drivespace font. I should probably stick to white (FFFFFF) on dark and black(000000) on light.
On the template, the text is obscured because of the order of layers. The text is there only to give you an idea of how the layout is.
If you like the look of the template, you can just copy and save the spiral rainbow background layer to use as a background.png.
The main compatibility issue for the beta 4 vs beta 5 background.png is the drivespace area on the background, which is wider in beta 5. It's a pretty easy edit.
CrypticOne made a good post about tweaking the colors:
https://portableapps.com/news/2010-07-17_-_portableapps.com_platform_2.0...
You can also Google "HTML Colors" and you'll get some great charts that can help you get the best color.
I made this half-pony, half-monkey monster to please you.
Great, thanks solanus
I used to have a sig...until one of the mods ate it