Monday, 20 August 2012

JavaFX CSS Styling

I've been working on a light grey look and feel for JavaFX with square corners, inspired by the Swing Substance (Business Grey) Look and Feel.  Here are the results so far:

And just as a reminder as to the default JavaFX look and feel:

This is a work in progress and not all of the controls are styled.  This skin has now become the first entrant in the jfxtras-styles project hosted on github or click here if you just want to grab source.

The extra space is to show the drop shadows on the titled panes which I use quite a lot in my own application.

Just to show the different a little CSS styling can do, below is a recent screenshot of EstiMate, the JavaFX project I have been working on.  It's come a long way!  You can take a look at the CSS here.


Jonathan Giles said...

Very nice. Please contact me:

Alan Beebe said...

Afternoon from sunny Essex, Till!

Just a couple of suggestions for you: I think you might want a bit more space around your titlebars - they look a bit 'full' to me - and, to go with your gentle grey theme, how about taking the edge off your text-boxes and -fields by making them a light, light grey? I don't get the difference between 'Titled Pane' (presumably '... 3'?!) and 'Titled Pane 4'.

Oh, and congrats on being able to drive! No more buses, eh?

Andy Till said...


I've increased the size of the title pane which looks pretty good. Not committed it yet, I want to play around with the padding in the other controls. The combo box height for example has been set by the GUI layout tool ant not the CSS.

Not sure about a very light grey background for text areas. There is an eclipse theme here that does the same and I don't think it looks good. Do you have a better example in mind?

Just need to buy one of those drivey things now and and my busing days are over.