Themeing components (buttons) vaadin 7

Hi guys
i want to restyle buttons and i’m using vaadin 7.


Goal

My goal is to restile completely all (or the most) components in order to have a “minimal layout” (something like “metro” or “gmail” )
Let’s start with simpler components: Button

In the javacode i put this


Button addUser = new Button("Add User");
addUser.setStyleName("mybutton");
operations.addComponent(addUser);		

and in the .scss file:


.v-button-mybutton {
	[color=#ff0404]
background-image: none;
[/color]
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #f9f9f9;
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #666666;
	font-family: arial;
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 1px 1px 0px #ffffff;
}

When i click on the button (and reach the “pressed” state, or “focused” state) it somehow still have the Reindeer background-image that i want to be set at null (and did it in the .v-button-mybutton selector as you can see in the code).
Furthermore (and probably this is the cause) this button has a lot of inner divs which put pngs and stuffs inside it, provinding poor “developer friendliness” i.m.h.o.

I’m sure there is a simpler way to restyle buttons from scratch and i’m doing it wrong. Isn’t it ?

Suggestions?

Hello.

You very likely also need to set new styles for the css
pseudo classes
.

And have a look at NativeButton, which is a regular HTML button element.

Hope this helps

OK i’m sure you right (i overrided the pseudo-classes and somehow it works)


.v-button {
	background-image: none;
/* 	-moz-box-shadow: inset 0px 1px 0px 0px #ffffff; */
/* 	-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff; */
	box-shadow: inset 0px 1px 0px 0px #ffffff;
	background-color: #f9f9f9;
/* 	-moz-border-radius: 6px; */
/* 	-webkit-border-radius: 6px; */
/* 	border-radius: 6px; */
	border: 1px solid #dcdcdc;
	display: inline-block;
	color: #666666;
	font-family: arial;
	font-size: 15px;
	font-weight: bold;
/* 	padding: 6px 24px; */
	text-decoration: none;
	text-shadow: 1px 1px 0px #ffffff;
}

.v-button:hover {
	background-color: #e9e9e9;
}
.v-button:focus {
	background-image: none;
	background-color: #e9e9e9;
}

.v-button:active {
	background-image: none;
	background-color: #e9e9e9;
}

.v-button-wrap {
	background-image: none;
}
[color=#ff0000]
.v-button-wrap:focus {
	background-image: none;
}
.v-button:hover .v-button-wrap {
	background-color: #e9e9e9;
}
.v-button:focus .v-button-wrap {
	background-image: none;
	background-color: #e9e9e9;
}

.v-button:active .v-button-wrap {
	background-image: none;
	background-color: #e9e9e9;
}
[/color]

but the point is:

I want to restyle a button; should i override 8 selectors ? oO

as a developer i expect to do something like that (and in
Vaadin 6
it was like this)
.v-button {balabl }
.v-button:hover {blabla }
.v-button:focus{ blabla}
Stop. Why should i have concerns about a “.v-button-wrap”??? seems a lil bit unfriendly…

It sounds like you are trying to override things in the reindeer button (or some other non-base theme). You should note that the reindeer button is actually one of the hardest to re-theme.

If you don’t use the reindeer button but the one from base as a starting point, you’ll have a much easier time. Also otherwise, if you are re-theming everything, start with base or chameleon and perhaps pick the appropriate mix-ins from some other theme only where needed.

See also
this tutorial
and
this one
.

Unfortunately CSS is like this currently, there’s no easy way to “remove” all cascaded styles and only use the styles defined in one selector.

Anyway, if you’re aiming for a very minimal styled theme, then I strongly suggest you start extending the Base theme, and nothing else. That’ll give you a very clean slate to start from.

In Vaadin 7, you also have a couple of other options, thanks to Sass.

First, you can create a new theme with all the other parts intact from Reindeer/Runo/Chameleon except the button. Copy-and-paste the reindeer.scss file, and just leave the
@include reindeer-button;
out of there. Now you have the Reindeer theme without the button styles, and you’re free to add your own.

Second, you can use the setPrimaryStyleName method for individual component instances to get rid of all the normal styling for that component, and then build your own from scratch (or import some other style from another theme for example).

See the two previous tutorials Henri linked to, they’re very informative on this topic.

Thank you Jouni and thank you Henri, you were very useful.
Did i miss those informations in the themeing tutorial ?

What tutorial? Those articles are very new, and most likely aren’t mentioned in any other documentation yet.