Modal notifications

Hi there,

I was looking to see if vaadin
notifications
can be displayed as a
modal window
(in appearance). What we would like to do is dimm the background such that the notifications stand out.
Is this possible?

Hi,

Yeah, it can be done using CSS. But it requires quite a lot of tinkering. Here’s how you get started:

Stretch the main element to 100% x 100%


.v-Notification-[error|warning|tray]
 {
   top: 0 !important;
   left: 0 !important;
   width: 100%;
   height: 100%;
   max-width: none;
   border: none;
   padding: 0;
   background: #777; /* Or whatever you wish the modality curtain color to be */
   text-align: center; /* For IE */
}

.v-Notification-[error|warning|tray]
 .popupContent {
   text-align: left;
   max-width: 85%;
   margin: 0 auto;
   position: relative;
   top: 40%; /* Approximately in the middle */
   background: red; /* Depending on the notification type, choose an appropriate color */
   padding: 1em;
   /* Add whatever styles you wish here: border, border-radius, color, background etc. */
}

Hi,

I have an error on applying Notification Style.
Notification Background color
red
is presented correctly. but the font color white is not seted.
Its showing default color of Blue.

How to change the font color and size?
My code is :
[color=#0000FF]
.v-Notification-NotifyError
{
font-size:10px !important;
color : #fff !important;
background: #FF0000;
font-family:“source-sans-pro” !important;

  }

[/color]

Help Me.!
28205.jpg