PortableApps.com Wins Big in the 2009 SourceForge Community Choice Awards and hits 100 million portable apps served!

PortableApps.com Theme Format Discussion (and Classic Theme Download)

John T. Haller's picture
Submitted by John T. Haller on March 7, 2009 - 6:39pm

I wanted to begin a discussion on the actual setup of themes in PortableApps.com Theme Format which is what we'll be using for 2.0 and up. I did a quick example theme that you can download to play with. Get it here:
http://portableapps.com/downloads/app_extras/platform/themes/PortableApp...

It's a ZIP right now, but the themes will actually be zip files renamed to .patheme when we're ready to start releasing them. To try it, unzip it to your X:\PortableApps\PortableApps.com\App\DefaultData\Theme folder. It replaces your current theme so back it up first. Remember that it will be replaced when you upgrade the Platform.

The details of the theme are included in a file called PATheme.ini. The contents for this example theme are (NOTE: This has been updated to what will be supported in the next release):

[PortableApps.comTheme]
PortableApps.comThemeVersion=1.2.1
PortableApps.comThemeType=Simple

[ThemeDetails]
Name=PortableApps.com Classic
Version=1.2.1
Author=PortableApps.com
URL=http://portableapps.com/

[ButtonApplications]
FontColor=000000

[ButtonFolders]
FontColor=FFFFFF

[DriveSpace]
FontColor=FFFFFF
FontShadowColor=888888
StretchImage=true

[DriveName]
FontColor=FFFFFF

As you can see, this is for what we're calling Simple themes which don't alter the layout of the form. The PortableApps.comTheme section includes details on the type of theme and the theming engine version it uses (1.2 in this case). The ThemeDetails section is the basics of the author, version, website, etc. We'll be adding FontHoverColor and FontPressedColor to the ButtonApplications and ButtonFolders sections so themers can colorize the font on hover and press as well.

The ButtonApplications section allows you to set color of the font for the app icon labels. The ButtonFolders section allows you to set the color of the font for the folder button labels. The DriveSpace section allows you to set the color of the font for the foreground and shadow for the label and to define whether the image used to display used space should be stretched/compressed or just shown (which would cut off the right side of the image).

