JavaFx my css file is not working

Question

It was working earlier but now here is a screenshot

of my running program and it is clearly not. Can somebody help me with this? I am a beginner to JavaFX.

Analog_clock.java

package analog_clock;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

/**
 *
 * @author ishansrivastava
 */
public class Analog_clock extends Application {

    @Override
    public void start(Stage primaryStage) {

        Circle circle = new Circle();
        circle.setCenterX(100.0f);
        circle.setCenterY(100.0f);
        circle.setRadius(50.0f);

        Group g = new Group();
        g.getChildren().add(circle);

        Pane bg = new Pane();
        //bg.setBackground(new Background(new BackgroundFill("-fx-color: #ACACE6", null,null)));
        bg.getChildren().add(g);

        Scene scene = new Scene(bg, 300, 250);
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());

        primaryStage.setTitle("Hello World!");
        primaryStage.setScene(scene);
        primaryStage.show()cl;
    }

    public static void main(String[] args) {
        launch(args);
    }

}

style.css

.Circle
{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}
.pane 
{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

Thank you for helping me out.

update :

after changing my css file to this :

.circle
{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}
.root
{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

my background appears to be purple where as I have nothing named root in my code.

why are the colours not appearing as I defined in my css file? — , Jul 09 '17 at 21:47

Yahya · Accepted Answer · 2017-07-09T23:10:25.570

1

If you set the id of the circle & bg, it should work:

circle.setId("circle");`
bg.setId("bg");

Then create your CSS file:

#circle{
    -fx-stroke: #757575; /* sonic silver */
    -fx-fill: #00CC99; /* caribbean green */
}

#bg{
    -fx-background-color: #ACACE6; /* maximum blue purple */
}

And regarding the root word, I'm not quite sure, but I think it has a special meaning in JavaFX (specifically FXML language), and that's why it has been understood as if you defined your Pane bg with that name! However, have a look at How to understand and use <fx:root> in JavaFX? it may help.

edited Jul 09 '17 at 23:10

answered Jul 09 '17 at 21:51

Yahya

13,349
6
30
42

You are a LifeSaver. but I have never seen someone writing without a . or # in css file. also please check the update: I made in my question. what can be the reason for that? – Jul 09 '17 at 21:55
also how would I be able to use different styles for different circles without using # ? – Jul 09 '17 at 22:00
`root` is a special styleclass for the scene (that can't have a user-defined styleclass). – Mordechai Jul 10 '17 at 03:30
@MouseEvent OK.. So my guessing is correct. Cheers. – Yahya Jul 10 '17 at 07:16
@MouseEvent @Yahya why are things not working as they are supposed to, like in the javaFX documentation, to set id, this command is listed, but it is not working `outer_circle.getStyleClass().add("outer");` – Jul 10 '17 at 10:01
@ErwinSmith My friend, I think this [link](https://stackoverflow.com/questions/37923411/understanding-getstyleclass-add-and-a-few-lines-of-code) would help. Otherwise, please post another question. – Yahya Jul 10 '17 at 11:39

score 1 · Answer 2 · answered Jul 10 '17 at 15:42

You can do as you began, there are some points that you have missed, and probably you don't understand how styling works with css.

First of all when you add the syleSheet to your Scene, that means you say for the scene: look here is the stylesheet you can use these things from it. So you don't add it them instantly to the components like background, circle etc.

Furthermore, while the Circle is a Node, and it implements Styleable, you have the method getStyleClass() that holds all stylings for the Node(in this case for the Circle), and if you want to add some new styling you can simply do this way: (for example for the circle) circle.getStyleClass().add("cirle"); Of course this won't work wothout setting the stylesheet.

One more thing, you can specify the stylesheets for every node, os if you want you can use one stylesheet for the Pane and an other for the Circle.But usually us use stylesheets at parent nodes, then add styles for the children separately.

So this is how you can simply use the styling. I hope this is understandable.

a little bit un-understandable but I will get back to it as I am not following a tutorial (as advised by over 30 people on reddit) and just learning by doing and reading the documentation so it will take a few days — , Jul 10 '17 at 20:21
I was unable to style components in my dialog and "that means you say for the scene: look here is the stylesheet you can use these things from it" helped me to understand/remember that I did not call `scene.getStylesheets().add("/styles.css");` on my dialog's Scene — user435421, Mar 03 '19 at 20:32

score 0 · Answer 3 · answered Jul 09 '17 at 19:12

0

scene.getStylesheets().add(Analog_clock.class.getResource("/style.css").toExternalForm());

answered Jul 09 '17 at 19:12

Akash

587
5
12

JavaFx my css file is not working

3 Answers3

Linked