Dashboard theme ?

would it be possible to get the dashboard theme ? it looks really nicer than the others, more modern.



Check the latest comments from the blog post about the Dashboard demo:

So we’re going to publish the source pretty soon. I plan to write the first part of the blog series at the same time, so check the blog to know when it’s available.

Do note that the theme is not a complete Vaadin theme, it lacks many of the built-in components, such as DateField, Tree, MenuBar, TreeTable, SplitPanel, Panel, ProgressIndicator and Slider.


The source is now available in GitHub:

The blog post is still on hold, but it’s coming sooner or later.

Also, if you have further questions about the source code, let’s continue that discussion in another thread:
QuickTickets Demo Source


I like the new Dashboard theme, but I have problem with PopupDateField component. The calender icon dosen’t show in this component. How can I solve this problem?



That component hasn’t been themed in the Dashboard because it wasn’t needed in the demo.

To add an icon yourself, use the .v-datefield-button selector and set a background image for it using CSS.

Dear Juoni!

Great! Thank you!!!

Best regards

Hi Jouni!!
We are doing the product in vaadin 6. After launched our great vaadin 7 , we migrated the product from vaadin 6 to vaadin 7. its awesome to working in vaadin 7, except few bugs.

  1. Text field error indicator in not shown in dashboard theme.
  2. Notification.TYPE_ERROR_MESSAGE indicator not shown in Red color in dashboard theme.

please i need the solution for both. could you plese help me sort out of this???
i am expecting informative reply from you guys!!!


The dashboard theme is by no means a full blown/complete general purpose theme, it only includes the parts that were necessary for the actual demo. So you should expect a lot of stuff missing from it. The error indicator and error notifications are probably just a few of the issue there currently are.

You should take a look at the DOM structure and CSS class names on the elements and write additional CSS on top of the dashboard theme to get the stuff you need to work.

The particular things you’ve mentioned are .v-errorindicator and .v-Notification-error, if I remember correctly.

Hi Jouni Koivuviita , as you said there are a lot of components which havent been themed in dashboard, is it possible to use default theme for that components? What should be done to do so ? For example for component DateField. Thanks in advance.

Could you paste the .v-datefield-button theme that you devel to resolve the problem?


It was two years ago, but I think this was it:

.v-datefield-button {
background: url(“…/icons/calendar.png”) no-repeat scroll 0 0 transparent;
background-position: center;
width: 26px;
height: 26px;
@include border-radius(.25em);

    border: .1em solid #b3b4b5;
    border-top-color: #d4d4d6;
    border-bottom-color: #989b9c;

Thanks for the answer, but I’m still having problems, I attach the screen capture with the popupdatefield, the name is “Fecha llegada”, you could see that the icon not appered, this problem we could resolve with a correct icon, but you see that’s look very bad, could you help me something more?,

Best regards.

I’'ll resolve more and less some them theme issues with the popupdatefield and textfield in this dashboard theme demo, fighting withh scss, so thanks for the help.

Context menu is gone in the demo, right click does not do anything. How do I update the LayoutClickListener to allow context menu?

Hi Ryan,

The context menu for the Table opens correctly for me in OS X Safari at least (in
). Can you provide more specifics?

Hello Jouni,

Sorry, what I mean is in the DashboardLayout (Home view), I can’t right click to show up browser’s context menu. I think this is block up by the layoutClickListener (for closing notification’s window). How do I fix the layoutClickListener to unblock this?

Hello Jouni,

at the moment I try to integrate grid into a application based upon the quick-tickets-dashboard source. I
didn’t manage it do integrate the grid. As you can see in the sample pictures, grid allways looks damaged.
Also when trying it with the adressbook sample it ist not working.
21139.pdf (1.79 MB)

The reason is here:


The “grid” is removed from the styles completely (to reduce the file size).

You can add it back with the following SCSS. Add that after you import Valo and Dashboard:

$v-included-components: join(grid, $v-included-components);

Not sure if there’s anything you can do on the server side, I think this needs modifications to the client side code which handles layout click listeners.