I have this piece of code, which works fine.
gamePane.setPrefSize(game.getMaxX(), game.getMaxY());
However, the background-image my gamePane (which is a Pane) has automatically scales with it, and I do not want this. I've searched for background scaling properties, but I couldn't find anything.
The image is originally applied with css.
Edit: I have found the solution!
What my css code was originally:
.background {
-fx-background-image: url("../images/background.png");
}
What I made it to be:
.background {
-fx-background-image: url("../images/background.png");
-fx-background-size: 1024 768;
-fx-background-position: center;
}
Related
I'm using JFoenix to have google material like elements in my JavaFX application.
I notice that in order to style JFoenix's elements with css, some commands are not the same as when using only JavaFX, so I'm not being able to style JFoenix's TabPane as I'd wish to.
At the moment my TabPane is as shown in the following image:
https://ibb.co/DtxVpJJ
And I wish to change those close tab buttons color as follows:
https://ibb.co/yRbDGnQ
I already tried a lot of solutions I found in the internet, but none of them is able solve the problem.
The main two solutions were:
Change directly the color of the button (https://blog.samirhadzic.com/2016/08/30/close-options-for-tabpane).
Hide the button and replace it with an icon.
(Javafx change Tab X to image icon from url)
Using the code to change the color, nothing happens:
.jfx-tab-pane > .tab-header-area > .headers-region > .tab:selected > .tab-container > .tab-close-button{
-fx-background-color:red;
}
Using the following code, the icon appears but still behind the white default cross:
.jfx-tab-pane .tab-close-button {
-fx-background-color: transparent;
-fx-shape:null;
-fx-background-image: url("../../assets/close-32.png");
-fx-background-size: 25;
-fx-background-repeat: no-repeat;
}
Result:
https://ibb.co/NSmWQ3m
This seems such a simple problem and I'm not being able to fix it. Any ideas?
As an example the TabsDemo of JFoenix in
JFoenix-master\demo\src\main\java\demos\components\TabsDemo.java
is used with the modification of closeable panes. The default is as follows:
The color of the close buttons can be changed to e.g. red with the following css:
.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
-fx-background-color: red;
}
Alternatively an icon can be used. In this case the css could be:
.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button {
-fx-background-image: url(<path to icon file>);
-fx-background-repeat: no-repeat;
}
.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
-fx-shape: "";
-jfx-size: 0;
-fx-background-color: Transparent;
}
The last section overwrites the default style, which defines the shape, size and color of the cross as SVG:
.jfx-tab-pane .headers-region .tab .tab-container .tab-close-button > .jfx-svg-glyph {
-fx-shape: "M810 274l-238 238 238 238-60 60-238-238-238 238-60-60 238-238-238-238 60-60 238 238 238-238z";
-jfx-size: 12;
-fx-background-color: rgba(255, 255, 255, .87);
}
A blueprint for the TabPane-css can be found in
JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-tab-pane.css
and
JFoenix-master\jfoenix\src\main\resources\com\jfoenix\assets\css\controls\jfx-button.css
section JFXTabPane.
This can be used to create more complex effects, such as changing the color/icon when selecting a pane etc.
I want to know how to change the inside border color that appears in the text area. I want to delete de blue transparent border inside the red border of the text area. I have checked the modena.css file but I can not find the solution.
What I have in my css file:
.text-area:focused {
-fx-background-color: white;
-fx-border-color: rgba(229,0,0,0.3);
}
TextArea has an additional border/background on its content. To change/get rid of it, you need an additonal style in your css.
Something like
.text-area:focused .content {
-fx-background-color: white;
}
not sure if that's safe enough: it is not documented (or at least I could not find any doc for it), only available as implementation, f.i. in the extracted modena.css
I use the following code to get rid of the auto-generated focus effects of a textarea:
* {
-fx-focus-color: transparent;
-fx-border-style: none;
}
or
.textarea {
-fx-focus-color: transparent;
-fx-border-style: none;
-fx-background-radius: 0.0px;
-fx-border-radius: 0.0px;
}
To get rid of all the default styling, which includes a rounded border...
I have a PieChart in my Java application which looks just like this:
A picture of a label (very hard to see):
Since the pie chart is rendered on a solid gray background, (which is basically the same color as the labels' text) the labels are virtually invisible. So, my question is, is there any CSS code that would change the color of a PieChart label's text, and if so, what is it?
For any future users below is answer with css code:
You can find more here : http://docs.oracle.com/javafx/2/charts/css-styles.htm
.chart-pie-label-line {
-fx-stroke: #8b4513;
-fx-fill: #8b4513;
}
.chart-pie-label { /*this is what you need for labels*/
-fx-fill: #8b4513;
-fx-font-size: 1em;
}
.chart-legend {
-fx-background-color: #fafad2;
-fx-stroke: #daa520;
}
So, the labels of a pie chart are Text objects, meaning that the CSS property -fx-text-fill does not work for them. Instead, the -fx-fill property changes their color.
Here is a screenshot of my Pie Chart with colored labels:
A simple line of CSS does the trick...
.chart-pie-label {-fx-fill: #ff4f0a;}
I want to add a -fx-border-radius to my HTMLEditor object, which unfortunatly is not working.
How can I achieve this? I already tried adding the HTMLEditor to a style altered Pane which also didnt work out.
Try to define also the border color and width as:
.html-editor {
-fx-border-color: blue;
-fx-border-width: 2;
-fx-border-radius: 1;
}
I'm using netBeans and SceneBuilder to create a small window with a few text editor options. One of the buttons I've included in the screen is a colorPicker that I have modified according to the following style;
<ColorPicker fx:id="clrFill" layoutX="119.0" layoutY="18.0" prefHeight="30.0" prefWidth="30.0" style="-fx-color-label-visible: false; -fx-color-rect-height: 3; -fx-color-rect-width: 17;" styleClass="button" stylesheets="/css/colorPickerStyle.css" />
Here is the current stylesheet being used;
.color-picker .color-picker-label .picker-color
{
-fx-alignment : bottom-center;
}
colorPicker.getStyleClass().add("button");
.color-picker{
-fx-background-image: "/gui_resources/fill.png"
-fx-background-size: 20 20;
-fx-background-position: top center;
}
My objective is to have an image display above the modified colorpicker 'rectangle' that displays the current color. Initially, I tried to treat the colorPicker as a Button class, as I have changed the style to a "button", but I was unable to place an image using the setGraphic method. As you can see from the css file, I have also tried to implement a background image unsuccessfully.
Here is a copy of what my screen currently looks like. The colorPicker is located beside the ComboBox dropdown.
In case you were trying to change the ColorPicker style class inside the css file, that won't work, you can't place code there.
Actually, to use an image, you don't need to change its style class, you just need to use url(image.png) (image placed in the same folder as FXML), or with a relative path to the FXML file like url(../image.png), or using # in case of an absolute path.
This should work:
.color-picker {
-fx-background-image: url(fill.png);
-fx-background-size: 20 20;
-fx-background-position: top center;
-fx-background-repeat: no-repeat;
}
.color-picker .color-picker-label .picker-color {
-fx-alignment : bottom-center;
}
You can check the <uri> format for the image here.