Customize ControlsFX Notification Popup using CSS - css

I am using the ControlsFX Notifications class to create a notification popup. Everything about it is great, except for the fact that I can't style it with CSS. From the research that I did, it says you must add a Notifications.owner(), and the notification popup will then adopt the same stylesheet as whatever owner you put in. So far I've tried Notification.owner(root), Notification.owner(stage), and Notification.owner(scene). All of them had been set with my stylesheet, but none of them worked. Any ideas?
Here is my CSS:
/*Notification styling------------------------------------------------------------------------------------------------*/
.notification-bar > .pane {
-fx-background-color: red;
-fx-padding: 5 5 5 5;
-fx-background-insets: 0, 1, 2;
}
.notification-bar > .pane .title {
-fx-font-size: 1.333em; /*16px;*/
-fx-text-fill: purple;
-fx-font-weight: bold;
}
.notification-bar > .pane .label {
-fx-font-size: 1em; /*12px;*/
-fx-text-fill: blue;
-fx-alignment: top-left;
}
/******************************************************************************
*
* Close button
*
*****************************************************************************/
.notification-bar > .pane .close-button {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0 0 0 0;
-fx-alignment: center;
}
.notification-bar > .pane .close-button:hover {
-fx-background-color: brown;
}
.notification-bar > .pane .close-button:pressed {
-fx-background-color: orange;
}
.notification-bar > .pane .close-button > .graphic {
-fx-background-color: yellow;
-fx-scale-shape: false;
-fx-padding: 4.5 4.5 4.5 4.5; /* Graphic is 9x9 px */
}
.notification-bar > .pane .close-button:hover > .graphic {
-fx-background-color: green;
}
.notification-bar > .pane .close-button:pressed > .graphic {
-fx-background-color: gold;
}
.notification-bar > .pane .close-button > .graphic {
-fx-shape: "M395.992,296.758l1.794-1.794l7.292,7.292l-1.795,1.794 L395.992,296.758z M403.256,294.992l1.794,1.794l-7.292,7.292l-1.794-1.795 L403.256,294.992z";
}
Here is how I'm creating my notification:
Notifications
.create()
.owner(PageManager.root)
.title("Submission Complete")
.text("You successfully added a new user")
.hideAfter(Duration.seconds(3))
.position(Pos.BOTTOM_RIGHT)
.graphic(imageView)
.show();
PageManager.root is the root that my entire application uses. I set the stylesheet on it and it works on everything else in my application except the notification.
*Side note: I don't think the issue is with the CSS. I'm using copied CSS from a verified stackoverflow answer that apparently fixed my exact issue. For some reason, I can't get that solution to work. Here is the OG post Customize ControlsFX Notifications

Related

Howto get the correct CSS item for DatePicker (JavaFX11)

