Theme styling is not working in Helium

Support
,
#1

Hi
I have been using the theme styles in Halo, Hover and its working fine. However, it’s not working in Helium theme.

Here is how it is setup:

halo/Style.scss hover/style.scss, helium/style.scss

//Used in any DataGrid
 //-----------------------------
 .v-grid-cell.background-yellow {
     background-color: yellow;
     color: black;
 }
 .v-grid-cell.background-red {
     background-color: red;
     color: white;
 }
 .v-grid-cell.background-red-black {
      background-color: red;
      color: black;
  }
 .v-grid-cell.background-green {
     background-color: green;
     color: white;
 }
.v-grid-cell.background-blue {
     background-color: blue;
     color: white;
 }

.v-grid-cell.background-orange {
     background-color: orange;
     color: white;
 }

In controller

salaryPayscalesTable.getColumnNN(“totalGrossAmount”)
.setStyleProvider(order -> {
if(order.getCalcPending()==true) {
return “background-red”;
}
return null;
});

Is there anything wrong with my code Helium as it’s not working?

#2

I believe you need to put them in halo-ext.scss, not style.scss.

You can read it here Extending an Existing Theme - CUBA Platform. Developer’s Manual

#3

Hi
I have extended halo theme that’s working but the problem is with Helium theme that’s not working.

#5

Hello,

in the Helium theme, you need to increase the priority of your selectors. Wrap your styles in .v-grid:

.v-grid {
  .v-grid-cell.background-yellow {
     background-color: yellow;
     color: black;
  }
  ...
}
#7

Hi
Tried that but getting error:

Failed to load the widgetset: ./VAADIN/widgetsets/com.company.web.toolkit.ui.AppWidgetSet/com.company.web.toolkit.ui.AppWidgetSet.nocache.js?1639179039593

Here is my code in helium-ext.css

@mixin com_inteacc_erp-helium-ext {

  /* Basic */
--background-color: #FFFFFF;
--background-color_rgb: 255, 255, 255;
--primary-color: #245EAC;
--primary-color_rgb: 36, 94, 172;

  /* Common */
--primary-color-shade-1: #205497;
--primary-color-shade-2: #1D4B87;
--primary-dim-color: #4E8BDA;


//Used in any DataGrid
//in the Helium theme, you need to increase the priority of your selectors. Wrap your styles in .v-grid:
 //-----------------------------

 .v-grid {
   .v-grid-cell.background-yellow {
        background-color: yellow;
        color: black;
    }
    .v-grid-cell.background-red {
        background-color: red;
        color: white;
    }
    .v-grid-cell.background-red-black {
         background-color: red;
         color: black;
     }
    .v-grid-cell.background-green {
        background-color: green;
        color: white;
    }
   .v-grid-cell.background-blue {
        background-color: blue;
        color: white;
    }

   .v-grid-cell.background-orange {
        background-color: orange;
        color: white;
    }
 }
}
#8

Not sure that is affected by themes. Try to remove the tomcat folder and rebuild the project. For instance, you can use the following Gradle tasks:

./gradlew clean assemble dropTomcat setupTomcat deploy
#9

Did that but unfortunately not result!