i'd like to customize the appearance of a Menu in my JavaFX8 application. How can i get rid or style the color of the 'white outline' shown in the following screenshot?
i tryed:
#MainMenuBar
{
-fx-text-fill: #bbbbbb;
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 0 0 1px 0;
}
.menu-item
{
-fx-background-color: #3c3f41;
-fx-text-fill: #bbbbbb;
-fx-border-color: transparent;
}
but it still there is this white otuline.
Thx,
seems you have to also style the 'context-menu'.
it worked by adding:
.context-menu
{
-fx-background-color: #3c3f41;
-fx-border-color: #555555;
-fx-border-style: solid;
-fx-border-width: 1px;
}
This and this answers on SO helped me to figure it out, thanks all.
Related
I have this css styling for tabpane javafx:
.tab {
-fx-background-color: #002f6c;
}
.tab-pane>*.tab-header-area>*.tab-header-background
{
-fx-background-color: -fx-outer-border, -fx-text-box-border, #002f6c;
}
.tab:selected {
-fx-background-color: #0041a0;
}
.tab-label {
-fx-text-fill: #ffffff;
}
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator
{
-fx-border-radius: 0px;
-fx-border-width: 0px 0px 0px 0px;
-fx-border-color: #4d1a4dff;
}
But i still can't rid of this white border near my tabs:
Can somebody help me with it?
The white border effect is because of the background color insets applied on .tab-header-background. Modifiying the code below should do the trick.
.tab-pane>*.tab-header-area>*.tab-header-background {
-fx-background-color: #002f6c;
-fx-background-insets:0;
}
I'm using TableView in many places in my javaFX application. I'm working on a dark mode theme and want to style this table. Now i can't manage to remove the borders in the header row. Also, the text color in the table rows remains black although the rest of text appears white (because of a dark color for -fx-base in root css class) in my application. The table looks like this:
The css:
.root {
-fx-base:#292929;
}
.table-view {
-fx-background-color: transparent;
-fx-border-color: all-dialog-border-color;
-fx-border-width: 1;
-fx-table-header-border-color: transparent;
-fx-table-cell-border-color: transparent;
-fx-text-fill: white;
}
.table-view .column-header-background
{
-fx-background-color: -fx-base;
}
.table-row-cell
{
-fx-background-insets: 0, 0 0 1 0;
-fx-background-color: transparent;
-fx-text-fill: white;
}
.table-column {
-fx-alignment: CENTER;
}
.table-view:focused .table-row-cell:focused {
-fx-table-cell-border-color: transparent;
}
I want to remove the borders between the columns in the header and make the text in table rows appear white. How do i achieve this?
just play with this Css, it should give you all the customization you want
.table-view{
-fx-background-color: white;
-fx-font-size: 20px;
-fx-border-color: derive(black, -60%);
}
.table-view:focused{
-fx-background-color: derive(-fx-primary, 20%);
}
.table-row-cell {
-fx-cell-size: 40px;
-fx-border-style:solid inside;
-fx-border-width:2;
}
.table-view .column-header-background{
-fx-background-color: white;
}
.table-view .column-header-background .label{
-fx-background-color: transparent;
-fx-text-fill: black;
-fx-text-weight:strong;
-fx-border-style:solid inside;
-fx-border-width:2;
-fx-border-radius:20;
-fx-padding:7;
-fx-font-size:18;
}
.table-view .column-header {
-fx-background-color: transparent;
}
.table-view .table-cell{
-fx-text-fill: black;
-fx-font-size:15;
-fx-alignment:center;
-fx-border-style:solid inside;
-fx-border-width:1;
}
.table-row-cell:focused, .table-cell:focused{
-fx-text-fill: red;
}
.table-row-cell{
-fx-background-color: -fx-primary;
-fx-border-color: black;
-fx-table-cell-border-color: transparent;
}
.table-row-cell:empty{
-fx-background-color:white;
-fx-border-color: transparent;
-fx-table-cell-border-color: transparent;
}
.table-column{
-fx-alignment: CENTER;
}
.table-row-cell:even{
-fx-background-color: derive(white, -10%);
}
.table-row-cell:odd{
-fx-background-color: white;
}
.table-row-cell:even:hover{
-fx-background-color:pink;
}
.table-row-cell:odd:hover{
-fx-background-color: skyblue;
}
.table-row-cell:even:empty{
-fx-background-color: white;
}
.table-row-cell:odd:empty{
-fx-background-color: white;
}
.table-row-cell:selected {
-fx-background-color: black;
-fx-text-fill: white;
-fx-background-insets: 0;
}
.table-row-cell:selected .table-cell{
-fx-text-fill: white;
}
After going through the TableView css suggested by Tule Simon, I realized some css classes were missing.
To remove the border from table header, use:
.table-view .column-header
{
-fx-border-style: none;
}
To make the text in the cells appear white:
.table-cell
{
-fx-text-fill: white;
}
Result:
The image shows what happens when a textfield is selected. It turns white although it should stay the same as the field above. Also the passwordfield shows strange icons - but thats another question.
Here the code:
.text-field {
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: rgba(0,0,0,0.1);
-fx-background-radius:30;
-fx-border-radius:30;
-fx-min-height:45;
-fx-text-fill: #fff;
-fx-prompt-text-fill: #fff;
-fx-border-width:0px;
-fx-alignment: center;
-fx-font-size: 1.2em;
-fx-effect: null;
}
.text-field:hover,
.text-field:focused,
.text-field:selected {
-fx-background-color: rgba(0,0,0,0.1);
-fx-border-color: rgba(0,0,0,0.1);
-fx-background-radius:30;
-fx-border-radius:30;
-fx-min-height:45;
-fx-text-fill: #fff;
-fx-prompt-text-fill: #fff;
-fx-border-width:0px;
-fx-alignment: center;
-fx-font-size: 1.2em;
-fx-effect: null;
}
Is there anything wrong with my css or is it a bug maybe? Css is showing properly when i launch the app on desktop. But deployed the texfields are white.
Thanks for any help.
I am currently using CSS to create a dark theme for an application I created. I am having issue creating a dark themed scrollbar, which appears inside a TreeTableView. Most of the scrollbar looks correct, but there is a small extra header created that isn't styled. Here is a picture, of my progress below:
The TreeTableView is very simple. It has two TreeTableColumns.
My current css relating to the table is below:
.tree-table-view
{
-fx-background-color: #404040;
}
.tree-table-view .scroll-bar
{
-fx-background-color: transparent;
}
.tree-table-view *.column-header-background *.show-hide-columns-button
{
-fx-background-color: #404040;
}
.tree-table-column
{
-fx-background-color: #404040;
-fx-border-color: #2d862d;
-fx-border-width: 0px 1px 0px 0px;
}
.tree-table-column .label
{
-fx-border-color: #2d862d;
-fx-border-insets: 0px 5px 0px 5px;
-fx-border-width: 0px 0px 1px 0px;
}
.tree-table-cell
{
-fx-text-fill: #e6e6e6;
-fx-padding: 0px 5px 0px 5px;
}
.tree-table-row-cell .arrow
{
-fx-background-color: #2d862d;
}
Does anyone know what css class I can use to make the white 'extra header' in the top-left corner have a black background? I would really appreciate it.
Any help will be greatly appreciated. Thanks!
.tree-table-view .filler {
}
Was the selector I needed. Thanks JNS!
I want to have a textfield with three different borders for three cases:
a white border when not hovered or focused
a grey border when hovering
a blue border when focused and typing
I started like this:
#custom-text-field {
-fx-border-width: 2;
-fx-border-color: white;
}
#custom-text-field:hover{
-fx-border-width: 2;
-fx-border-color: #909090;
}
#custom-text-field:focused{
-fx-border-width: 2;
-fx-border-color: #0093EF;
}
The problem is that the border for focusing never shows up. How do it set it correctly?
I use it like this
.custom-text-field {
-fx-background-color:
#FFFFFF,
#FFFFFF;
-fx-background-insets: 0, 2;
-fx-background-radius: 0, 0;
}
.custom-text-field:focused {
-fx-background-color:
#0093EF,
#FFFFFF;
}
.custom-text-field:hover {
-fx-background-color:
#909090,
#FFFFFF;
}
.custom-text-field:focused:hover {
-fx-background-color:
#0093EF,
#FFFFFF;
}