I want to assign a style class to an element.
I have a css:
.text-field{
-fx-background-color: #333333;
-fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
-fx-text-fill: white;
-fx-prompt-text-fill: white;
-fx-font-family: Trebuchet MS;
-fx-font-size: 14px;
}
.text-field:focused{
-fx-focus-color: white;
-fx-prompt-text-fill: white;
-fx-highlight-fill: grey ;
}
And the java code I´m using:
JFXTextField textField = new JFXTextField();
textField.getStylesheets().add(this.getClass().getResource("/css/TextField_Style_Sheet.css").toExternalForm());
textField.getStyleClass().clear();
textField.getStyleClass().add("text-field");
The problem I´m having is that the ":focused" style is not being applied to this element.
What am I doing wrong?
Already tested it using directly scenebuilder in the element and it seems that the setting in "Focus Color" and "UnFocus Color" options override the text-field:focused style.
As the JFXTextField is created in runtime it seems the default Focus Color overrides the css text-field:focused style.
How can this be solved?
You replace all the style classes of the node with a single style class: text-field.
Take a look at modena.css to see that the style of TextFields is defined in rules for style class text-input.
These rules are also the only place where the CSS variable -fx-focus-color is used for TextFields. Since you make sure those rules are no longer applied you don't see any visible effect when modifying the -fx-focus-color variable.
If you do want to keep the parts of the old style you should not remove the style classes that are added when creating the node and modify properties that don't suit your needs in your own style. If you clear the style classes you're responsible for rebuilding the look from scratch.
Change focused to hover
like this:
.text-field:hover {
..}
Related
I' m trying to use CSS in JAVAFX application. Is there a way in the CSS file to make use of some kind of inheritance?
For example I have one style called "redline":
.redline{
-fx-stroke:red;
-fx-stroke-width:5px;
}
Can I create a second style "greenline":
.greenline{
-fx-stroke:green;
}
in a way that it inherits from "redline". Say, something like:
greenline extends redline
so that the "green" lines have a strokewidth of 5px?
Thanks in advance!
You need to make a make a more specific selector available. You could e.g. add a style class:
Add the style class line to all lines and then also add the red or blue style classes to the lines that should get those colors.
Example
Java Code
Line redLine = ...
redLine.getStyleClass().add("line");
Line blueLine = ...
blueLine.getStyleClass().add("line");
Line blackLine = ...
blackLine.getStyleClass().add("line");
// add color related classes
redLine.getStyleClass().add("red");
blueLine.getStyleClass().add("blue");
...
CSS
.line {
-fx-stroke: black; /* define standard line color */
-fx-stroke-width: 5px;
}
.line.blue { /* rules for nodes that have style classes line AND blue */
-fx-stroke: blue;
}
.line.red { /* rules for nodes that have style classes line AND red */
-fx-stroke: red;
}
In CSS more specific rules will always overwrite properties of less specific rules. In this case .line is less specific than .line.blue and .line.red since the former selector contains only a single class instead of 2.
Note: There is inheritance in CSS, but properties are inherited from the parent in the scene, not from the base class in the java code.
in an another question I find this possibilty with css
.menu .label
{
-fx-text-fill: black;
}
but it doesn't work with the setStyle method
menu.setStyle("-fx-text-fill: black");
The CSS applies the style to each Label below a Menu.
Whereas menu.setStyle(...) will apply only to the menu itself. And the menu itself does not have a -fx-text-fill property.
If you change your CSS to:
.menu
{
-fx-text-fill: blue;
}
then it will be the same as your code ... and also stop to show the menu in color.
Menus don't support setting their font color like this. The CSS solution relies on an implementation detail.
If you don't want to do that you must use menu.setGraphic(...) to set a node, e.g:
Menu menuFile = new Menu("");
Label t = new Label("File");
t.setStyle("-fx-text-fill: blue;");
menuFile.setGraphic(t);
I have a CSS file that styles my application MusicPlayer. I'm trying to style my array of javafx.scene.text.Text named sliderText. However nothing works. even when i use .text it styles the text of everything else EXCEPT my array of sliderText. any ideas how to get this working?
thanks
heres my declaration of slider text =
public static javafx.scene.text.Text[] sliderText = new Text[10];
also general question, how do i use .setID() in both javafx and CSS?
I've tried doing the following:
.text {
-fx-font-size: 32px;
-fx-font-family: "Arial Black";
-fx-fill: #818181;
-fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}
And that changes literally everything except what i want it to
By default, Text objects have no style class attached to them. (Only Controls have default style classes set.) So your rule (which applies to the style class "text"), won't apply to your text objects.
The basic CSS tutorial for JavaFX covers all this, but briefly you need to do something like
for (Text text : sliderText) {
text.getStyleClass().add("text");
}
either in the constructor or in the start() method or an initialization method (you haven't shown enough context for your code for me to know how your application is set up).
For your question:
how do i use .setID() in both javafx and CSS?
you can do
someNode.setId("specialNode");
and then in CSS
#specialNode {
/* style rules for specialNode here.... */
}
Ids should be unique to a single node within any scene graph.
I use the following CSS to change the font of some components which are placed on a custom JavaFX AnchorPane, defined as fx:root. But the font-size remains default.
* {
-fx-font-family : Arial;
}
.label, .textField, .textfield, .checkBox, .text{
-fx-font-size: 18;
}
I got that I should change them using the ids of all inner components but it's not a good idea, because it results in redundant code.
Then I got that applying it on the main style class, it will work. But the sad story is that * can't be overriden. (I have defined * selector in a global css class for my whole application.
Try .root instead of *.
For the font size, some of your class names are wrong. Try
.label, .text-field, .check-box, .text {
-fx-font-size: 18pt ;
}
Style classes are documents in the CSS Reference Guide
Note that Text nodes have empty style class, so you need to explicitly set the style class for your text nodes.
I'm trying to customize a combo box in JavaFX through css. I can't customize the "arrow button" on the right (I want it to disappear, or to have a custom graphic, for example).
I have been checking the default caspian.css, but no matter what modifications I do to the .combo-box section, the arrow button is not affected.
Any idea of where this can be edited?
Using the following CSS in the style sheet will get rid of all of the ComboBox arrows
.combo-box .arrow, .combo-box .arrow-button{
-fx-background-color: transparent;
}
Use the CSS Analyser option in Scenebuilder to get the CSS of any node that you want to play with
After that just select any node and you'll see all the classes which you can modify using CSS.
Now that I know the class I can make my changes accordingly in my CSS file
.combo-box{
-fx-border-color:#E6E6E6;
-fx-border-style:solid;
-fx-border-width:1;
}
.combo-box .arrow{
-fx-background-color:#2478E9;
}
.combo-box .arrow-button{
-fx-background-color:white;
-fx-border-style:none;
}
.combo-box .arrow-button{
-fx-background-color:white;
}
.combo-box .list-cell{
-fx-background-color:white;
}
Which gives me an end result like this.
For more advanced analysis of CSS and other Events occurring when the application is running, you can try Scenic View.
I wanted it to disappear too. But nothing worked for me on javafx 8 until I tried the following:
css:.combo-box.REFERENCEDONLY .arrow-button {
-fx-padding: 0 0 0 -7;
}
basically it says: use negative padding on the arrow-button's left side to effectively shrink it.
javafx code:myCombobox.getStyleClass().add("REFERENCEDONLY");