The following images are included:
background.png - The menu background (this must be a non-transparent PNG with any areas you want transparent set to the magic color aka magenta - #FF00FF)
background_opaque.png - Background used on older operating systems that can't do transparent areas (this must be a non-transparent PNG without any magenta)
button_*_hover.png - Used when the mouse is over the button
button_*_normal.png - Used for the button
button_*_pressed.png - Used when the mouse button is pressed down
etc...

The appbutton_hover.png and folderbutton_hover.png are alpha PNGs that allow what's underneath to show through. This is what gives us such a nice effect. Incidentally, the button_*_... images above can also be alpha PNGs. They are in the current menu and the classic, actually.

Alright, so I wanted to open up to see if we're missing anything yet in terms of Simple theming. We'll be doing Advanced later (new folder layouts, etc).

Also, please don't start posting themes in new topics yet. This is just to get discussion going. We'll have a dedicated forum for themes on the 2.0 release once the theme switcher is included.

Thanks!

Updates
Some updates have been made to the example theme INI above that are not yet supported in a release of the PortableApps.com Platform.

1.2.1 (2009-03-19): Added ability to change color of drive name font


( categories: )

Back UP?

John,

Will this over write the current theme, should we make a backup ?

Tim

"freenode, it's Not as Free as it used to be, Free as in Freedom" Sad

Yeah

I thought it was obvious, but I just added a note in case.

Sometimes, the impossible can become possible, if you're awesome!

Hmm, I suspect this is

Hmm, I suspect this is pre-freestyle skins?

I would suggest having separate ini entries or separate ini files for each skin so a skin can be delivered completely and its easy to select and switch between themes without copying ini files, renaming or things like that. But I suspect that's the way it will be done eventually..

PATheme.ini
MYTheme.ini
Etc.

Maybe also think about backward compatibility for these skins with the upcoming ones..

Yes, No

Yes:

John T. Haller As you can see, this is for what we're calling Simple themes which don't alter the layout of the form.

And no on the 2nd. The menu will automatically create a folder for each skin which will contain it. The INIs won't be in the same directory.

Sometimes, the impossible can become possible, if you're awesome!

I hope I didn't misunderstood

I hope I didn't misunderstood you... anyway..

I would like to suggest you think about putting ini's in the theme's folder and make the theme selector check for theme-folders to determine the themes. I think it would be good practice to have all files belonging to one theme in one folder without INI files floating around. This will make managing themes (developing, adding and removing) an easier experience for developers. (IE copy one folder to present a complete theme instead of one folder and an ini file, and you don't need to backup your current theme.)

Or is there a specific technical reason to have the INI files outside the Theme folder?

Unless ofcource all themes use the same ini and it's just a pointer to a different folder, in which case I wonder what the use is for an INI as one could just keep a standard naming sceme. Maybe even copying the ini content.

But if it is a preperation for the future freeform themes as well I'll vote to already put the theme.ini into the theme folder.

Thanks for all the work on the menu and I hope you don't feel like I'm nagging, as I'm just wanted to express my thoughts about the standard that's future proof.

That's What I Said

The INIs will be in the folder for the THEME. I meant that the INIs won't all be in the same folder. All themes will be self-contained in their own folder. No files will intermingle.

Sometimes, the impossible can become possible, if you're awesome!

Ah sorry, i misunderstood as

Ah sorry, i misunderstood as in the INI's wont be in the same folder .

Thanks for clearing that up Laughing out loud

PS. maybe its a good idea that if a user has multiple themes available, keep them as zipped format and only unzip the current theme. This way the user can have more than one theme for his menu and uses the least space. (Actually it depends on the size between zipped and extracted themes though. ie. write cycles versus size on the USB flash drive)

Small

The default theme is 96KB. Zipped it's about the same as we're dealing with optimized PNGs anyway. Well, they can be optimized a tad more... but we're looking at no size difference.

Sometimes, the impossible can become possible, if you're awesome!

If it's possible, I would

If it's possible, I would suggest adding FontColorHover, and FontColorPressed to the buttons.

I assume that you will have an "Install New Theme" menu entry like the "Install New App" one. Maybe consider checking the theme directory for any new .patheme files and automatically install theme. We could then just download themes directly to the theme folder and not have to tell the platform to install it.

When you install through the "Install New Theme" dialog, it might be nice if when finished it asks "Apply This Theme Now?"

Will the platform be loading the themes from the .patheme files or will it extract each one as it is installed and then delete the .patheme files?

Yup

I forgot to note that I'm going to add them in. And they're the names you mentioned to be consistent with the images.

There will be an Install New Theme as well as the ability to drag and drop a theme in. Probably won't do the directory thing since it would slow startup a good amount. And most folks will probably download themes as they use the Platform, so they can install them right after download... the drag and drop will make this very easy.

I'm not sure about Apply this now. We may have to get more complicated and add a Do Not Ask Again thing to it since it could get annoying for users who like to add lots of themes.

The .patheme files will be extracted to the Platform's data folder. They won't be saved. Kinda like Firefox extensions.

Sometimes, the impossible can become possible, if you're awesome!

Ok, that clears some things

Ok, that clears some things up.

Ready for discussion of "complex?" themes now.

Not sure if get it right

themes are then treated similar to the personal pic? Patheme folders could be put everywhere, eg the Pictures folder?
My question two: what about the wallpapers? (Or is that already advanced themeing?)
Should they come as separate files to be renamed for use? Or are they extracted, too?
This would blow up the data section of the platform, of course. An entry in the theme.ini like loadwallpaper=true and wallpaper=Mynamewallpaper might show the right name? What do you think?

"Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .." Friday Next -
"May The Schwartz be with You!" Yogurt the Yoda

Ok...

John T. Haller (#)
The following images are included:
background.png - The menu background
background_opaque.png - Background used on older operating systems that can't do transparent areas
button_*_hover.png - Used when the mouse is over the button
button_*_normal.png - Used for the button
button_*_pressed.png - Used when the mouse button is pressed down
etc...

The appbutton_hover.png and folderbutton_hover.png are alpha PNGs that allow what's underneath to show through. This is what gives us such a nice effect.

Then... button_*_hover.png, button_*_normal.png and button_*_pressed.png do not support alpha transparency? Only appbutton_hover.png and folderbutton_hover.png support transparency?

This means that we have to know where the button will be so we can copy the background, right?

Or do these support transparency too?

Beyond that I don't have much further questions.

-------------------------------

John T. Haller (#)
Also, please don't start posting themes in new topics yet. This is just to get discussion going. We'll have a dedicated forum for themes on the 2.0 release once the theme switcher is included.

And what happens to older threads that have older themes? Should these be moved to the new Theming Forum when this is created? Or should they be left in its own place? Adapted to the new forum by modifying slightly the title and move would be the best idea in my opinion.

-------------------------------

I actually have a nice idea Laughing out loud

On my site I've made a very simple idea that needs no modules (unless for some extras below) and provides a clean system for installing themes.

I've basically made a new type of page called Projects and used taxonomy and URL alias to link it directly to /projects/PAMthemes. That page type allows attachments; and with the CreativeCommonsLite module I can add the theme's license directly to the page.

If we change this idea a little bit, it can be feasible here.

My idea is to make the forum for the themes to have a special taxonomy therm that would be set up with a few settings:
Basically it would have several fields (using CCK or Views module or whatever is best in this case) for:

  • Theme Name,
  • Theme Description,
  • Preview (an url field),
  • and Download (another url field).

Other fields could be made for things like changelogs, license and issues (or simply an "Other" field for all other things).

I know this isn't feasible in such dimensions site, but some ideas can be taken and modified to create a nicer system.

-------------------------------

(sorry, this is how my posts look when I am interested in something and I want to help, but have nothing to say Sticking out tongue )

Photoshop? No… I use GIMP. No, It's not pirate. No, I didn't pay for it. It is possible! Because it's free. Yes, free! Ok! Stay with your pirated Photoshop!!! Idiot…

All Alpha

Yeah, actually all the app buttons can be alpha. Sorry for misleading on that. They are now actually if you look at em. Everything can use alpha including the folder and options and help icons. The only thing that can't is the menu background which has to use the special key color at the moment but should use single-color transparency in the PNG itself later (just fixing a bug with it now).

Themes will be listed in two ways. The forums will be for everyone to post stuff for now. And we'll have a separate directory. I'll be using CCK for it as you suggest actually.

It may make sense to do special forum post styles to let people post themes... if you already have a setup for that, we should talk about it. We may be able to do it here. Just not sure about the size of it all eventually since we could be looking at a lot of themes. Any ratings included?

Sometimes, the impossible can become possible, if you're awesome!

I haven othing big

Basically I've made a new page type called projects, and used taxonomy to point the themes listing to /projects/PAMthemes so i wouldn't have to do a listing manually.

What then I added was the CreativeCommonsLite module so I could add the license to it.

As this was a personal thing made only for me to have an easy way to list my themes (only 3 atm Sticking out tongue ) I didn't made any messy stuff.

I allow attachments (they are only my themes), but in here it would be better to use CCK to point to an external site with the file download.

It was a very simple thing, the URL for what it looks like is here (sorry for the shameless self promotion Sticking out tongue ).

Actually I have something malfunctioning because the license isn't showing as it should Sticking out tongue

But basically I have revisions enabled, and have some basic structuring that could be made with CCK (maybe it is better to show the License in a CCK field too). I'd like to point out I've never worked with PHP and never worked with CCK, I only know what it is.

But my idea stands for these fields:

  • Theme Name
  • Theme Description
  • Theme's Image (url)
  • Theme's Download File (url)
  • Theme's License

And to display them in the best form possible.

Unfortunately I have no idea on how to make ratings.

EDIT: If you want, I can give access to administration in my site for you to see how it is set up.

Photoshop? No… I use GIMP. No, It's not pirate. No, I didn't pay for it. It is possible! Because it's free. Yes, free! Ok! Stay with your pirated Photoshop!!! Idiot…

i think for basic theming its

i think for basic theming its all included. and this format is ok.
for advance theming we need some more options like button size and place, menu size, applist size......

Hell was full, so I came back!!!
Sorry for my lousy English!!!

Planned

That's planned. AppList size may wait for the next version of Advanced, though, or be a simple 10, 20, 30 switch or similar. But yeah, stuff like button location and dimensions for the folder and option stuff independently. Location, spacing and offset for the app list (offset will let you have the applist appear on a diagonal line for instance... AppButton1 and then 15 px down 5px right AppButton2, etc). Form height and width. PA.c logo placement (with option for a small PA.c logo or possibly no logo, etc, etc). But we'll start posting some ideas for all that in a new thread later this week. Let's not clutter this one up. Sticking out tongue

Oh and please don't post themes, yet, since they're not actually in PortableApps.com Theme format and can't be until the next test release. I'll open up the Theme forum then.

Sometimes, the impossible can become possible, if you're awesome!

sounds realy good, i like the

sounds realy good, i like the diagonal idea. and yes i will not upload themes for now. only one as lternative Smiling
new year new work. im back on portableapps.com lol

regards
neorame

Hell was full, so I came back!!!
Sorry for my lousy English!!!

Ok, I know you want to wait

Ok, I know you want to wait until later to discuss ideas, but this question is really important.

Can buttons be displayed over an area that is transparent on the background?

Edit: Nevermind, I just checked. The transparent color shows through the button. Sad

Same

Delphi doesn't support transparency outside of itself. This is unchanged. Not sure if the latest Delphi release supports it or not.

Sometimes, the impossible can become possible, if you're awesome!

if i could suggest something....

as i have thought since the betas for 1.2, i believe that there should be something like a line in the config that dictates the type of theme.

for instance, full support for 1.1 style themes could be accieved by adding a line to the config (and some re-coding of the menu) to disable all of the extra images that are used in the newer 1.2/1.5 themes as well as allowing for the use of the older jpg and bmp formats.

i also think that this could be more general in the fact that it would not only be support for 1.1 themes and older but "Simple Style" themes such as the classic menu theme.

for now thogh i will experement a bit with the current format and see if i cant make up a non-intrusive, no code hack. i will also try to upgrade all of my themes to 1.5 standards.

any replies would be appreciated, especially from u JTH Eye-wink

I Am We Todd Ed, I Am We Todd Ed, I Am Sofa King We Todd Ed. Eye-wink

Found a bug

I've just noticed that, although there is a setting to change the color of the drive space label, there is no option to change the color of the drive label itself next to it.

Here is a preview of the bug, and here is my PATheme.ini:

[PortableApps.comTheme]
PortableApps.comThemeVersion=1.2
PortableApps.comThemeType=Simple

[ThemeDetails]
Name=Oxygen Theme
Version=1.2
Author=PTMblogger
URL=http://ptmblogger.co.cc/

[ButtonApplications]
FontColor=444444

[ButtonFolders]
FontColor=444444

[DriveSpace]
FontColor=444444
FontShadowColor=888888
StretchImage=true

Photoshop? No… I use GIMP. No, It's not pirate. No, I didn't pay for it. It is possible! Because it's free. Yes, free! Ok! Stay with your pirated Photoshop!!! Idiot…

Yeah

Yeah, that would be an ommission. I'll get it in the next release.

Sometimes, the impossible can become possible, if you're awesome!

Could you...

Could you provide us now the new parameters for when this is fixed? So we can make our themes "forward compatible" with the version that will fix the omission?

Photoshop? No… I use GIMP. No, It's not pirate. No, I didn't pay for it. It is possible! Because it's free. Yes, free! Ok! Stay with your pirated Photoshop!!! Idiot…

Posting

We're encouraging users not to post themes as the Format is not yet official. Any themes posted now are not guaranteed to work with anything.

I've updated the original post with the format.

Sometimes, the impossible can become possible, if you're awesome!

My own work

I can't wait for the theme switcher to come out, i've already started on my own themes

http://img5.imageshack.us/my.php?image=patheme.png

edit: for some reason the background.png won't become transparent when used, can someone tell me why? Just in case, im using GIMP

transparent

replace all "transparent pixel" with pixel of pure magenta (255,0,255).
take a look how the original did this effect.
happy theming Eye-wink

Life is crunchy, anywhere

didn't work

that didn't work either...

background.png is NOT transparent

You can't save it as a transparent PNG (alpha or single color). Save it as a normal PNG and any areas you want transparent in the menu have to be magenta.

I thinned out the extraneous posts. Please note that this is not a HOW TO topic at the moment. We're discussing how the theming system will be setup once it is done.

Sometimes, the impossible can become possible, if you're awesome!

Thanks

Thank you, that seemed to work perfectly

New .patheme format and capabilities

I believe the .patheme format should have the ability to add custom icons that override the default icons. This would be much easier than manually changing the default icons just to get the effect of custom icons.

This, I believe, would cause the files to look something like this:

+ Example_File.patheme
  + Theme
    * appbutton_hover.png
    * background.png
    * background_opaque.png
    * button_close_hover.png
    * button_close_normal.png
    * button_close_pressed.png
    * button_eject_hover.png
    * button_eject_normal.png
    * button_eject_pressed.png
    * drive_space_slider.png
    * folderbutton_hover.png
    * gpl.txt
    * PATheme.ini
    * readme.txt
  + FolderIcons
    * documents.ico
    * explore.ico
    * music.ico
    * pictures.ico
    * portableapps.ico
    * videos.ico

I do understand that the format has been set; however, this feature will be appreciated by me, and I imagine many others.

Thank you all for reading my absurdly long post.

It Does

You can override any of the icons you'd like with the custom theme. Any you don't override, the defaults will be used. Your theme can actually be a background only and then all the defaults will be used. Or you can just add the documents icon. Same thing.

The current one doesn't make a good example of it, but you can include any files from the Default theme in your .patheme and it'll use em.

PS - I removed your homepage link in the post. Links aren't allowed in signatures or end-of-post pseudo signatures. Your homepage appears in a link next to your name.

Sometimes, the impossible can become possible, if you're awesome!

thank you

Okay now I will know for future reference...cool!

Ohhh!!?? Now I see the homepage thing...

P.S. i had to look up "pseudo."