imbecile and basic ask about styles.css

Flow
1

Gentlemen gurus, please, forgive the imbecile ask:
but as I make to modify css?
Necessary to modify the style of textField. Somebody can teach to me step by step?
One I hug

2

Hi,

In order to get familiar with the topic rapidly you’d rather start with
themes
 chapter of the Book of Vaadin.

BR,
sasha

3

I would like a similar example on how to actually make a theme work. All examples so far are for the standard Vaadin application and I am using TouchKit. I have my theme directories in place ( VAADIN/themes/myTheme/… ), but nothing I do seems to change anything about the look and feel of my application. I can see the styles.css file by navigating to http://myApplication/VAADIN/themes/myTheme/styles.css via the browser, but in the WebInspector ( or Firebug ) it does not show the file anywhere. Is there any more clear explanation as to how to override the current theme, or how to make any changes to the standard theme?

I’ve tried multiple times and options to get ANY part of my application to be customized and nothing seems to work. Is there a difference between how touchkit works compared to the standard Vaadin projects?

Or do I need to repackage the jar without the standard theme and create my own? The themes chapter is a good explanation, but following the steps does not produce results.

4

Just to make sure, do you set the theme in your application class by saying:

setTheme("myTheme");
5

I do. I’ve done my best to follow the book, the tutorials, etc. It has to be something simple, I’m sure -

  1. MyApplication.java ( extends TouchKitApplication )
SessionHandler.initialize(this);
		setTheme("vig_theme");
		NavigationManager navMgr = new NavigationManager();
		navMgr.setCurrentComponent(new HomeView());
		getMainWindow().setContent(navMgr);
		System.err.println("BROWSER_DETAILS_READY.  Width=" + navMgr.getWidth());
  1. My VAADIN/themes/vig_theme directory
  • logo.jpg
  • styles.css
  1. styles.css - and here I’m a bit confused… What is the name of the theme for the TouchKit? Where do I get the zip file for the touch kit source to grab the theme? Whether I use the import statement or not ( I’ve tried with a standard vaadin project as well ) → Nothing gets read. Again, I can view the css file by navigating to AppName/VAADIN/themes/vig_theme/styles.css, but never in the Firebug/WebInspector windows. It just evaporates.
@import "../base/styles.css" 
.standard_background .v-csslayout {
       background-color: yellow;
}
  1. HomeView.java
…
          CssLayout layout = new CssLayout();
           layout.addStyleName("standard_background");
           ...

My program runs great. I just cannot seem to do anything that will make a change to the default styles. Viewing the WebInspector, I see the style names are written to the html. Just no changes to anything.

Once I make the changes, how many times to I have to clean, compile, package, and run the app to see the changes? ( I have previously added an image to one of the views and it would not show for about 6-7 builds - then all of the sudden the image appeared, as if out of nowhere. ) Is there a particular browser or cache setting or project setting in Eclipse or Netbeans to force an actual refresh?

6

Not necessarily a solution, but some things to test:

At least Chrome does seem to cache CSS etc. more aggressively than what the server tells it to. Try doing Ctrl-F5 (Chrome/Firefox) a few times, or test if opening the page in an incognito window (Ctrl-Shift-N) helps. If they help, the issue is probably with the browser cache.

Another possible culprit could be the integration of Tomcat in Eclipse - sometimes it also “holds onto” something. Try to see if stopping the server and cleaning the work directories of Tomcat (from the context menu on the server in Eclipse) helps.