Skining a ControlsFX PopOver control JavaFX

Question

I want to customize the look of a PopOver control JavaFX. I have a button that when pressed the PopOver appears. Here is a working example:

package pruebapopover;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
import org.controlsfx.control.PopOver;

public class PruebaPopOver extends Application {

    @Override
    public void start(Stage primaryStage) {
        PopOver popover = new PopOver();     
        TextField campo = new TextField();      
        popover.setContentNode(campo);

        Button btn = new Button();
        btn.setText("Lanch PopOver");
        btn.setOnAction((ActionEvent event) -> {           
            popover.show(btn);

            ((Parent) popover.getSkin().getNode()).getStylesheets()
                .add(getClass().getResource("PopOver.css").toExternalForm());                   
        });         

        StackPane root = new StackPane();
        root.getChildren().add(btn);

        Scene scene = new Scene(root, 300, 250);            
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

}

and the PopOver.css:

.popover {       
    -fx-background-color: rgba(255,0,0, 0.1);  /* semi-transparent red */                                     
}
.popover > .content {
        -fx-padding: 10;                        
        -fx-background-color: transparent;                        
}

The result is as follows: Popover displayed incorrectly

But what I expect is this: PopOver displayed correctly

How to remove white background of PopOver control?, Why not appear semi-transparent ?, How do I paint red arrow?

Answer 1

The visual aspect of the popover we see on screen is a Path with style class border added:

path = new Path();
        path.getStyleClass().add("border");

Therefore the .css file will read:

.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(255,0,0, 0.5); /* instead -fx-background-color */
    -fx-effect: dropshadow(gaussian, rgba(0,0,0,.2), 10.0, 0.5, 2.0, 2.0);
}