Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Css into CustomLayout
Hi, i have a layout.html in the layouts folder of runo theme.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyBusiness - Home</title>
<link rel="stylesheet" type="text/css" href="/layouts/mystyle2.css" />
<li class="current"><a href="index.html">Home</a></li>
<li><a href="#">Our Services</a></li>
<li><a href="#">Pricing Plans</a></li>
The problem is that the application doesn't apply the specific css for the layout.html but it inherits the main css (style.css of runo theme)?
How i do ? Thank's
what we usually do is extending a default Vaadin theme with an own one. You can create such a theme with the Vaadin Eclipse Plugin and then add your custom css in the styles.css within your custom theme.
The approache that Martin do is fine, the solution is to implement your own Theme and put it into WebContent/VAADIN/themes/<your_theme_name>/your_style.css, you can see full documentation in the Chapter 8, Themes of the Book of Vaadin.
Ok, thank's. I was hoping to import the files directly into html css custom layout. Hi !
Fabrizio Attanasio: Ok, thank's. I was hoping to import the files directly into html css custom layout. Hi !
Hi Fabrizio, Have you found an answer? Because I couldn't load CSS in theme folder our css are dynamically generated into different folders.
One way to get around this would be to dynamically inject CSS on the page - not in the CustomLayout but using Page.getCurrent().getStyles().add(...). It doesn't inject files but a CSS string.
As always, remember that CSS applies to the whole page and CustomLayout doesn't isolate its contents in an iframe, so you should make your CSS specific enough.
If you need isolation, use a BrowserFrame instead - then e.g. CSS imports work but the content is not a part of the application and cannot contain components of the main application etc.
Is there any tutorial in the web talking in more details about it? I could not find any and the Book of Vaadin is very superficial on that stuff.
This is exactly the way I want to use Vaadin, too.
Layouting and styling the application with HTML + CSS and then using CustomLayout to "connect" Vaadin with it.
I've got a working HTML template and CSS files that just work in the browser.
I have no idea how to "port" this to Vaadin. Any help? :)
Please suggest the way/tutorial which provided layout and styling of application using Html and CSS created by web designer. Our purpose here is to build RWD design using Vaasing Custom Layout and HTML5. Please suggest?
I tried to describe what I did in this post: https://vaadin.com/forum#!/thread/5202602
Please see if it helps. I hope it does!