I'm trying to make the JavaFX pagination control look like this:
This is my styling:
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-dark-grey;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: -fx-colour-purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: -fx-bg-colour-grey;
}
.pagination .pagination-control .left-arrow, .right-arrow{
-fx-background-color: -fx-font-colour-black;
}
.pagination .label {
-fx-text-fill: -fx-font-colour-black;
}
This is the result:
There seems to be an issue with the background colour. when the button is selected its overflowing a little at the bottom and for the arrow buttons the background is not applied to the entire button (If you look very closely at the rightmost arrow button the background colour ends leaving a little white strip). Also how do I increase the size of the buttons(they are mush smaller than the image in reality)? I've tried setting the prefWidth and prefHeight like so with no results
.pagination .pagination-control .button, .pagination .toggle-button {
-fx-background-color: -fx-paginator-button;
-fx-border-color: -fx-colour-grey;
-fx-pref-width: 15;
-fx-pref-height: 15;
}
These selectors should do the basic job:
/* Remove spacing */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
}
/* You can control the actual button sizes here */
.pagination > .pagination-control > .control-box > .number-button,
.pagination > .pagination-control > .control-box > .bullet-button,
.pagination > .pagination-control > .control-box > .left-arrow-button,
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-background-insets: 0, 1;
-fx-background-color: lightgray, #FAFAFA;
-fx-min-width: 30;
-fx-min-height: 30;
}
/* Colors on hover */
.pagination > .pagination-control > .control-box > .number-button:hover,
.pagination > .pagination-control > .control-box > .bullet-button:hover,
.pagination > .pagination-control > .control-box > .left-arrow-button:hover,
.pagination > .pagination-control > .control-box > .right-arrow-button:hover {
-fx-background-insets: 0;
-fx-background-color: lightgray;
}
/* Selected toggle color */
.pagination > .pagination-control > .control-box > .number-button:selected,
.pagination > .pagination-control > .control-box > .bullet-button:selected{
-fx-background-insets: 0;
-fx-background-color: #58379A;
-fx-text-fill: white;
}
to have a result like:
All the buttons have a fixed size, the spacing is removed and the selected/hovered toggle button has the borderless color.
Additionally, if you want to control also the text size inside the buttons, you can update the following selector as:
/* Remove spacing and control font size */
.pagination > .pagination-control > .control-box {
-fx-spacing: 0;
-fx-font-size: 12;
}
Furthermore you can control also the text size of the page information like:
.pagination > .pagination-control {
-fx-font-size: 8;
}
Or you can even hide it:
.pagination {
-fx-page-information-visible: false;
}
to have a result of:
The problem is that the -fx-pref-width or height are not been applied cause they are handled by their parent layout ( at least I think so ) in order to force the changes you need to set the min width and height instead of preferred.
Here is my css :
.pagination > .pagination-control > .control-box > .number-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .left-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination > .pagination-control > .control-box > .right-arrow-button {
-fx-min-width: 40;
-fx-min-height: 30;
}
.pagination .pagination-control .toggle-button:selected {
-fx-background-color: purple;
}
.pagination .pagination-control .toggle-button:hover, .pagination .pagination-control .button:hover {
-fx-background-color: grey;
}
Consider have a look at modena.css for more information.
Related
I'm looking for deleting the blue selection zone around a selected tab in JavaFX CSS.
Here is my problem
And my CSS :
.tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.tab-pane
{
-fx-tab-min-width:88px;
}
.tab-pane .tab
{
-fx-background-color: gray;
-fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab:selected
{
-fx-background-color: #f10707;
}
.tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
-fx-font-size: 14px;
-fx-font-family: "Arial Rounded MT Bold";
}
.tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
}
Any help is appreciated.
Try
.tab-pane:focused .tab:selected .focus-indicator {
-fx-border-width: 0 ;
-fx-border-color: transparent;
-fx-border-insets: 0;
-fx-border-radius: 0;
}
I'm creating rulers using javafx by modifying css of javafx slider and I created something like this:
And I was trying to make this:
So I tried to rotate sliders by calling setRotate() method but it becomes like this:
Here is my code for sliders:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.setRotate(180);
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.setRotate(180);
And here is my css code for sliders:
.slider > .thumb,
.slider > .thumb:hover,
.slider:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 2 0 -23 0;
-fx-padding: 1 1 0 1;
-fx-background-radius: 0;
}
.slider:vertical > .thumb,
.slider:vertical > .thumb:hover,
.slider:vertical:focused > .thumb{
-fx-background-color: #ff6a6a;
-fx-background-insets: 0 -23 0 2;
-fx-padding: 1 0 1 1;
-fx-background-radius: 0;
}
.slider > .track,
.slider:vertical > .track {
-fx-background-color: transparent;
-fx-background-insets: 0;
-fx-background-radius: 0;
-fx-padding: 0;
}
.slider > .axis {
-fx-tick-mark-stroke: transparent;
-fx-tick-label-font-size: 0.833333em;
-fx-tick-label-fill: #9a9a9a;
-fx-background-color: #333;
}
Please suggest me how can I flip axis or rotate labels of these slider so that I can achieve expected results.
Basically, you have to set the side property of the axis (for left and top). The steps that are involved:
let the slider have a custom style, f.i. axis-top/axis-left
in css, define a rule for the axis contained in such a slider to set its side to top/left
The code:
Slider hRuler = new Slider(0, 160, 10);
hRuler.showTickMarksProperty().setValue(true);
hRuler.showTickLabelsProperty().setValue(true);
hRuler.getStyleClass().add("axis-top");
Slider vRuler = new Slider(0, 100, 10);
vRuler.setOrientation(Orientation.VERTICAL);
vRuler.showTickMarksProperty().setValue(true);
vRuler.showTickLabelsProperty().setValue(true);
vRuler.getStyleClass().add("axis-left");
In css:
.slider.axis-top > .axis {
-fx-side: TOP;
}
.slider.axis-left > .axis {
-fx-side: LEFT;
}
This can certainly be optimized, but should get you started.
I literally have nothing in my Stylesheet but
.root {
-fx-accent: #a9d5f9;
}
I want to change this color. Is the color for selected row when table is no longer focused.
Been looking for a while and i found pretty much everything but this.
These two selectors should do it for ListViews:
.list-cell:filled:selected {
-fx-background: orange;
}
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: -fx-selection-bar;
}
To have the same coloring in TableViews (both cell and row selection), you can add more selectors:
.table-row-cell:filled:selected,
.tree-table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected,
.tree-table-row-cell:filled > .tree-table-cell:selected,
.list-cell:filled:selected {
-fx-background: orange;
}
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell:filled:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell:filled:selected,
.table-view:focused > .virtual-flow > .clipped-container > .sheet > .table-row-cell .table-cell:selected,
.tree-table-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-table-row-cell .tree-table-cell:selected ,
.list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected {
-fx-background: -fx-selection-bar;
}
Note: these selectors targeting even TreeTableViews.
The result:
I can't understand what element I should work to do this task. I tried
.tab-header-area .tab{
-fx-background-color:red;
-fx-padding:30px;
}
EDIT 1
This is what I get
But I have the same tab header inside big red rectangle. How can I increase distance between text and edge of the tab header area? By other words - how can I make tab header bigger with the same font size?
EDIT 2
When I do
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I get:
But I need (sorry, it's gimp,not photoshop)
If you want a border around the tab (not the label), you have to use this:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-background-color: red;
-fx-padding: 20px;
-fx-border-color: black;
-fx-border-width: 1px;
}
If you want to manipulate the tab-container (where the label is in) itself you need this:
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container{
-fx-border-color: black;
-fx-border-width: 1px;
}
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
UPDATE
Default for a selected tab is that:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 1, 1;
-fx-border-color: -fx-focus-color, -fx-faint-focus-color;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1; /* looks sharper if outer border has a tighter radius (2 instead of 3) */
}
And this it how it goes:
.tab-pane > .tab-header-area > .headers-region > .tab {
-fx-padding: 20px;
-fx-background-color: red;
}
.tab-pane > .tab-header-area > .headers-region > .tab:selected {
-fx-padding: 20px;
-fx-background-color: red;
-fx-border-width: 1px;
-fx-border-color: black;
}
.tab-pane > .tab-header-area > .headers-region >.tab:selected .focus-indicator{
-fx-border-width: 0px;
}
Look at the modena.css (default JavaFX stylesheet) file for info on things to change.
Font size will not change dynamic, you have to take care of font size with a listener on size/width/height property of the tab (in relation to font size).
And there are a lot of pseudo tags like .tab:selected .tab:top etc. So be aware of this kind of things if you want the default behavior only with new design.
And finally have a look at css selectors, you missed the descending selectors ('>'): http://www.w3schools.com/cssref/sel_element_gt.asp
It's not really clear what you are looking for... maybe
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Tab;
import javafx.scene.control.TabPane;
import javafx.stage.Stage;
public class TabPaneStyleTest extends Application {
#Override
public void start(Stage primaryStage) {
TabPane tabPane = new TabPane();
Tab tab1 = new Tab();
tab1.setGraphic(new Label("tab 1"));
Tab tab2 = new Tab();
tab2.setGraphic(new Label("tab 2"));
tabPane.getTabs().addAll(tab1, tab2);
Scene scene = new Scene(tabPane);
scene.getStylesheets().add("tab-pane-big-tabs.css");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
with the css file
.tab-header-area .tab .label{
-fx-padding:5px 30px 5px 0;
}
.tab-header-area .tab {
-fx-background-color: red ;
}
I want to make a custom checkbox, but my mark is limited by box size. Is there a way to extend it outside bounds?
CSS code for checkbox:
.check-box{
-fx-font-family: "Segoe UI Light";
-fx-font-size: 18;
-fx-text-fill:#01449f;}
.check-box .box{
-fx-outer-border: #cadbec;
-fx-body-color: white;
-fx-background-color:
-fx-outer-border,
-fx-body-color;
-fx-background-insets: 0, 1;
-fx-background-radius: 2px, 0px;}
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";}
.check-box:selected .mark {
-fx-background-color: #0181e2;}
You can scale the graphic:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
}
EDIT
To move the tick, you can translate it:
.check-box .mark {
-fx-shape:"M14.596,2.055L12.455,0C9.687,2.884,6.011,6.714,5.158,7.602L2.055,4.624L0,6.765l5.242,5.037l0.003-0.004
l0.003,0.004L14.596,2.055z";
-fx-scale-x: 2;
-fx-scale-y: 2;
-fx-translate-x: 5px;
-fx-translate-y: -3px;
}