grid header element font size

Flow
1

Hello,

how can i increase the font size of the header?

https://demo.vaadin.com/valo-theme/#!tables

Regards
Stefan

2

Hi,

you can use something like this in your theme:
th.v-grid-cell { font-size: 20px }

-Olli

3

Can you show me how to do it for the spring bakeryapp?

I tried different places, but no matter where i want to change the font size in the end it still is the same small size.

Thx!

4

Just place the above snippet inside the @mixin apptheme { /* */ } after the @includes and it should work fine. Make sure you refresh the cache in your browser when you reload the app.

-Olli

5

Hello Olli,

sadly it did not work. Is there something i do wrong? Please have a look at the
attachments.
17089199.png
17089202.png

6

Hello Olli,

now it works. I got the css class selektor wrong in the first try.

So the apptheme.scss file is the correct place to make small adjustments to the style?

Which files should i change if i want different colours/a change that effects all elements of the gui?

Best Regards
Stefan
17089219.png
17089222.png

7

Do you have a compiled styles.css in your theme folder? If so, delete it and try again.

-Olli

8

Typically, if you want to change common colors and such, you should use theme variables for that. You can also adjust individual components by their own class names (like .v-button ). You should take a look at the docs: https://vaadin.com/docs/v8/framework/themes/themes-valo.html

-Olli