Is there a way to change the overall font size in my application that doesn’t involve looking up every single component css class and trying to override it? (Something that I haven’t been able to do for font sizes for some reason, but I have, for instance, been able to disable resizing on my textareas. Changing the font size doesn’t seem to have any effect on my components)
You can define the font size in the top-level element and it will be inherited by all lower-level elements.
Basicly:
.v-app {font-size: 42px}or using your theme name:
.v-theme-mytheme {font-size: 42px}IE6&7 don’t support the “inherit” value for CSS properties, so specifying the font size only for the .v-app element isn’t enough.
You can copy the needed selectors from the Reindeer theme:
From:
http://dev.vaadin.com/browser/versions/6.7/WebContent/VAADIN/themes/reindeer/common/common.css
/* Global font styles */
.v-app,
.v-window,
.v-popupview-popup,
.v-tooltip,
.v-app input,
.v-app select,
.v-app button,
.v-app textarea,
.v-window input,
.v-window select,
.v-window button,
.v-window textarea,
.v-popupview-popup input,
.v-popupview-popup select,
.v-popupview-popup button,
.v-popupview-popup textarea,
.v-filterselect-suggestpopup,
.v-datefield-popup,
.v-contextmenu,
.v-Notification,
.v-menubar-submenu,
.v-drag-element,
.v-table-header-drag {
}