CODEWITHSUNDEEP
javacssvaadin
abden003
abden003

Reputation: 1335

Styling in Vaadin with css

I am trying to edit the Text of the textfield in Vaadin. I created a file (\WebContent\VAADIN\themes\loginthemes\style.css) with ONLY the following information:

textstyle      {  
   font-family: HelveticaRounded; 
   font-size: 40px;
   font-style: bold;
}

And inside my java file I have the following:

TextField username = new TextField("Username: ");
username.setStyleName("style");
// I also tried username.setStyleName("loginthemes");

The text for the textfield stays the same.

Upvotes: 0

Views: 5964

Answers (2)

Serge Farny
Serge Farny

Reputation: 932

As Jan Galinski said, you should define a proper theme. For one named "logintheme" you should create VAADIN/theme/logintheme/style.scss as :

@import "../reindeer/reindeer.scss";
.logintheme {
    @include reindeer;

    .textstyle {  
        font-family: HelveticaRounded; 
        font-size: 40px;
        font-style: bold;
    }
}

Tell the UI to use it: 

@Theme("logintheme")
    public class MyUI extends UI {
}

Also, your usage of setStyleName() is incorrect: the parameter is the name of your CSS class, not the name of the theme. So in your case, it should be:

TextField username = new TextField("Username: ");
username.setStyleName("textstyle");

Upvotes: 5

Jan Galinski
Jan Galinski

Reputation: 11993

You must specify the theme on your UI class.

@Theme("logintheme")
public class MyUI extends UI {
}

also, you should reference an existing theme via @import, else your theme will look very "reduced".

Upvotes: 1

Related Questions