Css into CustomLayout

Vaadin 6 / 7 / 8 Framework UI
1

Hi, i have a layout.html in the layouts folder of runo theme.

MyBusiness - Home [color=#fc0202] [/color]

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

2

Hi Fabrizio,

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.

Cheers,
Martin

3

Hi Fabrizio,

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
.

Cheers,

Javi.

4

Ok, thank’s. I was hoping to import the files directly into html css custom layout. Hi !

5

Hi Fabrizio, Have you found an answer? Because I couldn’t load CSS in theme folder our css are dynamically generated into different folders.

6

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.

7

Hey guys,

Suppose I am working with a designer and he produces a mix of HTML + CSS rules + Javascript code (this last for a few validations in some pages, which I can discard if it can bring any conflict to the Vaadin app).

I would like to use all this stuff and implement the logic over some of the components. I could not find a way of putting it to work. I put everything under

mytheme/layouts

, changed the locations in the HTML files to reflect the current path for CSS and Javascript, re-compiled the code and it does not take effect. I see the HTML, but without any decoration. Neither Vaadin default theme nor the rules in the custom CSS. And no logic too. I used CustomLayout in the UI to load the HTML, but the CSS part does not work.

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.

Thanks,
Pedro

8

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? :slight_smile:

Thanks!!

9

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?

Regards
Jyoti Yadav

10

Hey guys,
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!

Regards,
Pedro