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.
Related
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";
}
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 want to style my context menu but I can't get rid off white area between menu-item and context-menu border, see example.
rendered context menu with css styles
I want that color fils whole area up to context menu border like this
ecpected styling
My css styles
.context-menu {
-fx-background-color: #FFFFFF;
-fx-effect: null;
-fx-border-color: #D6D9DF;
-fx-border-width: 0.5;
-fx-border-radius: 4;
-fx-background-radius: 4;
-fx-background-insets: 0, 1;
}
.menu-item {
-fx-padding: 0;
-fx-pref-height: 28px;
}
.context-menu .separator {
-fx-padding: 0;
}
.menu-item .label {
-fx-font-size: 12px;
-fx-padding: 6 16 8 12;
-fx-text-fill: #2D3845;
}
.menu-item:focused {
-fx-background-color: transparent;
}
.menu-item:hover {
-fx-background-color: #EAECEF;
}
.menu-item:pressed {
-fx-background-color: #D6D9DF;
}
have you tried adding
yourcontextmenuname.getStyleClass().remove("context-menu");
and then change your CSS to refer yourcontextmenuname by ID. If that does not work do the same with menu-item.
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 using BreadcrumbBar from ControlsFX which works fine. The only problem i have is styling it to look like the image below. When using scenic view i saw that this component only has three classes .bread-crumb-bar, .button, .first. I tried adding border image like so, but did not appear.
/*
* ControlFX bread crumb
*
*/
.bread-crumb-bar {
}
.bread-crumb-bar .button {
-fx-padding: 0 3 0 3;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-border-image-source: url("../images/icon/crumb-focused.png");
-fx-border-image-slice: 1 10 1 10 fill;
-fx-border-image-width: 1 10 1 10;
-fx-border-image-repeat: stretch;
}
.bread-crumb-bar .button.first {
}
How can i style controlsfx breadcrumb to look like breadcrumb in the image
That's how i have solved it very similar. For the slash you need the image.
You need to fiddle around with padding and set your font-family appropriately. Didnt find a selector for the last/selected crumb.
bread-crumb-bar {
-fx-background-color: transparent;
}
.bread-crumb-bar .button {
-fx-padding: 8 12 8 20;
-fx-border-color: null;
-fx-border-insets: 0;
-fx-content-display: left;
-fx-background-position: left center;
-fx-background-repeat: no-repeat;
-fx-background-image: url("../img/slash.png");
-fx-background-color: transparent;
-fx-border-color: transparent;
-fx-shape: null;
}
.bread-crumb-bar .first {
-fx-background-color: transparent ;
-fx-border-color: transparent;
-fx-font-size: 1.11em;
-fx-text-fill: #000;
-fx-background-image: null;
-fx-shape: null;
-fx-padding: 8 12 8 0;
}
.crumb {
-fx-text-fill: #000;
}
.crumb:hover,
.crumb:selected,
.crumb:focused
{
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: null;
-fx-font-size: 1.11em;
-fx-text-fill: rgba(0,0,0,0.5);
}