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.
Related
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 {
..}
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.
Recently I found the way to change color of GtkToggleToolButton text with a CSS sheet (Gtk 3.20):
#histoToolGreen label {
color: green;
}
#histoToolBlue label {
color: blue;
}
To do that, I changed the color of the label rather than that of the button. It works well. But now I want doing the same in C code. So I write :
gtk_css_provider_load_from_data(provider, "#histoToolRed label {color: red;}", -1, NULL);
gtk_style_context_add_provider(
gtk_widget_get_style_context(lookup_widget("histoToolRed")),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
But that does not work. I also tried, with no success:
gtk_css_provider_load_from_data(provider, "* {color: red;}", -1, NULL);
and many other things.
Can someone tell me how to change color of GtkToggleToolButton text in C code using CSS provider ?
I've made no progress trying to add CSS styling at the widget level. I've only managed to get it to work by adding a style sheet at the application level with gtk_css_provider_get_default.
What I expected when I did something similar to what you've done is that the style would be applied to the widget I attached it to, and all of it's children. What I found is that style is only applied to the individual widget that got the provider added to it.
is there a possibility to refer to an anchor pane in css?
If the anchor pane happens to be the root, than it's ok:
.root{
-fx-background-image: url("xxx.yy");
}
It works. But if not, then how to do this? I tried .anchor-pane{}, it didn't work. Then I read, that anchor pane has everything that Pane has. So I tried .pane{} too... It didn't work.
How can I set the background to a none root anchor pane?
Thank you!
You can always assign a css class and add it to the AnchorPane explicitly
anchorPane.getStyleClass().add("pane");
In your css :
.pane{
-fx-background-image: url("xxx.yy");
}
You can perform the same by adding a css id
anchorPane.setId("pane");
In you css :
#pane{
-fx-background-image: url("xxx.yy");
}
This answer is the same as Itachi's I just wrote it at the same time..
You use CSS selectors in a CSS stylesheet to select nodes.
A pane is a node. A node can have a css id set on it node.setId("xyzzy-id"), or it can have style classes set on it node.getStyleClass().add("xyzzy-class").
For the provided examples you could select the pane in either of these ways:
Select by ID:
#xyzzy-id {
-fx-background-color: palegreen;
}
Select by Class:
.xyzzy-class {
-fx-background-color: papayawhip;
}
You can also set FXML attributes on the node for the id and style class (rather than doing this in code as explained above). SceneBuilder has fields for this, so if you are writing FXML using SceneBuilder, just fill in the appropriate fields and it will add the required attributes to your FXML file.
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.