I know I can set a color by using the pressed pseudo selector:
myButton:pressed{}
Problem is, im trying to do this in code by overriding the css background color from my stylesheet by doing:
myButton.setStyle("fx-background-color: #FFF");
The latter fails do change the color though. Could it be that once ive set my stylesheet that I cant override it? How can I change the button color on click?
I had to do a similar thing(here is simplified, there is just the part of code which change the style to the button) and i did this, i hope it will be helpful to you
button.setOnAction((ActionEvent e) -> {
button.getStyleClass().removeAll("addBobOk, focus");
//In this way you're sure you have no styles applied to your object button
button.getStyleClass().add("addBobOk");
//then you specify the class you would give to the button
});
CSS:
.addBobOk{
-fx-background-color:#90EE90;
-fx-background-radius: 5,5,4;
-fx-background-insets: 0 0 -1 0,0,1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-alignment: center;
}
.addBobOk:hover{
-fx-background-color:#64EE64;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-alignment: center;
}
.busy{
-fx-background-color:#B3B3B3;
-fx-text-alignment: center;
}
.busy:hover{
-fx-background-color:cdcbcb;
-fx-text-alignment: center;
}
Styling FX Buttons with CSS show some applicable style options for a button.
"fx-background-color" is just a typo. It needs to be "-fx-background-color".
To use the styles you need to get the style names and values correct and separate them with semicola. The following approach does this systematically:
String bstyle=String.format("-fx-text-fill: %s;-fx-fill: %s;-fx-background-color: %s;",textFill,fill, bgColor);
button.setStyle(bstyle);
Related
ListView listView = new ListView<>();
//something like
listview.removeBorder or listview.setborder(Empty border)??
Well, it depends on the theme you are using in your application.
In Modena (default JavaFx 8+ theme), ListView borders and background are implemented as a background layers, and each layer is just a plain color fill:
.list-view {
-fx-background-color: -fx-box-border, -fx-control-inner-background; //this line
-fx-background-insets: 0, 1;
-fx-padding: 1;
}
So, to remove borders you need to remove the first color fill (-fx-box-border) and keep the second one (-fx-control-inner-background, which is color constant with a value #F4F4F4 and represents ListView background color):
listView.setBackground(
new Background(new BackgroundFill(Color.valueOf("F4F4F4"), null, null))
);
and you'll probably want to remove that 1px padding that was used for borders:
listView.setPadding(new Insets(0));
I have a toggle button in my program that starts/stops a script. I would like for this button to be green and say "START" when the button is not selected, and red and say "STOP" when it is selected. More importantly, I would like the unselected hover color to be a slightly darker version of the original green, and the selected hover color to be a slightly darker version of the red color. My current CSS for this button looks like this:
#startStopButton {
-fx-border-color:#d4d4d4;
-fx-background-color:#85eca5;
-fx-background-image: url("startButton.png");
-fx-background-size: 50px;
-fx-background-repeat: no-repeat;
-fx-background-position: 80% 50%;
-fx-alignment: CENTER_LEFT;
-fx-effect: dropshadow(three-pass-box, #e7e7e7, 15, 0, 0, 0);
}
#startStopButton:hover {
-fx-background-color:#80dc9c;
}
#startStopButton:selected{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
#startStopButton:selected:focused{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
Currently, this will work fine, except for when the button turns red. In this case, there is no hover effect. Within my FXML controller, there is a function that is activated every time this button is clicked:
private void startStopClick()
{
if(startStopButton.isSelected())
{
startStopButton.setText(" STOP");
// startStopButton.setStyle()
}
else {
startStopButton.setText(" START");
}
}
Is there any way to 1) set the button text within CSS so that I can leave that out of my controller?
2) Get the current toggle button state in CSS, so that I can have multiple hover effects. For example, something like this:
#startStopButton:unselected{
-fx-background-color: #ff6060;
-fx-text:"STOP";
}
If there is no way to do this in CSS, can I set the hover styles in the Java code in the FXML controller?
CSS properties are only available for the look of nodes. With a few exceptions the basic JavaFX nodes don't allow you to specify content via CSS. The text property of buttons is no exception; it cannot be set using CSS.
As for the colors: The rules occuring last override values assigned by rules with the same precedence occuring before them. This means the background color assigned by the rules for #startStopButton:selected and #startStopButton:selected:focused always override the color #startStopButton:hover assigns.
Since in both cases you want a darker color when hovering, the derive function and a lookedup color may work for you.
Example
#Override
public void start(Stage primaryStage) {
ToggleButton btn = new ToggleButton();
btn.getStyleClass().add("start-stop");
btn.textProperty().bind(Bindings.when(btn.selectedProperty()).then(" STOP").otherwise(" START"));
Pane p = new Pane(btn);
Scene scene = new Scene(p);
scene.getStylesheets().add("style.css");
primaryStage.setScene(scene);
primaryStage.show();
}
style.css
.start-stop.toggle-button {
base-color: #85eca5;
-fx-background-color: base-color;
}
.start-stop.toggle-button:selected {
base-color: #ff6060;
}
.start-stop.toggle-button:hover {
-fx-background-color: derive(base-color, -20%);
}
If you cannot use derive since you need to specify different colors for all 4 states you could still rely on looked-up colors to avoid relying on the rule ordering:
.start-stop.toggle-button {
unselected-color: blue;
selected-color: yellow;
-fx-background-color: unselected-color;
}
.start-stop.toggle-button:hover {
unselected-color: red;
selected-color: green;
}
.start-stop.toggle-button:selected {
-fx-background-color: selected-color;
}
I am trying to change the background color of my TextField "colorBox0" to "value0" but it gets rid of the border.
Here is a simplified version of my code:
static Paint value0 = Paint.valueOf("FFFFFF");
TextField colorBox0;
colorBox0.setBackground(new Background(new BackgroundFill(value0, CornerRadii.EMPTY, Insets.EMPTY)));
Any help is very much appreciated
Thank you
I found that you can construct a string of css code out of a string and a variable by using the to string method and the substring method like this:
colorBox0
.setStyle("-fx-control-inner-background: #"+value0.toString().substring(2));
Looking at the (shortened) default JavaFX styles for the TextField explains a lot:
.text-input {
-fx-background-color: linear-gradient(to bottom, derive(-fx-text-box-border, -10%), -fx-text-box-border),
linear-gradient(from 0px 0px to 0px 5px, derive(-fx-control-inner-background, -9%), -fx-control-inner-background);
-fx-background-insets: 0, 1;
-fx-background-radius: 3, 2;
}
So the background is a layered background including the border. This technique is used a lot throughout JavaFX. But it is very easy to modify just one color.
First we need to assign a new custom style class to our TextField:
TextField textField = new TextField();
textField.getStyleClass().add("custom");
and the CSS file:
.custom {
-fx-control-inner-background: orange;
}
As you can see, you do not have to override all styles of the textfield, it is sufficient to only override the color variable used for the background.
Try to set the color using CSS:
TextField colorBox0;
colorBox0.setStyle("-fx-background-color: white;");
Elegant solution with colour translation:
static Paint black = Paint.valueOf(Integer.toHexString(Color.BLACK.hashCode()));
TextField textfield;
textField.setStyle(
"-fx-control-inner-background: #"+black.toString().substring(2));
I have used Android-Iconics library, developed by Mike Penz for my Javafx project.
Code:
Tab tab1 = new Tab();
FxIconicsLabel labelDefault
= (FxIconicsLabel) new FxIconicsLabel.Builder(FxFontAwesome.Icons.faw_user)
.size(18)
.color(Color.web("#555555"))
.build();
tab1.setGraphic(labelDefault);
tab1.setText(" Customer");
CSS:
.tab:selected {
-fx-border-color: #ddd #ddd #fff #ddd;
-fx-border-radius: 5 5 0 0;
-fx-text-fill: #555555;
-fx-font-weight: bold ;
}
I want to change the icon i.e (labelDefault) COLOR using css, when tab is selected.
If you check Oracles CSS Reference for JavaFX, you can see that the TabPane contains a Tab which contains a Label. On the Label you can set the graphics:
-fx-graphic: <uri>;
It probably might be easiest to define separate classes for the different states of the tab and then assign it to the label.
Hi want to do a menubar like Twitter where the icon on the menu button, have there color changed on hover.
There is a way to do that in JavaFX + CSS ? (An other way than just change the png file)
that will look like that
.button:hover {
-fx-text-fill: red;
-fx-border-width: 0 0 5 0 ;
-fx-border-color:red ;
-fx-png-on-the-button-color: red; //Need the way to do something like that
}
Ugly solution of myself
.button:hover ImageView {
-fx-effect: innershadow( gaussian , red , 7 , 1 , 1 , 1 );
}
with this innershadow of the color you want, the result is pretty cool. that work fine !
You cannot change the color of the loaded image. But instead you can just change the image, which has the color prerendered that you want.
-fx-graphic: url(http://example.com)
See http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#labeled.