extending Valo - no luck

Vaadin 6 / 7 / 8
1

folks,
i try to extend/modify the valo-theme. when i mark my code with @Theme(“valo”) i can see valo@work.
i put some modifications to grid-column-headers into my own style.css, include a local valostyle.css in the beginning of the file and use @Theme("mytheme) - just the usual way.
i can see my changes (only those - no valo in sight…) and i can see in firefox inspector., that my css and the included
valostyle.css are actually loaded - but the valo-definitions seem to be completely ignored.
is there anything else going on behind the scene during initialisation?

2

Its hard to guess without looking at your code /css. however, sometimes “!important” keyword helps.

3

i grabbed the style.css from valo-folder with the help of firefox-inspector. i saved in in mytheme-folder. And i put @Theme(“mytheme”) as i do when i want to have mytheme @work. I put a comment into the ex-valo style.css.
(My own previous style.css with my intended modifications/extensions for valo is completely out of the game)

then i run the app and it shows no theme - at least nothing like valo.
i can see in firefox-inspector that my modifed (the stolen valo-style.css with my comment) is actually loaded.

i noticed that the request was for ‘http://localhost:8088/VAADIN/themes/mytheme/styles.css?v=7.5.10’ - can the client detect that it didnt receive the exact requested version?

4

some more progress and insight:
while using the stolen valo-styles.css, i noticed the .valo - prefix on all the rules. i removed some and then those rules became ‘active’ - i removed all and i got something much like valo under the flag ‘mytheme’. ok, i thought, riddle sovled: i take another unmodified styles.css from valo-folder, name it ‘valostyles.css’, put it in my folder, put my own ‘styles.css’ beside it, include the ‘valostyles.css’, put a .valo in front of my own css-rules and then ?
no luck again - it doesnt seem to work, because the active theme is not ‘valo’, but ‘mytheme’, and then the prefixes are not working.
now i am quite sure, that i can proceed for a while by:

  • taking a styles.css from valo
  • remove all .valo prefixes in there
  • put that into mythemes-folder as valostyles.css and include it in my own styles.css

is that the way to extend an existing theme ? i can’t belive that. Shall/must i use the sass-compiler?

5

Better just do it with SCSS like shown in the documentation: https://vaadin.com/book/-/page/themes.valo.html

6

i got it done - mostly…

  • i followed the section in vaadin-book about themes and valo
  • it helped A LOT when i switched on the saas-plugin in my IntelliJ - IDE

The important lines in mytheme/styles.scss

@import “…/valo/styles.scss”;
@include valo;

after that my own rules without any special prefix - it’s
almost
 easy when you know how it’s done…