1

If the Defined css is plain, scene builder renders the controls with the defined styles...

but if css custom color constants are used, scene builder renders the controls in white...

When I run the application, the style is applied properly(this is done by javaFX libraries) for the scene

note: linking the css file in the scene builder with preview > Scene StyleSheets > add a StyleSheet is implied and that's why the basic stylesheet(without the css color constants) was working.

My Question is:

How do I make it(Scene builder) understand the CSS(color constants) styles

 

CSS:

.root {
   -color1: #1BA1E2;
   -color2: #F8F8F8;

   -primary-color: -color1;
   -secondary-color: -color2;
}

.windowbox {
    -fx-border-radius: 50 0 50 0;
    -fx-background-radius: 50 0 50 0;
    -fx-background-color: -primary-color;
}

.lbl {
    -fx-background-color: derive(-primary-color, -10%);
    -fx-text-fill: -secondary-color;
}

the above css works perfectly during execution (in the runtime) but scene builder is oblivious to the styles

Crystal Paladin
  • 579
  • 5
  • 26

1 Answers1

1

In Scene Builder, select Preview, then Scene Style Sheets, then Add a Style Sheet, as described here. Then select your .css file. To get more info, use the CSS Analyzer functionality.

Also, since your example uses the css class selector ("."), be sure to reference the style class in your fxml (e.g., styleClass="lbl").

Alternatively, you can use the css id selector ("#"). With that approach, you can specify an id in the fxml (id="lbl"). Or you can omit the id attribute from your fxml and by default the fx:id value will be used as the css id selector (fx:id="lbl").

Some info here and here.

Woodchuck
  • 3,869
  • 2
  • 39
  • 70
  • I did that... That is the basic thing to do... when I use normal styling, `-fx-background-color:red` it works fine... but when I use css custom constants `-primary-color:red; -fx-background-color: -primary-color;` it's not rendering the style(red color) – Crystal Paladin Jun 05 '17 at 07:38
  • Interesting. When I try this myself the colors do take effect in SceneBuilder. – Woodchuck Jun 05 '17 at 17:56
  • Do your fxml controls reference the css style classes (styleClass="lbl")? – Woodchuck Jun 05 '17 at 18:09
  • At Runtime, the CSS applies perfectly... The "lbl" class is linked to the label control(in scene builder's control properties panel)... If it worked for you, what version of SceneBuilder are you using? did the custom color constants work in scene builder? – Crystal Paladin Jul 04 '17 at 04:48
  • I'm having mixed results; sometimes the above answer works, sometimes not. – Brad Turek Feb 10 '18 at 16:36