Edit Touchkit theme

Flow
1

Hi

I’m using Vaadin 6.6.6 and Touchkit 2.0 with Eclipse
Seems like the Touchkit.css is loaded after loading the Style of my choice, so my style is always overwritten.
I can not figure out how to change something style-related.

Has something to do with the GWT-Compiler?

Could somebody give me a hint how manipulate the touchkit-style?
Or a step-by-step solution to change the color of the button below?

(Color in generell must be changed and be depentable from isEnabled() ->true, false)

Button butt=new Button ( doc.getTitle ( ), this.listener );
//setStyle(buttondisabled)
if ( doc.isEnabled ( ) )
{
butt.setCaption ( butt.getCaption ( ) );
//butt.setStyleName ( “buttonenabled” );
}

Btw:
thanks for Vaadin and Touchkit. It’s really usefull.

2

Yes the styles are loaded in a bit odd order.

If you want to avoid overriding, you need to make your CSS rules more specific. For example, use “.myapp .mystyle” instead of just “.mystyle”. You need to check with Firebug what rule overrides it and make your rule more specific than that.

3

Tried to do this with my limited css-skills. And I didn’t manage it. Quite frustrated, because its probably one easy thing to do if you would know what to do. And worse I do understand what to do, but I don’t know how this is done in this case (and in css).

What I have:

-Buttons that are generated and collected in a verticalComponentGroup:

Button butt=new Button(doc.getTitle(),this.listener);
butt.setCaption(butt.getCaption()+" opened");
butt.setStyleName(“myonestyle”);
test.addComponent(butt);

  • A theme in the Web-App/Vaadin/themes/mytheme, that is just a copy of the base-theme.

The Touchkit.css, that overrides my changes in the copied style.css

Firebug says:

Bldsdsdsa

I tried to add the following to the style.css in …mytheme:

.v-button-myonestyle
{
color: #fff;
height: 100px;
}
.v-button-wrap.myonestyle {
color: #fff;
height: 100px;
}

.v-button.myonestyle {
color: #fff;
height: 100px;
}

.myonestyle {
color: #fff;
height: 100px;
}

and different other combinations.

Don’t get any changes.

What would be the solution? (Dumb question, but I don’t want to learn css this week, just want a simple colorswitching button:-) )

4

Got it.

First second guess was a hit.

Summary

ExampleCode:

Button butt=new Button(“Click”,this.listener);
butt.addStyleName(“myonestyle”);

Touchkit uses .v-button-wrap for the design

in your own theme go into the styles.css (or where the button.definition shall be)
take the stylename used by touchkit and extend it with the name you want it to have. (with a minus)

my example:
.v-button-wrap-myonestyle {
color:#fff;
height: 100px;
}

Now the Button-design can be changed.
Should be little bit bigger in the example.

Case closed!

5

I want to change touchkit navigaion button.
I want to make them bigger 75px and
I want to make the icons bigger say 30% width 100% height (also the text)
Thanks
Also in the toolbar the FONTAWESOME icons dont appear (actually my own images dont seem to work)
VAADIN 7.6.4 touchkit 4.1.0

6

It took me a while to get Fontawesom icons appear in touch kit.
I am using Vaadin 7.7.3 with Touchkit 4.1.0 Vaadin-icons 2.0.0 Vaadin-Spring-boot 1.1.1
You need to download Fontawesom from http://fontawesome.io/ as well.
Please see attachments for the file structures.

/*
This part has problem when I use vaadin:compile-theme for the second time that run. I deleted this part and the code is still working

under src/main/webapp
I create VAADIN/themes/fonts
with fontawesom-webfont.eot … files
*/

under src/main/webapp/VAADIN/themes/
I create mytheme/fonts/
Vaadin-icons.eot… files

under src/main/webapp/VAADIN/themes/
I create
mytheme.scss

[code]
@mixin mytheme {

.username 
{ 
background-color:red;
color: black;
font-style: italic;
}

}
[/code]styles.scss

[code]
@import “mytheme.scss”;
@import “vaadin-icons.scss”;

.mytheme {
@include mytheme;
@include vaadin-icons;
}
[/code]vaadin-icons.scss

[code]
@font-face {
font-family: ‘Vaadin-Icons’;
src: url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.eot’);
src: url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.eot?#iefix’) format(‘embedded-opentype’),
url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.woff’) format(‘woff’),
url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.ttf’) format(‘truetype’),
url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.svg#icomoon’) format(‘svg’);
}
.Vaadin-Icons {
font-family: ‘Vaadin-Icons’;
}

@mixin vaadin-icons {
}
[/code]do vaadin:compile-theme
to get styles.css
like this

[code]
@font-face {
font-family: “Vaadin-Icons”;
src: url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.eot’);
src: url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.eot?#iefix’) format(“embedded-opentype”), url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.woff’) format(“woff”), url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.ttf’) format(“truetype”), url(‘…/…/addons/vaadin-icons/fonts/Vaadin-Icons.svg#icomoon’) format(“svg”);
}

.Vaadin-Icons {
font-family: “Vaadin-Icons”;
}

.mytheme .username {
background-color: red;
color: black;
font-style: italic;
}
[/code]At your UI do

@Theme(“mytheme”)

That should work.

29105.png

7
8

I have correct it to put the font and your-theme under
src/main/webapp/VAADIN/themes/

You can create any theme name that your want and put under that path.
For example theme name “goodtheme” , create goodtheme folder under that path
and change the name of mytheme.scss to goodtheme.scss , in style.scss import goodtheme.scss
maven build do vaadin:complie-theme
you should get a new style.css

in your UI, @Theme(“goodtheme”)

hope this will work , it works for me under Chrom as well.