I have got this code:
private void createAndAddCommonInformationSection(){
Text text = new Text("CommonText");
gridPane.add(header);
}
The should appear in white color, so I have a CCS-file as follows:
.root {
-fx-base: rgb(50, 50, 50);
-fx-background: rgb(50, 50, 50);
-fx-control-inner-background: rgb(50, 50, 50);
}
.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));
}
.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));
}
.tool-bar:horizontal {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,+50%), derive(-fx-base,-40%), derive(-fx-base,-20%));
}
.button {
-fx-background-color: transparent;
}
.button:hover {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: -fx-hover-base;
}
.table-view {
-fx-table-cell-border-color:derive(-fx-base,+10%);
-fx-table-header-border-color:derive(-fx-base,+20%);
}
.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;
}
.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));
}
.separator-label {
-fx-text-fill: orange;
}
.text{
-fx-text-fill: white;
}
Everythin is working fine with the CSS-file, except the the color of the text in my code snippet does not appear in the expected color.
I have already tried
-fx-fill: white;
and
-fx-fill-text: white;
but nothing helps.
What am I doing wrong?
According to the documentation, Text nodes have no default style class. so you need
text.getStyleClass().add("text");
in order for the text node to match the CSS selector. Then
.text {
-fx-fill: white ;
}
will work.
Typically you would use a Label along with the fx-text-fill property if you want to style it with CSS, though adding a style class manually to a Text node should work.
Related
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;
}
Every time I drag a column, I get a blue line across the whole column. I know I can remove it by setting -fx-background-insets: 0;, but I can't figure out where to put it. This line appears only when I'm dragging it, if I'm not doing it, everything is fine.
My current CSS is as follows:
.table-view .column-header,
.table-view .filler,
.table-view .column-header-background .show-hide-columns-button {
-fx-background-color: white;
}
.table-view .column-header {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
}
.table-view .column-header-background {
-fx-border-color: grey;
-fx-border-width: 0 0 1 0;
}
.table-view .show-hide-column-image {
-fx-background-color: black;
}
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-color: green;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected {
-fx-background-color: darkgrey;
-fx-table-cell-border-color: grey;
}
.table-cell {
-fx-border-color: grey;
-fx-border-width: 0 1 0 0;
-fx-text-fill: black;
}
.table-row-cell:focused {
-fx-background-insets: 0;
}
.table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
The only thing I see about this "drag-event" in modena.css is this:
/* When a column is being 'dragged' to be placed in a different position, there
is a region that follows along the column header area to indicate where the
column will be dropped. This region can be styled using the .column-drag-header
name. */
.table-view .column-drag-header,
.tree-table-view .column-drag-header {
-fx-background: -fx-accent;
-fx-background-color: -fx-selection-bar;
-fx-border-color: transparent;
-fx-opacity: 0.6;
}
/* Semi-transparent overlay to indicate the column that is currently being moved */
.table-view .column-overlay,
.tree-table-view .column-overlay {
-fx-background-color: darkgray;
-fx-opacity: 0.3;
}
I tried putting it in both places like so:
.table-view .column-drag-header,
.table-view .column-overlay {
-fx-background-insets:0;
}
But it had no effect.
I thought maybe this "region" is the one that has insets and it's because of it that the blue line appears, but I couldn't find where it is or at least what's it called in the CSS.
Edit: changed the question to "changing the color" instead of removing it, since it seems like a better approach. Solution for changing the color was provided by kleopatra in the comments.
.table-view .column-resize-line {
-fx-background-color: red;
}
From Modena.css, the CSS class .column-resize-line can be used for both TableView and TreeTableView:
/* The column-resize-line is shown when the user is attempting to resize a column. */
.table-view .column-resize-line,
.tree-table-view .column-resize-line {
-fx-background: -fx-accent;
-fx-background-color: -fx-background;
-fx-padding: 0.0em 0.0416667em 0.0em 0.0416667em; /* 0 0.571429 0 0.571429 */
}
I have created my application toolbar with application.e4xmi.
And thereafter I tweaked my .css as below
/* JavaFX CSS - Main CSS-File */
.root {
-fx-base: rgb(222, 234, 247);
-fx-background: rgb(222, 234, 247);
}
.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));
}
.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));
}
.tool-bar > .container{
}
.tool-bar:vertical {
}
.tool-bar:horizontal {
-fx-background: #ececec;
-fx-base: #ececec;
}
.tree-view{
-fx-focus-color: #f21a3f;
}
/*.table-view {
-fx-control-inner-background: rgb(222, 234, 247);
-fx-table-cell-border-color:derive(-fx-base,+10%);
-fx-table-header-border-color:derive(-fx-base,+20%);
} */
.split-pane:horizontal > * > .split-pane-divider {
-fx-control-inner-background : rgb(255, 255, 255);
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;
}
.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));
}
.separator-label {
-fx-text-fill: orange;
}
Now I am trying to change background color of high-lighted area of toolbar in my eclipse RCP application.
Any suggestion would be appreciated.
You can use a define a CSS and add this CSS to your product:
.MTrimBar {
background-color: #000000;
}
So I've been working for a while on a JavaFx application (for internal use of my company), which works great, but whenever I'm showing it to my colleagues, i always get the response "the application is great, but why is it so ugly?" , so i wend to look for examples of styled Javafx charts, and except of the Oracle documentation, i really found nothing, for buttons Oracle published a very nice post- here, but nothing similar for JavaFx charts.
I already looked for examples on Google's image gallery, but except for Oracle documentation, there's almost nothing.
Could some one be kind and post a nice CSS code that would end this embarrassment?
I'm attaching my current CSS code, Unfortunately i don't have enough reputation for posting images (snap of the application).
Any suggested Modification of my current CSS will be great just as well.
#appContainer {
-fx-background-color: linear-gradient(to bottom, #464646, #5f5f5f);
-fx-spacing:30;
}
.button {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 6;
-fx-padding: 12 30 12 30;
-fx-text-fill: white;
-fx-font-size: 12px;
-fx-spacing:30;
}
.button:hover{
-fx-background-color: linear-gradient(black, white);
}
.combo-box {
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-background-insets: 0,1,2,3;
-fx-background-radius: 3,2,2,2;
-fx-padding: 12 30 12 30;
-fx-text-fill: -fx-text-base-color;
-fx-font-size: 12px;
}
.combo-box:hover{
-fx-background-color: white;
}
#buttonMenuContainer {
-fx-background-color: linear-gradient(to bottom, #737373, #595959);
-fx-padding: 10px;
-fx-spacing:30;
}
.chart-title {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-text-fill: #F8F8F8 ;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
.chart-alternative-row-fill {
-fx-fill: transparent;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
.chart-vertical-grid-lines {
-fx-stroke: transparent;
}
.chart-horizontal-grid-lines {
-fx-stroke: transparent;
}
.axis {
-fx-text-fill: #4682b4;
}
.chart {
-fx-padding: 10px;
-fx-background-color:
#000000,
linear-gradient(#7ebcea, #2f4b8f),
linear-gradient(#426ab7, #263e75),
linear-gradient(#395cab, #223768);
-fx-text-fill: white;
}
.chart-plot-background{
-fx-padding:0px;
-fx-font-family: Verdana;
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
}
.chart-content{
-fx-background-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-padding:30px;
-fx-border-color: linear-gradient(to bottom right, lightsteelblue, white);
-fx-border-width: 5;
-fx-border-insets: -5;
}
.CategoryAxis{
-fx-color:black;
}
.chart-legend{
-fx-background-color:white;
}
.axis {
-fx-font-size: 1.4em;
-fx-tick-label-fill: black;
-fx-font-family: Tahoma;
-fx-tick-length: 20;
-fx-minor-tick-length: 10;
}
.chart-series-line {
-fx-stroke-width: 2px;
}
.default-color0.chart-series-line { -fx-stroke: black; }
.default-color1.chart-series-line { -fx-stroke: white }
.default-color2.chart-series-line { -fx-stroke: blue }
default-color0.chart-line-symbol { -fx-background-color: black, white; }
.default-color1.chart-line-symbol { -fx-background-color: white, white; }
.default-color2.chart-line-symbol { -fx-background-color: blue, white; }
.chart-legend { -fx-background-color: linear-gradient(gray, white);
-fx-font: Arial;
-fx-font-size: 20px;
-fx-text-fill: #F8F8F8 ;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
.pane {
-fx-background-color: #8fbc8f;
}
You can lookup the default styling in caspian.css, if you want to know what's possible to style. As to how you should style it, it depends on what you find pretty, so I'd advise you to look up a chart on google that you like and reconstruct it.
I want to have a textfield with three different borders for three cases:
a white border when not hovered or focused
a grey border when hovering
a blue border when focused and typing
I started like this:
#custom-text-field {
-fx-border-width: 2;
-fx-border-color: white;
}
#custom-text-field:hover{
-fx-border-width: 2;
-fx-border-color: #909090;
}
#custom-text-field:focused{
-fx-border-width: 2;
-fx-border-color: #0093EF;
}
The problem is that the border for focusing never shows up. How do it set it correctly?
I use it like this
.custom-text-field {
-fx-background-color:
#FFFFFF,
#FFFFFF;
-fx-background-insets: 0, 2;
-fx-background-radius: 0, 0;
}
.custom-text-field:focused {
-fx-background-color:
#0093EF,
#FFFFFF;
}
.custom-text-field:hover {
-fx-background-color:
#909090,
#FFFFFF;
}
.custom-text-field:focused:hover {
-fx-background-color:
#0093EF,
#FFFFFF;
}