Working with CSS ?

General
1

Hello

I am reading the chapter 8 of vaadin7 book and I can’t understand how to use CSS. In my UI I did use @Theme annotation and this works normally.
I did customize the styles.scss making an example of .v-horizontallayout and all HorizontalLayout of my project are using this attribute.
I don’t wanna this, I wanna create my file mystyle.scss for each component and use when I need.

I try this.


/** styles.scss */
@import "addons.scss";
@import "curriculunsibg.scss";

/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in curriculunsibg.scss */
.curriculunsibg {
  @include addons;
  @include curriculunsibg;
 
  /** here all HorizontalLayout are customized, I dont wanna this */ 
  .v-horizontallayout  {
          background:url(../imagens/ibg_background.gif);
  } 
}

How I can to create and set my styleName to each components without rewrite others css styles ?

for example


HorizontalLayout layout1 = new HorizontalLayout();
layout1.setStyleName("myTheme1");

HorizontalLayout layout2 = new HorizontalLayout();
layout2.setStyleName("myTheme2");

HorizontalLayout layout3 = new HorizontalLayout();
layout3.setStyleName("myTheme3");

thanks.

2

If I understood correctly you’d want to have something like

.v-horizontallayout-myTheme1  {
          background:url(../imagens/ibg_background.gif);
}

in your curriculunsibg.scss, although I’d recommend using some other naming convention than myThemeX for clarity’s sake… Also, setStyleName removes all other styles but the primary style from the component, so addStyleName is usually more desirable… unless stripping potential other styles is the plan, of course.

(Edited to fix a very stupid mistake – should never write these while being distracted)

3

Hello Anna, thanks for your attention.

I understand what did you say, but How I can separate my components by css attribute ???

example.



// UI class
HorizontalLayout hMainLayout = new HorizontalLayout();
HorizontalLayout hLayout = new HorizontalLayout();

In that example, how to I can define a background image to hMainLayout and hLayout doesn’t have a background image ?

4

I resolved the problem…

I did this !



/** styles.scss */

.hMainLayout {
      background: url("myimage.jpg");
}

.hLayout{
     background: none;
}

// UI class
HorizontalLayout hMainLayout = new HorizontalLayout();
hMainLayout.addStyleName("hMainLayout");

HorizontalLayout hLayout = new HorizontalLayout();
hLayout.addStyleName("hLayout");

Now works :smiley:

5

Glad to hear you got it working :slight_smile: Strictly speaking you don’t even need to set the background as none unless you are trying to remove a background set by some more general style. Here you limit the background to that hMainLayout HorizontalLayout alone, so it shouldn’t spill on the hLayout HorizontalLayout. Chrome inspector and Firebug (addon) are good tools when you play with styles, they let you see just which styles exactly affect which component and what gets overridden.