I’m trying to inherit from a theme in Vaadin 7 beta 10 and it doesn’t load CSSs correctly.
13:30:04:173 Assuming CSS loading is not complete, postponing render phase. (.v-loading-indicator height == 0)
[...]
13:30:04:264 CSS files may have not loaded properly.
I’m using @Theme annotation in UI class
@Theme("testtheme")
public class MyVaadinUI extends UI {
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
and @import in VAADIN/themes/testtheme/styles.css
@import url(../runo/styles.css);
Is there something I’m missing? I’ve reproduced the issue with the vaadin-archetype-application 7.0.0.beta10 (see attached file).
I face the same problem, no way to mix my styles with any of the existing styles.
The root element of the generated page is referencing my theme
But since the theme styles are prefixed by the theme name it doesn’t apply to the page.
Forcing the parent theme (via firebug) is making the rendering ok.
Hm, I also inherited from reindeer and did’t add anything to my css file but reindeer import. And everything crashed. I tried legacy-styles.css and everything started working correctly. If now I change some css classes in my styles.css file, won’t be there any collisions between css and sass?
Hoping to add to the discussion… Not necessarily in a good way —
Here is a prototype of what I have tried to get working (7 beta 10 in Eclipse JUNO)
.scss:
@import "../reindeer/reindeer.scss";
@import "./<theme>-link/<theme>-link.scss";
@mixin <theme>{
/* Include all the styles from the reindeer theme */
@include reindeer;
@include <theme>-link;
}
If I remember correctly, using
.#{$primaryStyleName} instead of
.#{primaryStyleName} probably helps. If it doesn’t, please test with the latest beta and report if there are still problems.
When running the app, the background is NOT blue. Looking at the theme’s generated
styles.css file, you see plenty of different
.mytheme.v-app selectors, but none that include my background override.
Using Chrome’s developer tools, I set the following value manually:
.mytheme.v-app { color: blue; }
And Chrome showed the blue background.
It appears that the
.v-app style in
mytheme.scss is not being applied at all.
Actually, I’m not so sure that what I did is a recommended general purpose solution. It worked in my case because I’m writing a single app - but in a more-than-one-app-per-web-page scenario (e.g. portlets), I think this approach will cause problems since one in-page app could override something another in-page app expects.
But if going back to the previous technique, the
.v-app background color won’t change.
Is this a bug in Vaadin 7.0.0.rc2 then? Or am I missing something?
It seems to me that the old way of using themes is broken. I had to switch to using the SassCompiler in order to get mine to work properly, for the same reason that you’re having a problem (which is that the imported css styles are not added to the base div). If you compile your styles.css using the SassCompiler, it will import all of the reindeer styles and then replace “reindeer” with your theme name, essentially re-making reindeer with a new name (your name) plus adding in whatever styles you want.
To compile from .scss to .css, I created the following two files in my VAADIN/themes/mytheme directory: