I made a CSS
.button{
-fx-pref-height: 28px;
-fx-pref-width: 100px;
}
and I want to add this particular CSS to all the scenes in my application. How am I suppose to so? Glad for any help.
To be accurate, I have a radio button in one scene and by clicking it I want all the buttons in different scenes present in my application changes according to this CSS.
Put this CSS into an external stylesheet and include it in each scene.
Scene scene = new Scene(new Group(), 500, 400);
scene.getStylesheets().add("path/stylesheet.css");
See the documentation here.
Related
I want user to select a theme which he wants to apply to the document.
So i have created a popup dialog which has multiple themes which are qradiobutton. But I want to display only icons and remove circle from the widget.
I have tried visible:hidden for the radio button but that didn't worked.
If you want to customize QRadioButton with style-sheets I suggest you check the reference documentation: https://doc.qt.io/qt-5/stylesheet-reference.html#qradiobutton-widget
You should also find useful the examples given in Qt documentation as it shows how to replace the check indicator by different images:
QRadioButton::indicator {
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked {
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/images/radiobutton_unchecked_hover.png);
}
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
If you do this yo can just use the indicator to display the icon and leave the QRadioButton label empty.
However, I have to warn you, depending on which QStyle you are using, it could happen that using style-sheets destroys completely the style of a component. A general example is: you are using a style where buttons have round corners, you use style-sheets to change the font of the button and as a result the button does not have round corners anymore. This is caused by incompatibilities between some QStyle and the style-sheet mechanism. If you do not want to make a multi platform app, it might not be an issue as you will use only one style, but if you make an multi platform app, you have to check every possible style you platform can have on the different platforms.
So if you want to have a QRadioButton without indicator and not use style-sheets, you can do it in C++ directly by subclassing QAbstractButton. Just make sure you set your class to be autoExclusive so that is will behave like a radio button.
would you try this? ( visible => visibility )
input[type="radio"] {
visibility: hidden;
}
or
input[type="radio"] {
display: none;
}
I am trying to set the size of a radio button indicator with a style sheet like so:
QRadioButton::indicator {
width: 25px;
height: 25px;
}
In the designer, this shows up correctly. However, when I actually run the app the indicators revert to the normal size. All other entries in the style sheet show up correctly at runtime. Why is this portion of the stylesheet working in the designer but not at runtime? How can I fix it? There are no other stylesheets in my app that that affect radio buttons.
How the radio button appears in designer:
How the radio button appears at runtime:
The sizing got weird, sorry. But you can clearly see that the indicator is much larger in relation to the text in the pic taken from the designer.
There are multiple things you need to look for when using designer.
Now to quick check.
//Add this lines and try again
QRadioButton *obj = new QRadioButton()
obj->setObjectName("test");
//If your using qss/css file for styling things...
#test QRadioButton::indicator {
width: 25px;
height: 25px;
}
Few more inputs...
Font size of text attached to QRadioButton also check changing by some more pixel and check what sort of changes shown to your widget.
Hope this will help you.
In that picture, I want to make "file" "edit" "view" bold. I am new to JavaFX please tell me in detail. I am using scene builder but in that, it is not there. thanks in advance
Using CSS:
.menu-bar .menu .label {
-fx-font-weight: bold;
}
Since you say you're new to JavaFX:
JavaFX CSS Reference Guide
A helpful resource for looking up the CSS structures of various JavaFX Nodes
Scene Builder CSS Properties/Analyzer
Oracle documentation on using Scene Builder's CSS features. Hasn't been, and might never be, updated for JavaFX 9.
While Oracle no longer maintains Scene Builder I believe the documentation should be helpful.
I am pretty new to programming and working on a little program where i use a jfx slider to control my volume. I used CSS to change the color of the thumb. in the slider. But now i want to be able to click on my JFXToggleButton to switch theme of my program. So i want to be able to switch the color of the thumb from #8faeea to white.
The code i used in my css to set the color of thumb is:
.jfx-slider .thumb
{
-fx-background-color: #8faeea;
}
The slider has id is sliderVolume.
I tryed different things in my code like:
sliderVolume.setStyle(".thumb -fx-background-color: white;");
But I am unsure how to implement the .thumb to make it work.
I used code like this lblCurrentSong.setStyle("-fx-text-fill: white;"); to change color on other labels and buttons in my program, which works fine, but again these are not modified in my css.
I used scene builder set up the GUI, if that has any relevance.
I tried to search forums, but couldn't find a solution that fitted my questions
Create a looked-up color:
.jfx-slider {
-thumb-color: #8faeea ;
}
.jfx-slider .thumb {
-fx-background-color: -thumb-color ;
}
and then in your Java code you can do
sliderVolume.setStyle("-thumb-color: white;");
I created css style sheet based on caspian.css. My question is how I can load the new css skin as default skin?
And also how I can change the skins during runtime?
You can either add the stylesheet directly to the Scene or to any Parent to apply it to the node and all decendants. Both classes have a method getStylesheets() that returns a ObservableList<java.lang.String>, that contains the URLs of the stylesheets applied to the object. Modify this list!
If you use fxml, you can specify the stylesheet there too (Of course this will only set the a initial stylesheet).
This is an example how to add the stylesheet at the creation of the scene. Of course you can remove the stylesheet from the list at any time and add another. Style.css is the stylesheet I want to add here and to a.b the package that contains the stylesheet.
// Load some content from some fxml file; Style.css not added there
Parent parent = (Parent) fxmlLoader.load(
getClass().getResourceAsStream("MainFrame.fxml"));
// create scene with content
Scene scene = new Scene(parent);
// alternatively use Node.getScene() for any node to get the scene
// add the stylesheet
scene.getStylesheets().add(
getClass().getClassLoader().getResource("a/b/Style.css").toString());
// ...
ObservableList<T> extends java.util.List<T> and should be easy to use.
Note that the behaviour sometimes may not be quite as expected. e.g. the popup that shows, if you click on a combobox is no decendant of the combobox and the paths from these nodes to from the root node of the scene should have only the root node in common. Therefore the popup will not be styled, if you add the stylesheet to the Pane that contains the combobox (if this is not the root node of the scene).
The following picture contains a screenshot of a combobox with a styled popup. This only works, since the css-file was added to the scene instead of the AnchorPane, that contains the ComboBox. I used different css-classes for the items to color them. (The red rect and text is not part of my application of course)
These are the style classes i used
.indexed-cell.class-value-bad-1 {
-fx-background-color: orange;
}
.indexed-cell.class-value-good-1 {
-fx-background-color: forestgreen;
}
.indexed-cell.class-value-normal {
-fx-background-color: white;
}