Own theme doesn't work, problem SOLVED!

Hi!

Arghhhh. I tried to follow every instructions, but I can’t do it. I unzipped the chameleon.jar to my VAADIN folder. Yes it’s working, but when I am trying to make my own theme what imports Chameleon, nothing works. I am just trying to make a small change like that (VAADIN/themes/mytheme/styles.css):

@CHARSET “UTF-8”;
@import "…/chameleon/styles.css <----------CORRECT, NOT AT ALL "; was missing

/* Set the amount of horizontal cell spacing in a

  • specific element with the “-ComboBoxInit” style. */
    .v-horizontallayout-ComboBoxInit .v-horizontallayout-spacing-on {
    padding-left: 20px;
    }

After that I set setTheme(“mytheme”) and nothing is working anymore, no styles at all? Should I copy the whole css to my VAADIN/themes/mytheme/styles.css or what is the problem? I thought that importing is like extending…OR is there easier solution to just make more space between components in Horizontal layout? I just need a space between a couple of Combo boxes etc?

Thanks and cheers to Turku from UK!
11488.png

In which browser did you test this? You might’ve bumped into this issue:
#4580
.

Other than that, you have a few typos in the CSS you pasted in the message at least:

@import "../chameleon/styles.css

should be

@import "../chameleon/styles.css[b]
";
[/b]

Just recognized it :slight_smile: I am not familiar with css, so I was searching a bug from totally wrong place. Is there any validation for CSS-files , like plugin to Eclipse or so?

Another question:

I haven’t unpacked Runo and Reindeer jars to my VAADIN/themes folders. If I try to implement my own CSS-file and import like that:

@CHARSET “UTF-8”;
@import “…/runo/styles.css”;

/* Set the amount of horizontal cell spacing in a

  • specific element with the “-ComboBoxInit” style. */
    .v-horizontallayout-ComboBoxInit .v-horizontallayout-spacing-on {
    padding-left: 50px;
    }

It is not working or theme is working but my extenssion is not working. Should I unpack jars to themes folder or why it can’t extend runo-theme without unpacking? It is still in class path because the theme is working, so how can I import to runo-style?

Thanks again! This tool seems to be very good, it just takes time.
Sami

I would think so, but haven’t ever used one. The are plenty CSS validation tools available online, though.

There’s no need to unpack the themes from the JAR, they work from there too, as long as you’ve added the /VAADIN/ context to your web.xml mappings, so that all request that point to the VAADIN directory (inside which core themes and widgetsets reside).

Can’t see anything else really wrong in your CSS. Just make sure that it actually gets loaded in the browser, i.e. you see you styles.css file loaded for example in Firebug CSS panel.

hi again and kiitti for helping me!

I managed it, so those are now working fine, but I am so newbie with that stuff so I have always something :slight_smile: I am just hoping that I could code business logic already. So could you tell me what is the wisest way to handle basic www-page. I have already done one Vlayout, which includes HLayout and new Vlayout. In first Vertial layout I have 3 components and below that I have a “main area” where is everything else, basicly one Calendar. Is that clever at all or?

LIKE THAT:
V----V----V
VVVVVVV

Then I would like to add a border between first two “rows” and I tried it like that:

.v-verticallayout-ComboBoxInit .v-verticallayout-spacing-on {
border-bottom: 2px #000;

}

and in code something like this:
VerticalLayout layout = new VerticalLayout();
ComboBoxInit init = new ComboBoxInit();
layout.addComponent(init);
layout.addStyleName(“ComboBoxInit”);
layout.setSpacing(true);

and nothing happend?

The spacing CSS is only used to detect the width of the spacing, and that is done by using the padding values. No other properties are used from the spacing selector you have specified, and the selector itself is never actually placed in the live DOM.

You can just set the border to the layout, you don’t need the spacing for this.

So something like this:

.v-verticallayout-ComboBoxInit {
    border-bottom: 2px solid #000;
    }

You can use borders on layouts when they are not relatively sized (i.e. percentages), so you can’t have a layout that has left or right side borders and is 100% wide, or 100% high and top or bottom border.

Thanks!

So could you tell me your opinion about that layout? Is that wise at all or is there easier and wiser way to handle this?

VerticalLayout layout = new VerticalLayout();
	ComboBoxInit init = new ComboBoxInit();
	layout.addComponent(init);
	layout.addStyleName("ComboBoxInit");
	layout.setSpacing(true);
	
	
	VerticalLayout layout2 = new VerticalLayout();
	layout2.addStyleName("ComboBoxInit2");
	HorizontalLayout verBottomLayout = new HorizontalLayout();
	
	Calendar cal = new Calendar();
	verBottomLayout.addComponent(cal);
	layout2.addComponent(verBottomLayout);
	layout.addComponent(layout2);
	
	mainWindow.setContent(layout);