Use of CSS for formatting - problem

[Deleted114 (Deleted User)]

Hello Guys,

I’m facing a serious problem. I need to change some appearance in my vaadin application with CSS.

I’m trying to follow the steps shown here:

https://vaadin.com/book/-/page/themes.creating.html
https://vaadin.com/forum/-/message_boards/view_message/47990

But I am encountering a weird situation.
Is it normal that I had neither a “themes” folder nor a “reindeer” folder?

As I entered some icon-graphics for my application I had to create this empty folders for showing them in my application. Still I think the reindeer theme is working (although I cannot understand why, since my theme folder is empty???), because until now I had no problem in working with my application layout.

I have now created a new folder: “WebContent\VAADIN\themes\mytheme” and a “style.css” in it with simple

@import "../reindeer/styles.css";

which should, as far as I understand it at the moment, simple import the reindeer style.css, (although I didnt even have this folder a while ago and it worked … )

But okay, this isn’t working. When I now start my application every layout/design/theme-thing is gone and on my console is written:

Mrz 02, 2012 10:20:16 PM com.vaadin.terminal.gwt.server.AbstractApplicationServlet serveStaticResourcesInVAADIN
Information: Requested resource [VAADIN/themes/mytheme/styles.css]
 not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
Mrz 02, 2012 10:20:21 PM com.vaadin.terminal.gwt.server.AbstractApplicationServlet serveStaticResourcesInVAADIN
Information: Requested resource [VAADIN/themes/mytheme/logo.png]
 not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.
Mrz 02, 2012 10:20:21 PM com.vaadin.terminal.gwt.server.AbstractApplicationServlet serveStaticResourcesInVAADIN
Information: Requested resource [VAADIN/themes/mytheme/styles.css]
 not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

I tried adding the reindeer style.css into my self-made reindeer folder (from here: http://dev.vaadin.com/browser/svn/versions/6.0/WebContent/VAADIN/themes/reindeer/styles.css?rev=8442) but it doesnt work. The same error message appears again.

Can you please help me? I guess this is of course a beginner question and I’m sorry about asking it, but I dont understand anymore what to do. Maybe a simple guide line (step by step) what I should do now would help me a lot.

Thanks a lot for your help (Having a deadline on thursday, i need this badly)![

[Deleted114 (Deleted User)]

@Risto Yrjänä

Hi.
http://vaadin.com/book/-/page/themes.html
has a good picture about this. Then:

1. Create the directory “MyProject/WebContent/VAADIN/themes/mytheme”
2. Create the file “styles.css” in the directory created above
3. In your styles.css file import a default theme. For example to import the reindeer theme, write @import "../reindeer/styles.css"; With this you can leverage from the ready made theme, and don’t have to do everything yourself.
   4)Use setTheme(“mytheme”) in your application

You can find lots of good CSS tutorials by just googling, for example
W3Schools

When I do this steps all my layout is simple gone with the error messages shown in my post before, please help me,
I dont know what to do

[jean-francois.lamy (Jean-François Lamy)]

Are you using Eclipse and its built-in support for running on a Server ? The WebContent part is specific to Eclipse and its Web support (WTP).

The VAADIN folder needs to be immediately NEXT to your WEB-INF folder in the deployed application. You need to know that the files in your develpment environment are not, usually, the ones that actually are used to run your application. Many development environments assemble the various pieces and COPY them to the web server (this is called application deployment).

So you need to find where your application is actually running, and check that AT THAT LOCATION, there are the WEB-INF and VAADIN folders side-by-side, at the top-level of your application.

[jean-francois.lamy (Jean-François Lamy)]

If you want to see an example of web application content, you may look at
this example
. The example actually shows two themes side-by-side.

If look in there in there, you will notice that this is just one piece of the puzzle – it contains no Java code. When assembling the application, the development environment will add the classes and libraries under WEB-INF/classes and WEB-INF/lib, and it is the combination of the web content and of the executable code that constitutes a working app.

[Deleted114 (Deleted User)]

@Jean-François Lamy

If you want to see an example of web application content, you may look at
This example
. The example actually shows two themes side-by-side.

If look in there in there, you will notice that this is just one piece of the puzzle – it contains no Java code. When assembling the application, the development environment will add the classes and libraries under WEB-INF/classes and WEB-INF/lib, and it is the combination of the web content and of the executable code that constitutes a working app.

Thanks a lot for your answer!

I’ve just solved my problem. I found out that I can generate a new theme using the eclipse plugin (File → New → Other) and it generates me a style.css with a theme and adds a
correct
import:

@import url(../reindeer/styles.css);

I dont know why the “url” is missing in the vaadin book … that was the reason all designs were gone as I tried to create my own theme for my tasks beside.

Now it imports the default-design correctly into my application. Lets hope I can now fix my other problems ony my todo list

[Marko1 (Marko Grönroos)]

As far as I know, the book should be correct about the @import notation.

CSS 2 spec says:

The following lines are equivalent in meaning and illustrate both ‘@import’ syntaxes (one with “url()” and one with a bare string):

@import “mystyle.css”;
@import url(“mystyle.css”);

I hope there isn’t any browser incompatibility or change in some newer CSS version.

[Lucas14 (Lucas Genzelis)]

Just in case I’m not the only one developing in Netbeans, here it is explained how to create a custom theme there: http://netbeans.org/kb/docs/web/quickstart-webapps-vaadin.html#custom-theme. It took me a while to find it… I hope it’ll be useful for someone else.

[Jouni1 (Jouni Koivuviita)]

Marko: both versions of the syntax are valid, nothings changed and all current browsers support both of them.