Styling JavaFX Popover

Question

I need to style a Popover from ControlsFX, but am failing to do so.

I have my own xxx.css stylesheet that I add to a scene, and I've (obviously) successfully styling many JavaFX Controls...

I have set this in the stylesheet (copied and modified from popover.css in ControlsFX):

.popover > .border {
    -fx-stroke: linear-gradient(to bottom, rgba(0,0,0, .3), rgba(0, 0, 0, .7));
    -fx-stroke-width: 0.5;
    -fx-fill: rgba(30 , 30, 30, .95);
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,.2), 10.0, 0.5, 2.0, 2.0);
}

But the Popover never gets the border style. How do I get the Popover to pick the style up?

Answer 1

Since the PopOver is displayed in a different window, you can't set your style on the primary scene, but on the PopOvercontrol.

If you look at how the style is applied to the control in its skin class PopOverSkin:

stackPane = new StackPane();
stackPane.getStylesheets().add(
            PopOver.class.getResource("popover.css").toExternalForm());
stackPane.getStyleClass().add("popover"); 

where this stackPane can be accessed with:

@Override
public Node getNode() {
    return stackPane;
}

you just need to add your style sheets to that stack pane, right after you have access to the skin, that is, when the popOver is shown:

popOver.show(...);

((Parent)popOver.getSkin().getNode()).getStylesheets()
    .add(getClass().getResource("MyPopOver.css").toExternalForm());