custom CSS file

Flow
1

Is it possible to add custom CSS file to a built-in theme? For example, I am happy with runo theme but I just want to add “custom.css” to VAADIN folder and then set component styles from custom.css. Is it possible?

I understand that I can create a custom theme and import CSS file from other theme, but does that mean that there can be only one CSS file in vaadin app (styles.css)? Can I create more css files?

Thanks.

2

You can try chameleon theme if you’re tired of runo and reindeer :
Chameleon Them

I’m not really sure buy I think you can only have one theme running with your app. Or can always modify the currents themes.

3

Hi,

Yes, Vaadin currently links to a single CSS file, based on the theme name (from VAADIN/themes/theme-name/styles.css)

You can, of course, do imports - and clearly, you can do many imports.

So, the normal way to do what you seem to want to do is

VAADIN/themes/dario-theme/styles.css :

@import "../runo/styles.css";";
@import "custom.css";

VAADIN/themes/dario-theme/custom.css :
/* Your CSS customisation here */

I’m not sure what advantage putting all of your CSS into custom.css as opposed to styles.css gives you, but you can do it: we use multiple imports from styles.css to modularise the css e.g. table.css, screen-123.css

A recent post reminded me, if you need to support IE, you need to be cautious about the level of nesting of imports : IE can only nest three levels (e.g a.css imports b.css imports c.sss - you can’t go lower than c.css)

Cheers,

Charles

4

Good, I understand now.

Thanks for detailed explanation.

5

Thanks Charles, your explanation helps! :slight_smile:

6

Is it as well possible to import foreign css?
I want my vaadin application to look like the site it should be linked from (with some extras concerning vaadin components). But I don’t want to rollout my application whenever the main (= foreign) css changes.
So I need something like

@import "www.somesite.com/a/b/css/general.css";
7

I believe this should be possible for importing CSS files (not SCSS which would need to be compiled). Just don’t forget the “http://” part in your CSS URLs.

8

hey guys,

thanks for the postings here so far.
I don’t know why, but if I add some css file to import in my styles.css file, it’s gets always new compiled after I start with Maven the server. So the import is then gone.

Any suggestions for it? I tried a lot to do the css-import directly in the scss-files…but no success.
Only if I put direct the CSS-Code in the mytheme.scss-File it works. But this is a bit shitty way I guess.

Any recommendation for me?

Thanks a lot :slight_smile:
​Ben

9

When theme compilation is attached to the Maven build lifecycle in your POM, the styles.css file should get rewritten by a newly compiled version from styles.scss whenever there are changes to the theme.

You should add the CSS import in your styles.scss and let that be compiles to styles.css. Try putting it right at the top of the file, as CSS imports cannot be done in certain contexts (such as inside nested rules or after certain directives). If it doesn’t work, what is the result? Does the theme compilation fail, or succeed but leave out the import, or the import is in the CSS file but doesn’t work?