Set a style/theme to a modal window...

Vaadin 6 / 7 / 8 Framework UI
1

Hi all,

I have a login component which is embedded inside a modal window. (pls see the attached image).
I have set the style for the login component as login.setStyleName("body-style"); 

.body-style {
	background-color: #E1BC96;
}

My problem is that I’m unable to set a style (or a theme) to the modal window which carries the login component.
I tried the following CSS fragment & no luck so far.

myModalWindow.setStyleName("windowstyle");
.v-window-windowstyle .v-window-header{
	background: #E1BC96;
}

Any suggestions…??
Thanks in advance.
Cheers,
Asela.
11598.png

2

Mmm, don’t know what your problem is there. You probably want to set the background for the entire header, which has style “v-window-outerheader”.

One common source of problems with CSS rules not working is that the rules do not override the base theme because the base theme has too specific CSS rules. Try adding more specificity to your CSS rules, such as “.v-app” as the first specifier.

This seems to work:

/* Yellow window header */
.v-window-yellowsub .v-window-outerheader {
  background: yellow;
}

/* Blue window caption text */
.v-window-yellowsub .v-window-header {
  color: blue;
}

/* Pale yellow window contents */
.v-window-yellowsub .v-window-contents {
  background: #ffffc0; /* Pale yellow */
}

/* Close button */
.v-window-yellowsub .v-window-closebox {
  background: url('img/checkbox-checked.png');
}

See the
on-line example
.