I am finding as I research themes that the example in the Book of Vaadin is incomplete. There are numerous posts related to the fact that custom themes sometimes work for some and sometimes don’t work for others.
I have replicated the examples in the book and in the MobileMail and Vornitologist applications and I STILL cannot get my theme to work properly, much less consistently. I’ve also noticed that the Mail and Vornitologist styling and themes do not work as expected either and my team and I are running into similar drawing/painting error as seen on the MobileMail and Bird applications. Often when navigating to a previous view, the panels are off by about 40 or so pixels left of the browser window.
I’ve been reading that one should use Firebug, but we are developing in TouchKit, which is WebKit based. Is there anyone who can provide a working tutorial or best practices document for this? I’d be happy to do it myself if I understood how things worked.
I extend the base theme using import statements. I set my custom theme using setTheme(“myTheme”). I’ve done everything that I can find and I get the folowing results:
If a customization from my theme works, there is no guarantee that anyone else on my team will get the same result, using the same browser, with the same source code. In fact, I cannot guarantee that my customization will work if I reload the application.
If I extract the base theme and drop it into my themes folder and extend it, I get errors complaining that the base theme does not exist.
If I just extend the base theme without extracting the theme from the jar, I get errors complaining that the base theme doesn’t exist.
I see a change I’ve made, but when I refresh the browser or reload the application, the changes are gone - or the changes won’t appear until 6-7 refreshes / reloads.
Is there a CONSISTENT way to get themes to work in TouchKit? Or is it so new that we’re all kind of debugging it together?
I want to style my program, but the inconsistencies are too much to make any sense of this.
Is there a standard browser we should be using, or an appropriate description as to how to make a theme behave consistently? We are a month into a project and after paying for TouchKit - we’re a bit nervous that we made the wrong decision. Are we the only ones using TouchKit?
I cannot answer specifically for Touchkit but some general CSS tips.
Webkit doesn’t have firebug, but it has “Web inspector” built in. Usually just right click on the page and click “inspect”.
CSS files are being cached by browsers, so even if you make changes your browser might still be using the old version from the cache.
Same for your colleagues who are seeing the cached version and not the updated one.
To go around it, clear the browser cache and then refresh the page.
There are addons for CSS development for most browsers (to clear the cache automatically or even apply the new CSS without reloading the page), with a quick search you should be able to find something that suit your needs.
By looking at the css, it seems like the touchkit base theme name is “touch”, you can try using this but it is just a guess.
Thank you for your input Mathias. Yes, I use the WebInspector instead of Firebug because we are trying to develop for TouchKit. I’ve a bit of experience with css and have used it in numerous projects and understand browser caching, etc. I use private browsing and multiple browsers, and clear the cache often. I’m not sure what to do or where to go from here.
Looking at the webInspector, my custom styles.css is not in the Elements window. It just evaporates.
I move on to something else and about 20 minutes later, for no apparent reason - the style change appears. And then 10 minutes later ( without editing the stylesheet again ) the style change is gone. When the Elements window of WebInspector does show the .css file I customize, the style doesn’t appear. And sometimes when the WebInspector happens to see the .css file, the style doesn’t. I’m just looking for a ‘best practices’ way of changing styles in this environment. It’s a bit unfortunate to have to repackage and compile a widgetset over and over and over to no avail.
Haha! I’m sure it’s something simple and I’m just missing it. We’re just having a lot of trouble getting consistency from one launch to another. Again - we are clearing browser caches each and every time we reload, but that isn’t something I’ve had to do over and over and over. In all other experience with css, I’ve always been able to see the page refresh with the new styles immediately.
Yes. I always get the …touch/styles.css not found error. I can’t seem to find the actual touch theme. I don’t understand why the error doesn’t occur when I extend base/styles.css.
From web inspector, is the path to style.css file in the header correct ?
If you click on it, does it open the updated version ? some previous one ? an error ?
Maybe it can spark an idea if you could post your web.xml content, the exact @import rule from your CSS and maybe the content of the
Mathias, thank you so very much. It really was something simple.
My web.xml servlet class was the issue. I had migrated from TouchKit 1.0 and my servlet was still accessing the Application Servelet instead of the TouchKitApplicationServlet. Of all the things…
Anyway - thank you again. You got me over the hurdle.
Should we ever meet - beer, lunch → whatever. It’ll be on me.
