Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
extending Valo - no luck
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
after that my own rules without any special prefix - it's almost easy when you know how it's done...