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;}
Related
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 table in a JavaFX application where I want to be able to change the color of the selected element with a color picker.
When I try the following:
menuBar.setStyle("-fx-background-color:" + settings.getRgbString(memberView.colorPicker.getValue()));
There is no way to add the style just to the selected item. I tried to use a pseudo class but I can't understand how to do it. How do I solve this?
Note: changing the background of buttons works fine with this method.
try to add a css file to the project and put
.table-row-cell:selected .table-cell {
-fx-background-color: #FF9034;
-fx-text-fill: #FFF;
}
What is normal background color and border color on toggle button? example:
i.toggle11.setOnAction(e->{
if(i.toggle11.isSelected()){
i.toggle11.setStyle("-fx-background-color:red");
i.toggle12.setStyle("-fx-background-color:white");
i.toggle13.setStyle("-fx-background-color:white");
}
else {
i.toggle11.setStyle("-fx-background-color:white");
}
});
I want to after this action to put other toggles 'normal color'(same when togglebutton was created)
To answer how to add/remove styles
The simplest approach if you color your ToggleButtons by adding a CSS styleclass, then when it is not needed anymore you remove them, therefore it will have the same style as before your formatting.
Example
Code to add
i.toggle11.setOnAction(e->{
if(i.toggle11.isSelected()){
i.toggle11.getStyleClass().add("red-button");
i.toggle12.getStyleClass().add("white-button");
i.toggle13.getStyleClass().add("white-button");
}
else{
i.toggle13.getStyleClass().add("white-button");
}
});
Then Code to remove
i.toggle11.getStyleClass().removeAll("red-button", "white-button");
CSS
.red-button {
-fx-background-color: red;
}
.white-button {
-fx-background-color: white;
}
Just make sure that you have added the stylesheet which contains the CSS styles like:
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
But
I don't know what you want to achieve, but if you want to just simply color your ToggleButton when it is selected, you can also overwrite .toggle-button:selected in your stylesheet and no other styling needed:
.toggle-button:selected {
-fx-background-color: red;
}
It is always the simplest way to overwrite existing CSS classes and pseudoclasses. This is a good starting point to learn working with ToggleButtons and to style them: Using JavaFX UI Controls.
You can for example check the available style classes for .toggle-button here and also you can check the CSS reference guide.
I have some classical Button in JavaFX with a box containing some text.
I need buttons without that box, just the text, and when I hover the button or click on the button with mouse, it shall change its color to different.
In JavaFX styling is done by using CSS.
.button{
-fx-border-color: transparent;
-fx-border-width: 0;
-fx-background-radius: 0;
-fx-background-color: transparent;
-fx-font-family:"Segoe UI", Helvetica, Arial, sans-serif;
-fx-font-size: 1em; /* 12 */
-fx-text-fill: #828282;
}
.button:focused {
-fx-border-color: transparent, black;
-fx-border-width: 1, 1;
-fx-border-style: solid, segments(1, 2);
-fx-border-radius: 0, 0;
-fx-border-insets: 1 1 1 1, 0;
}
.button:pressed {
-fx-background-color: black;
-fx-text-fill: white;
}
Add this code to a CSS file, save it to the directory where the source file of the control exists which contains you buttons. Then in this class:
getStylesheets().add(getClass().getResource("nameofyourcssfile.css").toExternalForm());
Then all of the buttons that that object contain will use this style-classes.
Modification on your need is straightforward.
Good tutorial to start:
http://docs.oracle.com/javafx/2/css_tutorial/jfxpub-css_tutorial.htm
JavaFX has a Hyperlink control which basically has all the functionality you are looking for. It fires ActionEvents in the same way as a button:
Hyperlink button = new Hyperlink("Some text");
button.setOnAction(e -> System.out.println("Hyperlink clicked"));
Like a link in a web page, it will appear in a different color if it has been "visited", i.e. if an action has been fired on it.
This is how you can do it in scenebuilder
Choose the button by clicking on it.
Then in properties->Style Choose "-fx-background-color" and put value as " transparent"
Like this
For anyone who got here looking for a way to remove the default button background, it can be done like this:
button.setBackground(null);
If you want to restyle the button I'd suggest using css like the answer above.
I've got a Button in my FXML file and i give a style to it by below CSS
.button {
-fx-background-color: linear-gradient(#ff5400, #be1d00);
-fx-background-radius: 30;
-fx-background-insets: 0;
-fx-text-fill: white;
}
as you can see the button has a new awesome style, but whenever i click on it, it remains as like as before and you can't understand is it clicked or not...
As I searched, I found one solution in this link: Pressed CSS, but if you notice it is The CSS that is used by Web Browsers and JavaFX does not support it.
so what is the solution? I want my button changes its appearance when the users hit or click it.
You need to add the psuedoclass state pressed to you css and add new css to it, which will differentiate your current button css with that when pressed :
.button:pressed {
// Your new css
}
For changing the style while hovering the button use :
.button:hover {
// Your new css
}
For better understanding of what style you can add for styling the button, you can go through How to make a button appear to have been clicked or selected?
for arrayLists on javaFX, try this on the CSS to change colors on mouse click:
.list-cell:selected { -fx-background-color: yellow; }