I want to make a dark mode but i cant find any information on how to change the color of the checkmark (its currently black on black), can anyone help me?
I have tried:
.choiceBox .context-menu {
-fx-text-fill: #ffffff;
-fx-border-color: #ffffff;
}
.choiceBox .menu-item:focused {
-fx-text-fill: #ffffff;
-fx-background-color: #222222;
}
.choiceBox .menu-item > .label {
-fx-text-fill: #ffffff;
}
.choiceBox .menu-item:focused > .label {
-fx-text-fill: #ffffff;
}
.choiceBox > .label {
-fx-text-fill: #ffffff;
-fx-border-color: #ffffff;
}
It's called "arrow". This changes it to yellow:
.choice-box > .open-button > .arrow,
.combo-box-base > .arrow-button > .arrow {
-fx-background-color: yellow, yellow;
-fx-background-insets: 0 0 -1 0, 0;
-fx-padding: 0.166667em 0.333333em 0.166667em 0.333333em; /* 2 4 2 4 */
-fx-shape: "M 0 0 h 7 l -3.5 4 z";
}
Related
I have a TabPane for which I have set a style through CSS. However, I would like to have the different style fot the TabPane on another screen(for selected and unselected tabs). The following code is what I have working when I was using a common style for all the TabPane.
.tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.tab-pane
{
-fx-tab-min-width:90px;
}
.tab{
-fx-background-insets: 0 1 0 1,0,0;
}
.tab-pane .tab
{
-fx-background-color: #abe0ff;
}
.tab-pane .tab:selected
{
-fx-background-color: #015A7C;
}
.tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #3c3c3c;
-fx-font-size: 14px;
-fx-font-weight: bold;
}
.tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
}
.tab-pane:top *.tab-header-area {
-fx-background-insets: 0, 0 0 1 0;
/* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
-fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}
In the case of trying to set it to different colors, I tried the following which was an unsuccessful attempt :
.MyTabPane > .tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.MyTabPane > .tab-pane
{
-fx-tab-min-width:90px;
}
.MyTabPane > .tab{
-fx-background-insets: 0 1 0 1,0,0;
}
.MyTabPane > .tab-pane .tab
{
-fx-background-color: #e8e8e8;
}
.MyTabPane > .tab-pane .tab:selected
{
-fx-background-color: #c0c0c0;
}
.MyTabPane > .tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #3c3c3c;
-fx-font-size: 14px;
-fx-font-weight: bold;
}
.MyTabPane > .tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
}
.MyTabPane > .tab-pane:top *.tab-header-area {
-fx-background-insets: 0, 0 0 1 0;
/* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
-fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}
This is from my FXML :
<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">
Can someone please point me in the right direction.
I also tried following this idea, but couldn't get it through for the color of unselected tab: How do you set JavaFX TabPane CSS in code?
P.S. I am pretty new to CSS. I apologize if it is a silly question. Any suggestions are welcome.
Create a simple TabPane and add style class:
TabPane tabPane = new TabPane();
tabPane.getStyleClass().add("MyTabPane");
Tab tab1 = new Tab("Page 1", new Label("Page 1"));
Tab tab2 = new Tab("Page 2", new Label("Page 2"));
Tab tab3 = new Tab("Page 3", new Label("Page 3"));
tabPane.getTabs().addAll(tab1, tab2, tab3);
In CSS:
.MyTabPane .tab-pane .tab-header-area .tab-header-background {
-fx-opacity: 0;
}
.MyTabPane .tab-pane {
-fx-tab-min-width: 90px;
}
.MyTabPane .tab {
-fx-background-insets: 0 1 0 1, 0, 0;
}
.MyTabPane .tab-pane .tab {
-fx-background-color: #e8e8e8;
}
.MyTabPane .tab-pane .tab:selected {
-fx-background-color: #c0c0c0;
}
.MyTabPane .tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #3c3c3c;
-fx-font-size: 14px;
-fx-font-weight: bold;
}
.MyTabPane .tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: red;
}
.MyTabPane .tab-pane:top *.tab-header-area {
-fx-background-insets: 0, 0 0 1 0;
/* -fx-padding: 0.416667em 0.166667em 0.0em 0.833em; /* 5 2 0 10 */
-fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}
Anybody facing this issue can refer the following code. Turns out I was not using the selector correctly :
FXML :
<TabPane fx:id="tabPane" prefHeight="200.0" prefWidth="200.0" tabClosingPolicy="UNAVAILABLE" GridPane.rowIndex="1" styleClass="MyTabPane">
CSS :
.MyTabPane
{
-fx-tab-min-width:90px;
}
.tab{
-fx-background-insets: 0 1 0 1,0,0;
}
.MyTabPane .tab
{
-fx-background-color: #e8e8e8;
}
.MyTabPane .tab:selected
{
-fx-background-color: #c0c0c0;
}
.tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #3c3c3c;
-fx-font-size: 14px;
-fx-font-weight: bold;
}
.tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: white;
}
.MyTabPane:top *.tab-header-area {
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}
I have a Javafx project developed in eclipse with some css-files for table and chart backgrounds. In eclipse everything works fine, but when I use j4launch to built a windows .exe the css- files is not applied to the tables and (what seems very strange to me) only one of two line charts shows the wanted background. Both line charts refer to the the same css-file bau are situated in different tabs. I am using jre1.8.0_211. Can someone help me? It would be great. Thank you Marcus
I checked in scenebuilder that the refered css-files are all in the project. I cleaned and rebuilt the project and tried j4launch again, but the results are the same.
This is the first line in the project controller.fxml (sa there seam to be issues with the UTF-8:
<?xml version="1.0" encoding="UTF-8"?>
This is the css code attached to the barchart:
.chart {
-fx-padding: 10px;
}
.chart-content {
-fx-padding: 30px;
}
.chart-title {
-fx-text-fill: #ffffff;
-fx-font-size: 1.6em;
}
.axis-label {
-fx-text-fill: white ;
}
.chart-legend {
-fx-background-color: #8c9cca;
-fx-padding: 20px;
}
.chart-legend-item-symbol{
-fx-background-radius: 0;
}
.chart-legend-item{
-fx-text-fill: #ffffff
}
.chart-plot-background {
-fx-background-color: transparent;
}
.chart-vertical-grid-lines {
-fx-stroke: #3278fa;
}
.chart-horizontal-grid-lines {
-fx-stroke: #8c9cca;
}
.chart-alternative-row-fill {
-fx-fill: transparent;
-fx-stroke: transparent;
-fx-stroke-width: 0;
}
and this is the css for the tables:
.table-view{
-fx-background-color: transparent;
}
.table-view{
-fx-border-color: red;
}
.table-view:focused{
-fx-background-color: transparent;
}
/* Spaltenköpfe
Struktur column-header-background -> column-header */
.table-view .column-header-background{
-fx-background-color: linear-gradient(#131313 0%, #424141 100%);
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header {
-fx-text-fill: bisque ;
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: White;
-fx-font-size: 14px;
}
.table-row-cell{
-fx-background-color: -fx-table-cell-border-color, #616161;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:odd{
-fx-background-color: -fx-table-cell-border-color, #424242;
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.0em; /* 0 */
}
.table-row-cell:selected {
-fx-background-color: #CBDAFF;
-fx-background-insets: 0;
-fx-background-radius: 1;
-fx-border-color: #b3c7dc;
}
.table-view:focused .table-row-cell:selected .table-cell {
-fx-text-fill: black;
}
.table-view > .virtual-flow > .scroll-bar:vertical,
.table-view > .virtual-flow > .scroll-bar:vertical > .track,
.table-view > .virtual-flow > .scroll-bar:vertical > .track-background,
.table-view > .virtual-flow > .scroll-bar:horizontal,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track,
.table-view > .virtual-flow > .scroll-bar:horizontal > .track-background
{
-fx-background-color: transparent;
}
.table-view > .virtual-flow > .scroll-bar > .increment-button,
.table-view > .virtual-flow > .scroll-bar > .decrement-button {
-fx-opacity: 0;
}
No error messages. The windows programm is running bit the the stylesheets ara just partly applied (see above).
I would like to apply the default "focus" style tab to my selected tab. Mainly I am trying to accomplish keeping the thin blue border around the tab regardless of whether or not the user is focused on the tab, but instead as long as it is the tab they have selected. I included an example of how it looks now when I am focused on something else and how I would like it to look when I am focused on something else.
/*Overrides the default and removes the 10px padding from the left most tab */
.tab-pane:top *.tab-header-area {
-fx-background-insets: 0, 0 0 1 0;
-fx-padding: 0.416667em 0.166667em 0.0em 0.0em; /* overridden as 5 2 0 0 */
}
.tab-header-background {
-fx-background-color: transparent;
}
.tab-pane{
-fx-tab-min-width:90px;
}
.tab-pane .tab{
-fx-background-insets: 0 0 0 0,0,0;
-fx-background-color: #c6c6c6;
}
.tab-pane .tab:selected{
-fx-background-color: #3c3c3c;
}
.tab .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #828282;
-fx-font-size: 12px;
-fx-font-weight: bold;
}
.tab:selected .tab-label {
-fx-alignment: CENTER;
-fx-text-fill: #96b946;
}
In my modena.css that selector looks like:
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
...
}
Just use it without :focused:
.tab-pane > .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-color: red;
-fx-border-insets: -4 -4 -6 -5, -2 -2 -5 -3;
-fx-border-radius: 2, 1;
}
I am styling my MenuBar in JavaFX and I have been trying to change the font-Color
of the text in the MenuItem but no success.
this is my CSS code.
How could I do it?
.menu-bar {
-fx-background-color: darkslategray;
-fx-opacity: 0.5;
}
.menu-bar .menu-button:hover, .menu-bar .menu-button:focused, .menu-bar .menu-button:showing {
-fx-background: -fx-accent;
-fx-background-color: darkslategray;
-fx-opacity: 0.5;
-fx-text-fill: -fx-selection-bar-text;
}
.menu-item {
-fx-background-color: darkslategray;
-fx-padding: 0em 0em 0em 0em;
-fx-text-fill: greenyellow;
}
.context-menu {
-fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin";
-fx-background-color:darkslategray ;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0 6 6 6, 0 5 5 5, 0 4 4 4;
-fx-padding: 0.333333em 0.083333em 0.666667em 0.083333em; /* 4 1 8 1 */
-fx-opacity: 0.9;
}
To style the text of the menu-item in css, you have to select the label of the menu-item using .menu-item .label{....} like,
.menu-item .label{
-fx-text-fill: greenyellow;
}
I hope this solved your problem.
I have .css when the row is selected which is fine.
However when I click off the row it changes the row color grey with a black font, is there any way to edit this css?
.table-view {
-fx-base: transparent;
-fx-control-inner-background: transparent;
-fx-background-color: #507CA6;
-fx-padding: 5;
}
.table-view .column-header-background {
-fx-background-color: transparent;
}
.table-view .column-header, .table-view .filler {
-fx-size: 35;
-fx-border-width: 0 0 1 0;
-fx-background-color: transparent;
-fx-border-color: #B4D9FD;
-fx-border-insets: 0 10 1 0;
}
.table-view .column-header .label {
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Light";
-fx-text-fill: white;
-fx-alignment: center-left;
-fx-opacity: 1;
}
.table-view:focused .table-row-cell:filled:focused:selected {
-fx-background-color: #273D51;
}
Any help would be appreciated.
Try this:
/* When control is selected but not focused */
.table-row-cell:filled:selected,
.table-row-cell:filled > .table-cell:selected {
-fx-background: red;
}
first make selected class than use this script, i always use this $("tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});