Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
extending Valo - no luck
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?
Its hard to guess without looking at your code /css. however, sometimes "!important" keyword helps.
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?
*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?
Better just do it with SCSS like shown in the documentation: https://vaadin.com/book/-/page/themes.valo.html
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...