JavaFX How to change color of dialog/window title?


Tags: css,colors,javafx,dialog,title

Problem :

since yesterday, i'm trying to change the color of my dialog title (or maybe all title colors of my application) to get a black or dark color, because it's white color and not readable with grey background.

I still think it should work with css but i can't really find the specific entry for the title color.

I tried something like this in dialog.css but did not work, so commented out:

/*
.root {     
-fx-text-base-color: blue;
-fx-text-background-color: green;
-fx-text-inner-color: red;
-fx-selection-bar-text: yellow;
}
*/

Here my Dialog class:

package de.test.dialog;

import java.io.IOException;

import javafx.event.EventHandler;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.stage.Stage;
import javafx.stage.WindowEvent;


public class Dialog extends Stage {

public static final String OK_DIALOG = "OK";

private final String OK_XML = "/fxml/dialog_ok.fxml";


public enum DIALOG_ACTION {
    BUTTON_1, BUTTON_2, BUTTON_3, NOTHING, CLOSE_WINDOW
}

private DialogController controller = null;
private String message = null;


public Dialog(String name, String ... buttonName) {     
    String resource = getFXMLResource(name);
    if (resource != null) {
        try {
            FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource(resource));
            Parent root = (Parent) fxmlLoader.load();
            controller = fxmlLoader.getController();
            controller.setButtons(buttonName);
            setScene(new Scene(root));
        }
        catch (IOException e) {
            e.printStackTrace();
        }
    }

    setOnCloseRequest(new EventHandler<WindowEvent>() {
        @Override
        public void handle(WindowEvent event) {
            System.out.println("Closing?");             
        }
    });
}

private String getFXMLResource(String name) {
    String fxmlResource = null;

    switch(name) {
        case OK_DIALOG:
            fxmlResource = OK_XML;
            break;
        default:
            break;
    }

    return fxmlResource;
}

public Dialog.DIALOG_ACTION getAction() {
    if (controller != null) {
        return controller.getAction();
    }
    else {
        return DIALOG_ACTION.NOTHING;
    }
}

public void setMessage(String sMessage) {
    this.message = sMessage;
    if (controller != null) {
        controller.setMessage(message);
    }
}

public void setIcon(Image image) {      
    if (controller != null) {
        controller.setIcon(image);
    }       
}
}

Dialog fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="176.0" prefWidth="400.0" stylesheets="@styles/dialog.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.test.dialog.DialogController">
   <children>
  <ImageView fx:id="imgIcon" fitHeight="48.0" fitWidth="48.0" layoutX="8.0" layoutY="25.0" pickOnBounds="true" preserveRatio="true" AnchorPane.leftAnchor="15.0" AnchorPane.topAnchor="25.0">
     <image>
        <Image url="@../icons/dialog/48a.png" />
     </image>
  </ImageView>
  <Text fx:id="txtMessage" layoutX="85.0" layoutY="45.0" strokeType="OUTSIDE" strokeWidth="0.0" text="TEST" wrappingWidth="300.00" AnchorPane.leftAnchor="94.0" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="25.0">
     <font>
        <Font size="14.0" />
     </font>
  </Text>
  <Button fx:id="btn1" defaultButton="true" layoutX="295.0" layoutY="134.0" mnemonicParsing="false" onAction="#doAction" prefHeight="25.0" prefWidth="90.0" text="OK" AnchorPane.rightAnchor="15.0">
     <font>
        <Font size="14.0" />
     </font>
  </Button>
  <Button fx:id="btn2" cancelButton="true" layoutX="180.0" layoutY="134.0" mnemonicParsing="false" onAction="#doAction" prefHeight="25.0" prefWidth="90.0" text="Abbrechen" visible="false" AnchorPane.rightAnchor="120.0">
     <font>
        <Font size="14.0" />
     </font>
  </Button>
  <Button fx:id="btn3" layoutX="102.0" layoutY="134.0" mnemonicParsing="false" onAction="#doAction" prefHeight="25.0" prefWidth="90.0" text="Button 3" visible="false" AnchorPane.rightAnchor="225.0">
     <font>
        <Font size="14.0" />
     </font>
  </Button>
   </children>
</AnchorPane>

Calling my dialog:

    Dialog dialog = new Dialog(Dialog.OK_DIALOG, "Löschen", "Abbrechen");
    dialog.initModality(Modality.APPLICATION_MODAL);
    dialog.initOwner(((Node)e.getSource()).getScene().getWindow());
    dialog.setResizable(false);
    dialog.setTitle("Dateianhang löschen");     
    dialog.setMessage("Wollen Sie die ausgewählte(n) Datei(en) wirklich löschen?");

    // Get the Stage.
    //Stage stage = (Stage) dialog.getScene().getWindow();
    // Add a custom icon.
    //stage.getIcons().add(new Image("/icons/dialog/48a.png"));

    dialog.showAndWait();

As you can see, i tried to change the title icon (commented out), and that worked. But no chance to change the color of the title.

If i try google whith e.g. javafx, i can see a lot of images with black title colors. So it must be possible to change the color, but i don't know how.

Any suggestions?

Greetings, Tom



Solution :

I stand to be corrected but I don't think you can set the color of the NATIVE title bar. I think what you are seeing in the google results are custom (user) made title bars.

Maybe this link is useful to you: https://arnaudnouard.wordpress.com/2013/02/02/undecorator-add-a-better-look-to-your-javafx-stages-part-i/

You can also have a look at the FXControls Dialogs source code and see how they have done it: http://fxexperience.com/controlsfx/features/dialogs/


    CSS Howto..

    How to shift a background image with css

    Show warnings screen resolution

    how to make a div to wrap two float divs inside?

    How to handle text overflow. Is there a Firefox equivalent to the text-overflow style from IE and Safari?

    How to evenly distribute menu items with CSS when width and quantity is not known?

    How can I instantly stop a CSS animation on hover?

    How to send CSS to the client using HTTP response headers?

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    Codeigniter shows views differently when index is removed

    How to prevent line breaks in list items using CSS

    How can I make two divs stack whilst still having my text wrap without media queries

    Inheriting CSS how do I stop it?

    less: how to import multiple css?

    How to center my images in my case?

    How can I use themeroller'ed styles in “regular” parts of a page?

    HTML/CSS: How to make a bar on the side to take you to a certain part of the page

    How can I animate this?

    WordPress admin stylesheet not showing images

    How to fire a new css animation when the element already has one?

    slide show with bootstrap

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    css how to force to ul,ol to show numbers or disc, after reset the list style.?

    CSS: How to get lines to “line up” accross different columns?

    How to Change Default Bootstrap Fluid Grid 12 Column Gutter Width

    How to add new fonts in CSS for local testing

    How to get the click position on a page when a css zoom is involved

    How to stop people from viewing my HTML and CSS [closed]

    How to keep a navbar toggle open until selection is made

    How can I target text input fields with CSS?

    How to style button inputs to be identical in Chrome and Firefox?