Strategies to change buttons design.

Flow
1

Hi guys,

I use the Reineer theme (which fits my needs quite well).

And I’d like other buttons, for example these ones:
http://ahmad-hania.blogspot.com/2008/02/free-resouce-stylish-3d-buttons.html
http://iris-design.info/photoshop/web-20-style-buttons/

I probably have to cut at few bitmaps, and the usual CSS work.

What would you advice:

  • create my own style for my buttons, outside the reindeer theme?
  • provide, in my theme, extensions (as new imgs) to the reindeer theme?
  • wait for an upcoming version of Vaadin (because a new mechanism would be available)?
  • other?

Many thanks.
John.

2

We (Jouni actually) did quite a bit of work in Vaadin 6.1 to make custom component theming easier. Thus you should ensure that you are using 6.1. See
release notes
 about the new button DOM structure and style-names.

Unfortunately I have not tried to theme buttons myself with 6.1, but my intuition would be to first see the
CSS implementationin reindeer
 and how button is
divided to images
. I would create my own theme extending reindeer and add a custom button style to it. So keep the widget implementation and DOM structure, but add your own stylename, CSS and images.

Bit of a warning. Even though button seems to be a simple thing, it actually isn’t. See the above links

Please report your experiences back :slight_smile:

3

Thank you Joonas,
I actually already read these resources and had a look at Reindeer regarding buttons, and it indeed seems a complex thing for the CSS dummy that I am.

I’ll probably start with some other simpler design task that I’ve to do, and keep buttons for the end. I’ll try to come up with a tutorial on that, and a set of web2.0 black buttons that should be popular. That’s not much, regarding all the benefits I had from using Vaadin and the great support you gave me.

In the meanwhile, any other suggestion/path on extening Reeinder buttons is welcome :wink:

4

Hi John! Back on this old topic once again.

I did two new buttons styles on top of Reindeer recently, and just thought I’d share the CSS that resulted. Basically the buttons don’t look much different but hopefully you can get a better picture of what you need to override when defining new button styles.

I’ll attach the sprite image as well, so you can see how to create those (not recommended by hand, but by using some generator like SmartSprites).

.v-button:focus {
	background-position: 0 -216px;
	background-image: url(img/button-sprites.png);
	}

.v-button:focus .v-button-wrap {
	background-position: right -243px;
	background-image: url(img/button-sprites.png);
	}

.v-button:active,
.v-button.v-pressed {
	background-position: 0 -270px;
	background-image: url(img/button-sprites.png);
	}

.v-button:active .v-button-wrap,
.v-button.v-pressed .v-button-wrap {
	background-position: right -297px;
	background-image: url(img/button-sprites.png);
	}

.v-button,
.v-disabled.v-button {
	height: 27px;
	padding: 0 0 0 7px;
	background: transparent url(img/button-sprites.png) 0 -162px;
	}

.v-button-wrap,
.v-disabled.v-button .v-button-wrap {
	height: 22px;
	padding: 5px 16px 0 9px;
	background: transparent url(img/button-sprites.png) right -189px;
	}

.v-button-caption {
	color: #393939;
	}

That’s it. Notice the order of the selectors: focus and active/down styles come before the normal and disabled styles. That way you don’t have to create a more specific selector for the disabled style, since you don’t want the active and focus styles to be applicable to a disabled button.
11184.png