Button Style

Flow
1

Hi,

Previously we are using another framework … now we totally are in the way to vaadin…So we need to keep the style intact
our folder structure is


----WebContent
                |
                 css
                    |
                     -- application.css
                     --look_and_feel.css

application .css contains all the general look and feel of the components

how the application.css styles can be incoporated into say Button\


Button loginButton = new Button("Login");
loginButton.setStyle("applicationButton");

I have seen the above code but, where we are importing the css … that i didnt find

Our requirement is, we are making an architeture above vaadin(With spring integreation)…So we create a new button named ApButton which extends Vaadin Button. So the ApButton will have an unique icon and caption can be form specific, also with red border
This is also in the case of TextFields and some basic components.

How it can be implemented
Please help

2

There is some other posts related to the vaadin button theming. See for instance
this one
.

Css style files are commonly placed like this in the vaadin: WebContent/VAADIN/themes/yourtheme/yourstyles.css. There is whole chapter of this subject in
the book of vaadin

3

Hi,

In vaadin is it possible to give one button font as italic and color red AND another button with font bold and color magenta. ie; 2 buttons with different style

4

yep. setStyleName() 2 different values on the buttons and then define the L & F in the css.

5

One more think about button styling. It might be more easier to start button styling from the link styled button (BaseTheme.LINK_STYLE) than from the more graphical Reindeer styled button. One typically first set button style to link style and after that use addStyleName method to add one’s own style to top of link-styled button.

6

SetStyle is not changing the caption div element but seting style to the outer div element. im uising version vaadin 6.0, had downloaded vesion 6.2. (ie. if im giving as setStyle(“caption-red”); in generated html it is like class=“v-button-caption-red caption-red”> but this is applying to outer div elemnt.

7

The following is the style class i created on existing style.css

.v-button-link..v-button-cancel_red {
	color:red;
	}

The following is the way i implemented those style

addStyleName(BaseTheme.BUTTON_LINK);
	  addStyleName("cancel_red");

The following is the generated code


<div role="button" class="v-button v-button-link link v-button-cancel_red cancel_red" tabindex="0">
        <span class="v-button-wrap">
               <span class="v-button-caption">Clear</span>
       </span>
</div>

Here you can clearly see that the caption has no change. Without change in caption style how this is going to change the button text color to red.

So from the existing implementation i think that we cannot change the text color of one button to red and another to say blue.But the entire style can be changed. It will be better if we can implement style(color, font size, etc) of our own to some components…

8

Here is example that change the caption color.

TestApplication.init():


Window mainWindow = new Window("Vaadintest Application");
Button b1 = new Button("B1");
Button b2 = new Button("B2");
		
b1.setStyleName(BaseTheme.BUTTON_LINK);
b2.setStyleName(BaseTheme.BUTTON_LINK);
		
b1.addStyleName("red");
b2.addStyleName("green");
		
mainWindow.addComponent(b1);
mainWindow.addComponent(b2);
setMainWindow(mainWindow);
setTheme("testtheme");

styles.css:


@import url(../reindeer/styles.css);
.red .v-button-caption {
	font-size: 12pt;
	font-weight: bold;
	color: red;
}
.green .v-button-caption {
	font-size: 12pt;
	font-weight: bold;
	color: green;
}

DOM:


<div style="height: 20px; width: 1436px; overflow: hidden; padding-left: 0pt; padding-top: 0px;">
   <div style="float: left; margin-left: 0px;">
      <div class="v-button v-button-link link v-button-green green" tabindex="0" role="button">
         <span class="v-button-wrap">
            <span class="v-button-caption">B2</span>
         </span>
      </div>
   </div>
</div>
9

Hi Johannes,

Im extremely sorry for the late reply… was busy with previous project.

Im very happy to see this… it was working well…very good way… To be frank i was worrying a lot abt this… But now happy…Once again thank u very much

with luv
Babu Raj