CODEWITHSUNDEEP
cssvaadin
Amira
Amira

Reputation: 3280

Vaadin Theme changes

I have custom theme for my VAADIN application in /kopiMapReportGeneration/WebContent/VAADIN/themes i want to change progress idicator in style.css :

.v-loading-indicator, .v-loading-indicator-delay, .v-loading-indicator-wait {
   width: 100%;
   height: 100%;
   margin: 0;
   background-position: 50%;
   background-image: url("../customThemes/img/progress.gif");
   background-color: gray;
   opacity: .8;
   -ms-filter: alpha(opacity=80);
   filter: alpha(opacity=80);
   background-repeat: no-repeat; 
   background-attachment: fixed; 
}

Here's the image path /WebContent/VAADIN/themes/customThemes/img/progress.gif The problem is that the css changes is not taken into consideration.

Upvotes: 0

Views: 3917

Answers (1)

Milan Baran
Milan Baran

Reputation: 4232

I have some points:

  1. style.css is cached so after any change to your css you should clear your browser cache to get fresh style.css resource.
  2. your application and main window should have setTheme("customThemes");
  3. background-image: url("img/progress.gif"); is sufficient, but background-image: url("../customThemes/img/progress.gif"); should work too.

Fixing:

  1. via Inspect element searach your html page for <link rel="stylesheet" type="text/css" href="/context-if-any/VAADIN/themes/customThemes/styles.css"> in HEAD element. It should be there.
  2. visit the css resource and make sure it is up to date and it is not cached
  3. make sure that your /context-if-any/VAADIN/themes/customThemes/img/progress.gif resource is accessible via web browser

Conlusion:

If fixing 1 have linked other theme. -> experiment with setTheme() method in your appplication

If fixing 2 have cached css resource. Hit ctrl + F5 to hard refresh or clear your browser cache.

If fixing 3 goes wrong, your custom theme is not available. Make sure you are packaging your resources into final war.

Upvotes: 4

Related Questions