Vaadin System Messages style

General
1

Hi :slight_smile:

I’ve been working for some months with Vaadin and I really like it.
One thing I couldn’t google is, that I’d like to change the style who system messages are shown (Out of Sync etc…)

I’m already using SystemMessages for translation but I dont like the BIG RED notification - the users might think that they got a virus or something :smiley:

It there a way to change the client-side presentation of those messages?

2

You should be able to change it a lot with just CSS. The red error box has a “v-Notification-system” overall style and “popupContent” in the element inside that. You can use FireBug to see it.

The position seems to be set explicitly for the element, so you probably can’t change that with CSS, but you can change the color at least.

3

Thanks for your reply :slight_smile:

I’ll try to change the CSS

4

I made the required changes but when I run the application I do not see any difference in the notification. I am using getWindow.showNotification(); and the type is Notification.TYPE_ERROR_MESSAGE. I am always getting red background when ever I make the change.
Not sure if I am missing something. I made change to ".v-Notification-system " , “.v-Notification-error” and “.v-Notification”. Still no difference. Any help would be appreciated.

5

I just tried with this css :


div.v-Notification-system{
	background-color: #0A0AFF;
}

And the error message shows up in blue.

If you use only .v-Notification-system as selector, your custom style will be overriden by vaadin.