Deutsch English

PAP 2.0Beta
Theming

[ Part 1 ] [ Part 2 ]
A guide by MrElchbau (translated by spg Scott and solanus. Thanks!)

Along with this tutorial, we've got a zip file with all the files you need, and an example template. You can download it HERE. I would also like to expand it, so if you've got buttons, icons or similar theming stuff to add, they are always welcome. This is the reason why the file has a version number ;-)


  What is a Theme?  

The new PAP 2.0 menu now officially supports themes. It's something the PTC team has waited for a long time (for years we have waited for 'next week'). But wait: What is a theme, anyway? And what use is it to me?

A theme is a new 'suit' for a program, no more, no less. It changes only the look. But why? The obvious answers: so that it fits in better with your desktop, so that it isn't too conspicuous, so that it reflects your preferences, your personality, etc.

We themers tend to distinguish between different levels of theming: color variations, skins and themes. Where one ends and another begins is not entirely clear, even to us. But don't let that get in the way of the fun. It's like music: style is incidental, the main thing is that you like it.

Here are some pictures of our themes. The first is the default theme. It's cool. But will it still be cool the day after tomorrow?


  How to Install a Theme?  

It's really really simple:

  • Download a theme from the Internet (of course from the PTC-homepage, no question)
  • Start the PAP menu
  • Click on the "Options" button

  • Go to "Themes" and click on the three little points at the bottom of the dropdown

  • Search your download folder where the file was saved in the "open" dialog values
  • Highlight the file and click "Open"
  • That's it! Sit back and enjoy the new look
  • Download another theme. Perhaps that suits you better and looks even cooler. It's just that simple!


  The PATheme File Format  

A PATheme file is just a renamed Zip-file. Only the extension has been changed. But why? So you - and also the menu - can identify it more easily, and so all the graphics can be contained in one file. The menu unpacks the PATheme-file automatically, but any file compression tool can open it. In the file context menu you just have to select by "Open with" a (de)compression program such as 7zip, Winrar or Winzip.

The following files (not all are necessary, but this later) are in the main level the PATheme file:

NameDimension /
Alpha transparency
Specificities
PATheme.iniAbsolutely necessary!
The name of the theme, the version, the author and the font color is specified in this file.
background.png406*573 / nBackground of the menu
All pixels with the color RGB 255/0/255 (magenta) will be transparent
background_opaque.png406*573 / nBackground for older systems
No transparent pixels
appbutton_hover.png240*20 / yIs displayed between the apps name and the font when the mouse hovers over
folderbutton_hover.png120*28 / yIs displayed between the items on the right side and the font when the mouse hovers over
drive_space_slider.png131*13 / yDisplays the drive space usage in the menu.
Also used as a loading bar at the start of the menu
app_progress_background.png142*22 / yBackground for the loading bar at startup menu
button_scrollup_normal.png240*10 / yThe scrollup arrow
button_scrollup_hover.png240*10 / yThe scrollup arrow when the mouse hovers over
button_scrolldown_normal.png240*10 / yThe scrolldown arrow
button_scrolldown_hover.png240*10 / yThe scrolldown arrow when the mouse hovers over
button_close_normal.png70*22 / yThe exit button
button_close_hover.png70*22 / yThe exit button when the mouse hovers over
button_close_pressed.png70*22 / yThe exit button when clicked
button_eject_normal.png70*22 / yThe eject button
button_eject_hover.png70*22 / yThe eject button when the mouse hovers over
button_eject_pressed.png70*22 / yThe eject button when clicked
menu_iconsFolder
This folder contains the nine icons shown on the right side of the menu. The pixel size is 24*24 with alpha transparency. The filenames are:
documents.png / music.png / pictures.png / videos.png / explore.png / backup.png / options.png / search.png / help.png

  The Graphics  

In the PAP 2.0, the menu has changed a lot.
All graphics are in PNG-file-format. This file format has many wonderful advantages. The files are compressed, so that the size is smaller than in BMP format. The compression is lossless, so you don't get the ugly smudges or blockiness that you can get with the JPG format. In addition, the PNG format supports alpha transparency, which means that pixels are represented in different levels of transparency. The change to the PNG format, cannot be praised highly enough.

The second innovation is the added hover effect on some menu items. For example, when you move the mouse pointer over one of the menu buttons, the graphics change. Of course, adding this effect means that the theme needs many additional images to show this.But honestly, it's worth it, isn't it?

Here is an example of alpha transparency:
The image for the hover effect is not completely opaque. The center area is partially transparent. So you can navigate and the background is still visible.

For each graphic in the above table a size is specified. You COULD make the files different sizes, but how will that affect the menu?
The background.png is automaticaly rescaled to 406 * 573, no matter whether it was previously larger or smaller. In this example, the background.png has a circle with the dimensions 500 * 500 pixels, but when resized in the menu it looks like an egg. Rather ugly. So, it's best to create your background.png to the same proportions as 406 * 573 to avoid distortion.
The other graphics will all be similarly rescaled to their correct sizes and proportions.

And what happens if a file is missing?
The menu replaces all missing graphics with those from the default theme. If you just include the background.png in your theme, everything else would be the same as the default theme. This makes it easy to just vary the color of the menu. Or, if you include a new image for every graphic, you would have a totally different look. Theoretically, you could have a theme that only contains the PATheme.ini file - but it would look just like the default.

  The Map  

Here's an ultimate overview of the areas in the menu (you can find a similar map in our templates file):

[ Part 1 ] [ Part 2 ]

 

 
Firefox 3
Firefox 2
PTC, more than design!(c)2009 by NeoRame, MrElchbau
Design (c)2008 by NeoRame, MrElchbau
Downloadsystem powered by
Olate Download
PicLens RSS