how do I change the CSS of month label and year label? they are grayish and I want to change to white. I cant find the CSS for these two items.
Current CSS code of this datepicker:
/**
* https://gist.github.com/maxd/63691840fc372f22f470
*/
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: white;
}
.calendar-header {
-fx-background-color: #1d1d1d;
-fx-base: #1d1d1d;
-fx-text-fill: white;
}
.date-picker-popup {
-fx-text-fill: white;
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 0;
-fx-alignment: CENTER; /* VBox */
-fx-spacing: 0; /* VBox */
-fx-padding: 0.083333em; /* 1 1 1 1 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-background-color: #1d1d1d;
-fx-text-fill: white;
}
Change the style for the .month-year-pane to
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
By default, -fx-background-color is set to fx-background, which in turn depends on -fx-base. The default text fill for controls whose text is rendered over a background of -fx-background is automatically chosen depending on the intensity of the background; in this case it will be set to -fx-light-text-color (which defaults to white).
The arrows are rendered in -fx-mark-highlight-color, so setting this to -fx-light-text-color ensures the arrows are the same color as the text. (Probably better is to mimic the ladder for -fx-text-fill.)
A lot of your CSS seems to have no effect. With the changes above, this seems equivalent:
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
Note that the rule
.date-picker > .text-field {
-fx-text-fill: white;
}
makes the text in the text field (i.e. the selected date) invisible; I don't know if this is the desired effect.
Looking through the source code I found the labels use the spinner-label style class so I think you can just do:
.date-picker .spinner-label {
-fx-text-fill: white;
}

css-files are partly appplied when building a windows.exe from a a javafx project using j4launch as a wrapper

I have a Javafx project developed in eclipse with some css-files for table and chart backgrounds. In eclipse everything works fine, but when I use j4launch to built a windows .exe the css- files is not applied to the tables and (what seems very strange to me) only one of two line charts shows the wanted background. Both line charts refer to the the same css-file bau are situated in different tabs. I am using jre1.8.0_211. Can someone help me? It would be great. Thank you Marcus
I checked in scenebuilder that the refered css-files are all in the project. I cleaned and rebuilt the project and tried j4launch again, but the results are the same.
This is the first line in the project controller.fxml (sa there seam to be issues with the UTF-8:
<?xml version="1.0" encoding="UTF-8"?>
This is the css code attached to the barchart:
.chart {
-fx-padding: 10px;
}
.chart-content {
-fx-padding: 30px;
}
.chart-title {
-fx-text-fill: #ffffff;
-fx-font-size: 1.6em;
}
.axis-label {
-fx-text-fill: white ;
}
.chart-legend {
-fx-background-color: #8c9cca;
-fx-padding: 20px;
}
.chart-legend-item-symbol{
-fx-background-radius: 0;
}
.chart-legend-item{
-fx-text-fill: #ffffff
}
.chart-plot-background {
-fx-background-color: transparent;
}
.chart-vertical-grid-lines {
-fx-stroke: #3278fa;
}
.chart-horizontal-grid-lines {
-fx-stroke: #8c9cca;
}
.chart-alternative-row-fill {
-fx-fill: transparent;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
and this is the css for the tables:
.table-view{
-fx-background-color: transparent;
}
.table-view{
-fx-border-color: red;
}
.table-view:focused{
-fx-background-color: transparent;
}
/* Spaltenköpfe
Struktur column-header-background -> column-header */
.table-view .column-header-background{
-fx-background-color: linear-gradient(#131313 0%, #424141 100%);
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header {
-fx-text-fill: bisque ;
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: White;
-fx-font-size: 14px;
}
.table-row-cell{
-fx-background-color: -fx-table-cell-border-color, #616161;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:odd{
-fx-background-color: -fx-table-cell-border-color, #424242;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:selected {
-fx-background-color: #CBDAFF;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-border-color: #b3c7dc;
}
.table-view:focused .table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
.table-view > .virtual-flow > .scroll-bar:vertical,
.table-view > .virtual-flow > .scroll-bar:vertical > .track,
.table-view > .virtual-flow > .scroll-bar:vertical > .track-background,
.table-view > .virtual-flow > .scroll-bar:horizontal,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track-background
{
-fx-background-color: transparent;
}
.table-view > .virtual-flow > .scroll-bar > .increment-button,
.table-view > .virtual-flow > .scroll-bar > .decrement-button {
-fx-opacity: 0;
}
No error messages. The windows programm is running bit the the stylesheets ara just partly applied (see above).

JavaFx context menu styling with css - background color on full width

I want to style my context menu but I can't get rid off white area between menu-item and context-menu border, see example.
rendered context menu with css styles
I want that color fils whole area up to context menu border like this
ecpected styling
My css styles
.context-menu {
-fx-background-color: #FFFFFF;
-fx-effect: null;
-fx-border-color: #D6D9DF;
-fx-border-width: 0.5;
-fx-border-radius: 4;
-fx-background-radius: 4;
-fx-background-insets: 0, 1;
}
.menu-item {
-fx-padding: 0;
-fx-pref-height: 28px;
}
.context-menu .separator {
-fx-padding: 0;
}
.menu-item .label {
-fx-font-size: 12px;
-fx-padding: 6 16 8 12;
-fx-text-fill: #2D3845;
}
.menu-item:focused {
-fx-background-color: transparent;
}
.menu-item:hover {
-fx-background-color: #EAECEF;
}
.menu-item:pressed {
-fx-background-color: #D6D9DF;
}
have you tried adding
yourcontextmenuname.getStyleClass().remove("context-menu");
and then change your CSS to refer yourcontextmenuname by ID. If that does not work do the same with menu-item.

Date picker popup window

I need an advice with the styling of date picker module in Java FX with an assistance of CSS classes.
It is specifically the popup window in which I used also the scenic view to look up the CSS code. But doesn't work in the popup window. I need a help how to style popup in the calendar view.
(using intelijIdea)
This is my code and the attached picture.
.date-picker .combo-box {
-fx-background-insets:0px ;
-fx-border-width: 0px;
}
.date-picker .text-field{
-fx-background-radius:0px ;
-fx-border-color: transparent;
}
.date-picker .arrow-button{
-fx-background-radius:0px ;
-fx-background-color: #232323;
}
.date-picker .arrow-button .arrow{
-fx-background-radius:0px ;
-fx-background-color: #1783CC;
}
.date-picker .arrow-button:hover .arrow{
-fx-background-radius:0px ;
-fx-background-color: #40a9ef;
}
.date-picker .button {
-fx-background-color: transparent;
-fx-border-color:transparent;
-fx-pref-height: 35px;
-fx-pref-width: 35px;
}
.date-picker .button:hover {
-fx-border-color:transparent;
-fx-pref-height: 35px;
-fx-pref-width: 35px;
}
.date-picker .button .arrow:pressed {
-fx-border-color:transparent;
-fx-pref-height: 35px;
-fx-pref-width: 35px;
}
.date-picker .cell {
-fx-background-color: #232323;
-fx-pref-width:20px ;
-fx-pref-height:25px ;
}
.date-picker .cell:hover {
-fx-background-color: #1783CC;
-fx-pref-width:20px ;
-fx-pref-height:25px ;
}
.date-picker .cell:focused {
-fx-background-color:#11659e;
-fx-pref-width:20px ;
-fx-pref-height:25px ;
}
.date-picker-popup {
-fx-border-color: #1783CC;
-fx-background-color: black;
}
Most style classes of the DatePicker popup can be found in the DatePickerContent.java or in one of the JavaFX's theme stylesheet.
For instance, if you're using the modena theme then you will find the these styleclasses in modena.css (from line 2934)
A quick workaround when using ScenicView would be to prevent the popup from being closed:
datePicker.setOnHidden(new EventHandler<Event>() {
#Override
public void handle(Event event) {
datePicker.show();
}
});

Styling ControlsFX Breadcrumb

I am using BreadcrumbBar from ControlsFX which works fine. The only problem i have is styling it to look like the image below. When using scenic view i saw that this component only has three classes .bread-crumb-bar, .button, .first. I tried adding border image like so, but did not appear.
/*
* ControlFX bread crumb
*
*/
.bread-crumb-bar {
}
.bread-crumb-bar .button {
-fx-padding: 0 3 0 3;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-border-image-source: url("../images/icon/crumb-focused.png");
-fx-border-image-slice: 1 10 1 10 fill;
-fx-border-image-width: 1 10 1 10;
-fx-border-image-repeat: stretch;
}
.bread-crumb-bar .button.first {
}
How can i style controlsfx breadcrumb to look like breadcrumb in the image
That's how i have solved it very similar. For the slash you need the image.
You need to fiddle around with padding and set your font-family appropriately. Didnt find a selector for the last/selected crumb.
bread-crumb-bar {
-fx-background-color: transparent;
}
.bread-crumb-bar .button {
-fx-padding: 8 12 8 20;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-content-display: left;
-fx-background-position: left center;
-fx-background-repeat: no-repeat;
-fx-background-image: url("../img/slash.png");
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-shape: null;
}
.bread-crumb-bar .first {
-fx-background-color: transparent ;
-fx-border-color: transparent;
-fx-font-size: 1.11em;
-fx-text-fill: #000;
-fx-background-image: null;
-fx-shape: null;
-fx-padding: 8 12 8 0;
}
.crumb {
-fx-text-fill: #000;
}
.crumb:hover,
.crumb:selected,
.crumb:focused
{
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: null;
-fx-font-size: 1.11em;
-fx-text-fill: rgba(0,0,0,0.5);
}

Resources