This is my first attempt at changing CSS in a Vaadin project. I am doing something wrong.
I have a theme called ‘pizza’ and in my application class I have:
setTheme(“pizza”);
and inI have a file: VAADIN/themes/pizza/styles.css
To which I added
logo = new Label();
logo.setStyleName("logostyle");
logo.setImmediate(false);
logo.setWidth("-1px");
logo.setHeight("-1px");
logo.setValue("title");
verticalLayout_1.addComponent(logo);
I think that should work but it doesn’t make any difference. The label is rendered in the default font.
Can anyone see the step(s) I missed?
Thanks
Unless I’m missing something, it looks like it should work like that. If you set the font-size you may also need to set the line-height property.
Too low specificity can sometimes cause CSS rules to be ignored. More specific rules override less specific ones and you may need to add a specifier in the rule to make it more specific. For example, use “.containingstyle .mycomponentstyle {…}” instead of just “.mycomponentstyle” and set the containing style name for a containing layout component. You could use “.v-app .mycomponentstyle” as well.
If you have problems with CSS styling, I really recommend using Firebug to see what’s going on. Just open the Firebug Panel, click the Inspect-button, click the element in the UI and you get the HTML and CSS styling for it. The Net tab shows what files are loaded so if there’s a missing CSS file or it loads a wrong one, you should see it there.
I found the problem, it was staring me in the face.
I’ve got so used to clicking ‘no’ when it asks me to recompile the widgets I do it automatically.
When I picked ‘yes’ the style sheet changes began to appear.
You are quite right that I need to expand the vertical size of the field, but at least is is showing up in red and big, proving the CSS is taking effect.