iTunes layout example with Toolkit 5.3.0 RC

General
1

Hi,

Just wanted to show everyone what I did today with the latest version of our Toolkit. The next RC5 will be released later today, that’s what I’ve been told anyways, and the following layout/themeing example was done using it.

So I set out to implement the rather usual layout that is used in many currenty desktop applications. I somehow chose iTunes, but it could have been Apple Mail or Mozilla Thunderbird for that matter.

Anyhow, here are some screenshot how it ended up looking. I developed the theme exclusively in Safari 3 and Firefox 3, and only lastly checked out how broken it might be in IE7. But to my surprise, the layout required zero modifications or hacks for IE7. Even IE6 works with a small fix (overriding a CSS hack from our default theme).

And if someone doesn’t know how iTunes looks like, I added the original layout for reference as well. Last screenshot is the same application using the default Toolkit theme.

Here are the screenshots:
Original reference: http://dl.getdropbox.com/u/427102/ToolkitTunes/original.jpg
Safari 3: http://dl.getdropbox.com/u/427102/ToolkitTunes/safari3.jpg
Firefox 3: http://dl.getdropbox.com/u/427102/ToolkitTunes/firefox3.jpg
IE7: http://dl.getdropbox.com/u/427102/ToolkitTunes/ie7.jpg
Safari 3 with default theme: https://dl.getdropbox.com/u/427102/ToolkitTunes/safari3_default_theme.jpg

I added the application stub into our incubator (http://dev.itmill.com/svn/incubator/ituneslayout), feel free to copy it from there if you want to use it or play with it more. Note, though, that none of the images are released under any public license, and should not be used in any real projects.

Happy holidays everyone!

2
3

[quote=Anonymous]
Do I have to create an account to Dropbox to see the screenshot or is the url incorrect??
[/quote]Oh, sorry, I didn’t realize folders weren’t available in dropbox to everyone.

I replaced the link with links to all specific screenshots.

4

Wow… Looks great!

5

Quite an overstatement… (when taken out of context ;))

6

Looks really nice! :thumbup:

7

Amazing! Especially the Safari version :slight_smile:

8

I added one more screenshot, the same layout with default theme https://dl.getdropbox.com/u/427102/ToolkitTunes/safari3_default_theme.jpg just to show the effect of the custom theme.

9

Is that done with just CSS? Or do you need a custom widgets too?

10

Seems to be 19 png images and 1 styles.css file. No “custom widgets” are required.

Check(out) sources from here:

http://dev.itmill.com/svn/incubator/ituneslayout/

11

[quote=Jani Laakso]

[quote=Anonymous]
Is that done with just CSS? Or do you need a custom widgets too?
[/quote]Seems to be 19 png images and 1 styles.css file. No “custom widgets” are required.
[/quote]Yup, that’s right. No custom widgets were used, just plain CSS and images.