I tried to customize the Valo Theme (7.4.0). Therefore, I wanted to create a custom theme. So I created the folder “darkvalo” under VAADIN/themes and created a styles.scss with the content from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples so my styles.scss looks like the following:
After building the application (via maven) the styles.css is generated correctly and everything seems fine. But when loading the application in the browser all styles are missing. The only thing that works, is that ResourceImages and favicon are loaded correctly. but no styles are added…
By using the developer tools in firefox/chrome i recognized that the browser finds the correct styles.css-file but somehow doesn’t load it as it says: “com.vaadin.client.ApplicationConnection SEVERE: CSS files may have not loaded properly.”
Does anyone have an idea of what’s going on there?
Did you try to clear the Browser Cache already? Sometimes the Browser keeps old CSS-Files alive and it provies a wrong rendering.
For me clearing the cache usually does the trick
thanks for your replies, but I didn’t get it running. Clearing the cache didn’t do the trick and I have the @Theme(“darkvalo”) - Annotation in my UI class.
Please check the css produced after your project is built. Are there sections that are commented out? You can also try adding in your web.xml:
<context-param>
<param-name>productionMode</param-name>
<param-value>false</param-value>
<description>Vaadin production mode</description>
</context-param>
Then skip the css generation in your maven build. Code above will enable sass compilation on the fly. We can check if your theme will work this way.
my problem is, that I don’t know .css styles so much, therefore and didn’t found successful recipe how to inherit my own style. Howewer, there is workaround how to influence on style Valo directly. This is only one and alone thing, which functioning for me. Because I wanded to change only two attributes in TextField style, it was the most easiest way.
https://vaadin.com/forum#!/thread/10331414
I just read your thread but it does look like it’s a completely different story…
The problem I’m having is more along the line of the original post by Marco: I can’t even see a single style from Valo in my page even though the styles.css is correctly generated (from styles.scss) AND correctly loaded by the browser…
If you have the similar issue as Marco - “com.vaadin.client.ApplicationConnection SEVERE: CSS files may have not loaded properly”, than you have the same problem. My solution in the thread 10331414 is about workaround.
Yes, I used 7.5.0 versin of Vaadin, and it works. My major problem was, that Maven and .pom file was badly configured for .scss compilation. To generate proper .pom in Eclipse for Lifearay is fundamental to create project as Maven → New Maven Project, add to calatog
http://repo1.maven.org/maven2/archetype-catalog.xml
...
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<encoding>UTF-8</encoding>
<source>1.8</source>
<target>1.8</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-resources-plugin</artifactId>
<version>2.6</version>
<configuration>
<encoding>UTF-8</encoding>
</configuration>
</plugin>
<!-- As we are doing "inplace" GWT compilation, ensure the widgetset -->
<!-- directory is cleaned properly -->
<plugin>
<artifactId>maven-clean-plugin</artifactId>
<version>2.4.1</version>
<configuration>
<filesets>
<fileset>
<directory>src/main/webapp/VAADIN/widgetsets</directory>
</fileset>
</filesets>
</configuration>
</plugin>
<plugin>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-maven-plugin</artifactId>
<version>${vaadin.plugin.version}</version>
<configuration>
<extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
<!-- <runTarget>mobilemail</runTarget> -->
<!-- We are doing "inplace" but into subdir VAADIN/widgetsets. This
way compatible with Vaadin eclipse plugin. -->
<webappDirectory>${basedir}/src/main/webapp/VAADIN/widgetsets
</webappDirectory>
<hostedWebapp>${basedir}/src/main/webapp/VAADIN/widgetsets
</hostedWebapp>
<!-- Most Vaadin apps don't need this stuff, guide that to target -->
<persistentunitcachedir>${project.build.directory}</persistentunitcachedir>
<deploy>${project.build.directory}/gwt-deploy</deploy>
<!-- Compile report is not typically needed either, saves hunreds of
MB disk -->
<compileReport>false</compileReport>
<noServer>true</noServer>
<!-- Remove draftCompile when project is ready -->
<draftCompile>false</draftCompile>
<style>OBF</style>
<strict>true</strict>
</configuration>
<executions>
<execution>
<configuration>
<!-- if you don't specify any modules, the plugin will find them -->
<!-- <modules> <module>com.deepam.vaadin.test.TestVaadin75.AppWidgetSet</module>
</modules> -->
</configuration>
<goals>
<goal>clean</goal>
<goal>resources</goal>
<goal>update-theme</goal>
<goal>update-widgetset</goal>
<goal>compile-theme</goal>
<goal>compile</goal>
</goals>
</execution>
</executions>
</plugin>
...
[/color]
[/url]
Another way how to create portlet is to begin create Liferay project - Liferaray → Liferay plugin project, but it fails. I suppose, that there are missing some libraries. I leave this way, because first solution works fine.
I seem to be having the same issue. I am using ItelliJ to setup my Vaadin project. Do i need to manually create a css file before running the application? None of the examples from ‘the book of Vaadin’ are working on my setup.
Hello Ryan. I have no experience with IntelliJ, I am using Eclipse. I must say, that find out proper way ‘how to’ is little research and it is changing from version to version. My suggestion is to try create .scss files manually and than try to compile them. If you use Maven, try to check, how your .pom looks like and what is missing. If .pom file is ready, compilation automatically creates desired .css files. If you will be not successful, than may be useful to install Eclipse (I know, it is tedious) and observe, how it works there. The receipt, how to begin is described in my previous Post [url=https://vaadin.com/forum#!/thread/9325564/10538647] https://vaadin.com/forum#!/thread/9325564/10538647[color=#696969]
.
Another way in Eclipse is, that the default theme is automatically added, when you after creating simple web project enable check box in project properties for Vaadin plugin for Eclipse and confirm default values. It generates another one portlet with samle of theme. Be aware, that
[/color]
[/url]it is sipmle samle with .ivy configuration files for demostratin of .scss files capabilities. Compilation is possible from Icon of listbox arrow near the wheels on the dashboard → Compile theme.