Announcement: Mork theme available

I’m home in a fever and decided to push a project of mine to the incubator…

The Mork theme is now available here: http://dev.itmill.com/browser/incubator/Themes/WebContent/ITMILL/themes/mork/
You can also check out the whole eclipse project with a test-application:
http://dev.itmill.com/svn/incubator/Themes/

It’s CSS only and can very easily be color-customized. Have a look at colors.css which contains two example colors (“emphasize” and “olive”): http://dev.itmill.com/browser/incubator/Themes/WebContent/ITMILL/themes/mork/colors.css

Mork is a work in progress, feel free to contribute ideas, suggesting, or CSS :slight_smile:

README: http://dev.itmill.com/browser/incubator/Themes/README.txt


UPDATE: removed screenshot since it started to ask for svn permissions :-\ Newer image below anyway.

Best Regards,
Marc

Looks very good. Gives a fresh look to it.

Nice! This might be near a theme (+widgetset) that I’d like to see. Requirements in a nutshell are

  1. speed is of most importance
  • packet count from server to browser is minimal
  • rendering is fast for browser
  • simple images
  • simplify, tweak, do whatever to get extremely responsive UI
  1. looks are decent (not great)

  2. maximize layout’s text utilization

  • this means use quite tight spacing, perhaps a bit smaller fonts

In short, KISS is a nice rule to apply here.

Above might mean we cannot have round corners on our widgets, fine :slight_smile:

Just my five cents :slight_smile:

Cool, a really nice one ! :slight_smile:

Wow… that is nice!

Jani, this sounds like a nice tuning project in spirit: “my theme is faster than your theme”. So go ahead and create that “turbo” theme!

Tuning theme in Toolkit is all nice and simple, but tuning widgetset is more harder to do in short timeframe.

Oh well, I think I have other plans to utilize Toolkit in my community time :slight_smile: When I can arrange myself some darn community time…

How about starting with CSS tuning - just dropping all/most of the images from default theme, tuning margins/spacing/fonts to be smaller, …

While we’re on the subject…

Mork re-uses the same two ‘fade’ png:s for almost everything: bg.png and mfade.png, and is basically very simplistic. The rest of the images used are for specific UI elements, such as the window “x” and combobox arrow (these were mainly changed so that they work better when changing the color).

However, since it inherits the ‘default’ theme, which is quite complicated, and anything that is not overridden will come from default. There has been plans to make a bare-bones theme that could be inherited instead, which would be perfect for Mork - I think Jouni has even started the ‘bones’ theme, but it’s not finished due to time-constraints :-\

But the main feature of Mork is still the ability to change it’s color by adjusting one or two CSS properties.

Anyway, I think we should figure out how much interest there is in theming (poll, anyone?) - if there is enough interest, it might be wise to bump the priority of the bare-bones theme + tutorial.
And then there is the
theming competition idea
we’ve been talking about arranging - perhaps we should do it with the GWT community as a whole: http://www.ongwt.com/post/2008/11/07/Skinning-contest

I think theming should be an interesting feature, as almost for any production application, the question abount making a custom theme raises up sooner or later. So, to my mind, an kind of tutorial / documentation would be very very useful.

I can also add my 2 cents by supplying a chapter for theme-orineted manual or whatever else about applicaiton customization using just only a custom layout, as we did this in our company in order to transparent application fitting into the existing website look-n-feel. This is not a true custom theme as it uses default theme (or whatever else) but it minics the application as it is a website, that is required for some cases/projects and very fast and easy to implement even for non css guru/webmaster (like me :slight_smile:

I just updated Mork to include TabSheet and Accordinon. Made small adjustments to other stuff as well.

Feedback welcome!

Best Regards,
Marc

The Mork test application is now available online:
http://marc.virtuallypreinstalled.com/mork

…this way you can easily tweak stuff with firebug and send patches to me… :wink:

The ComboBox in the upper right changes style for that column, try ‘emphasized’ for instance.

And once again: it’s a work in progress…

Best Regards,
Marc

Hi,

I made some small updates to Mork again, and updated the example to run on 5.3.0:

http://marc.virtuallypreinstalled.com/mork
http://dev.itmill.com/svn/incubator/Themes/WebContent/ITMILL/themes/mork/

I mostly fixed some components based on Johan’s feedback.

Note: there is currently a ‘overflow issue’ where the rightmost pixels of a few components are cut of. Not too bad though. Will take a look at it soonish…

Best Regards,
Marc

Any update on this to support vaadin 6.1.0?

:([quote=syam ]
Any update on this to support vaadin 6.1.0?
[/quote]

Sorry, haven’t had time to update it yet :frowning:

Best Regards,
Marc

Please go ahead Dmitri, it would be very useful and proably to be later integrated in the Vaadin book.

I love this theme, its just what I am looking for.

Hope you / some one with the designer skills is able to update this for 6.1

I have
added a suggestion here
if there is anyone else who would like to see it in the near future.

In general I would like to see more Themes added to Vaadin - they are a great way to show off how flexible but simple Vaadin can be - which has to be one of its best selling points.

cheers
Ant

John, I’ll try to finish up all the things I’ve promised (some articles, tpt 1.0, etc) this autumn as we finish current activities on putting several clients onto production.

It looks very nice…
I have set this theme using setTheme(). But How can i change the label Color(like change the style).

I have added the JAR file in NETBEANS IDE…

Do i need to add anything except the setTheme()???

Thanks,
Ajay