How to change style for Calendar addon?

Flow
1

Hi,

How can I change an style of the Calendar addon?
I have already changed some styles of the application theme (using runo theme), and have tried to use the style names defined in calendar.css file to define new styles for calendar addon. For instance, I have tried to change the header background color of calendar addon:

on calendar.css:
/* Header bar */
.v-calendar {
background-color: #fff;
}

on my styles.css
.v-calendar {
background-color: #cccccc;
}

What should I do?

2

Sorry for the late reply, have you already resolved your issue? I’ll respond in case someone else encounters the same problem…

So you have created your own theme, imported one of the built-in themes and now you want to override some default add-on CSS values. In many cases, the CSS you specify should be more “specific” than the default CSS, like described
here
 :). So for example when overriding the described Calendar value, you could do something like

.myAppStyleName .v-calendar {
background-color: #cccccc;
}
3

Hmmm… I have tried as you suggested but it didn’t work. See what I’m doing:

  1. On MyApplication class I have defined the new theme:
    setTheme(“mystyle”);

  2. The folder “mystyle” was created under WebContent/VAADIN/themes:
    WebContent/VAADIN/themes/mystyle

  3. The file styles.css was created and put under that folder.

  4. I wrote the relevant definitions on styles.css:

@import url(…/runo/styles.css);
…

.mystyle .v-calendar {
background-color: #ccc;
}

Any idea about my mistake?

Thanks!

4

Hello again,

I just repeated same procedure with new calendar addon 1.0 and it WORKED :lol:

Thanks!