Chameleon Theme with VAADIN 7.0 Beta 11

Flow
1

Is the chameleon theme designer compatible with VAADIN 7.Beta 11 ?

By the way, the designer seems to be ‘out of order’ (HTTP error 404…)

2

Hi,

I haven’t tested, but I don’t see why the output from the editor wouldn’t work in Vaadin seven. You might need to use Sass to import the color scheme file just to bump up the selector priority, it depends on how you import the Vaadin theme (i.e. do you use legacy-styles.css or the new Sass way).

The editor is online, here:
http://demo.vaadin.com/chameleon-editor
. Maybe you checked some other URL?

3

url http://demo.vaadin.com/chameleon-editor. is ok, thanks !

But in fact I used the link on your demo page which doesn’t point to this URL, it is : http://demo.vaadin.com/chameleontheme …

4

Thanks for the heads-up, it’s fixed now!

5

I just downloaded a chameleon-theme from the editor to use it with Vaadin 7 Beta 11, and I had to change the import in styles.css from

@import "../chameleon/styles.css";
[/code] to [code]
@import "../chameleon/legacy-styles.css";

Is this the recommended way or am I doing someting wrong?

6

Seem like the right approach. The editor isn’t aware of Vaadin 7 in any way yet, so you have to make that adjustment manually.

7

I notice that using the following “works”

@import “…/chameleon/chameleon.scss”;

However, without reverting to the css method, I don’t really know what to do next.

I’m fairly new to scss, but if I get the idea then it would be nice to think that the base colours should be set by just overriding a few variables. Is this true, and if so, how are people using chameleon with Vaadin 7?

Thanks in advance.

8

Clearly I am missing something trying to use the Chameleon Theme designer.

I am using Vaadin 7.0.1 (actually just upgraded to 7.0.2) with the default Chameleon Theme as included in the theme jar. Everything is working fine. I thought I would try a modified theme using the theme designer. So to start with I selected one of the defaults (BLACK) – downloaded it, unizipped the zip and the jar and copied the single styles.css file to the correct location.

My app sees the new styles, but almost everything is complete wrong. Layouts don’t work the same, etc. The colors seem to be correct (black and blue mostly), the it is certainly not what I expect. I tried with the import changed to:

@import "../chameleon/legacy-styles.css";

and also

@import "../chameleon/chameleon.scss";

The result is always the same – the layouts don’t work. I am looking for suggestions.

9

Yep, it’s not pretty at the moment but I have got it working. However, I get a lot of complaints in the server logs about the scss not being correct.

I’ve created a folder under themes called “mytheme”. Under there I have “styles.scss” which contains the content of styles.css downloaded from the Chameleon Theme designer but in addition to that, at the top of the styles.scss I also have:

@import "mytheme.scss";
@include mytheme;

mytheme.scss has this at the top of the file:

@import "../chameleon/chameleon.scss";

$bgDarker: rgb(202,194,177); 
$bgColor: rgb(252,244,227);
$bgColorAlpha: rgba(252,244,227,.85);

@mixin mytheme {
  @include chameleon;
}

And everything else is my app specific CSS.

Then back in styles.scss I’ve replaced the colours with the variables $bgColor where appropriate.

My UI class is annotated like this:

@Theme(value = "ttm")

No idea if that’s the best way to do it, but it’s working for me. I’ll fix it once Chameleon is properly supported in Vaadin 7.

Hope that helps.

10

Just wanted to point out, that I wrote two options for using the output from the Chameleon theme color editor:
https://vaadin.com/forum#!/thread/2926737
, since the editor still isn’t compatible with Vaadin 7. I don’t even know if there are plans to make it work. A ticket might help.

11

I see that this is an old issue, which I started again.
Do you think, now it’s much easier to manage the chameleon theme in WordPress?
In addition Vaadin themes, I found Cameleon theme with Elegant Themes and Cameleon themes with chameleonthemes.net.
Chameleon theme with Elegant Themes provide:
-Change fonts
-Change background color and/or texture
-Change the type of page, or template
Of course, you can set up your homepage to look like a standard blog. If that’s not your style, though, Chameleon gives you four distinct homepage areas to work with:
-Header
-Slider
-Content Area
-Footer
But the latest version of Chameleon theme is from chameleonthemes.net
They provide different option about homepages, which user can change per his requirements.
Per my opinion chameleonthemes.net has overly flexibility, but he has a more option than Chameleon theme from Elegant themes.