I am using .tab-pane .tab {} to change tab header color and width. This has no problem.
.tab-pane .tab
{
-fx-background-color: linear-gradient(to bottom, repeat, #CCCCCC , #808080 );
-fx-pref-width: 150.0;
-fx-text-alignment: CENTER; <-- does not work
}
However, the text alignment has no effect, how do I do this?
Having a look on modena.css searching for the TabPane you will find out that the tab-label alignment is already by default to the CENTER but you have change the width of the .tab to 150.0 although the label width is still the same. So you need to specify the alignment and the width to the tab's label as well like this :
.tab-pane .tab
{
-fx-background-color: linear-gradient(to bottom, repeat, #CCCCCC , #808080 );
-fx-pref-width: 150.0;
}
.tab-pane > .tab-header-area > .headers-region > .tab > .tab-container > .tab-label {
-fx-alignment: CENTER;
-fx-pref-width: 150.0;
-fx-text-fill: -fx-text-base-color;
}
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 have just started playing around with CSS in my JavaFX project and ran into a problem I could not solve. I have a TreeView that serves as a main menu and I wanted to get rid of any focus/unfocus borders that appear. I have managed to fixe the issue with a blue border appearing when interacting with the TreeView (focusing), completely removing it, however this white border appears every time I interact with something else.
I have tried looking online for solutions to this problem, however I could not find any. I have tried altering the CSS file in different ways featured in similar focus/unfocus problems but none of them worked.
My CSS file:
.grid-pane {
-fx-background-color: #181818;
}
.tree-view, .tree-cell {
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
}
#mainMenu .tree-cell {
-fx-padding: 0.25em 0em 0.25em 0em;
-fx-font-size: 28px;
-fx-background-color: #181818;
}
#mainMenu .tree-cell > .tree-disclosure-node > .arrow {
-fx-background-color: #FFFFFF;
-fx-alignment: center;
}
#mainMenu .tree-cell:expanded > .tree-disclosure-node > .arrow {
-fx-background-color: #FFFFFF;
-fx-alignment: center;
}
#mainMenu .label {
-fx-text-fill: white;
}
When focused (desired outcome)
When unfocused (white border)
Sorry for the bad English, as it is not my native language.
Thank you for your support!
I found the answer just now actually. I added -fx-background-insets: 1; to tree-view css only and it no longer appears. Thank you to everyone who tried to help so far!
.tree-view {
-fx-background-insets: 1;
}
how do I change the CSS of month label and year label? they are grayish and I want to change to white. I cant find the CSS for these two items.
Current CSS code of this datepicker:
/**
* https://gist.github.com/maxd/63691840fc372f22f470
*/
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.combo-box-popup > .list-view > .placeholder > .label {
-fx-text-fill: white;
}
.calendar-header {
-fx-background-color: #1d1d1d;
-fx-base: #1d1d1d;
-fx-text-fill: white;
}
.date-picker-popup {
-fx-text-fill: white;
-fx-background-color:
linear-gradient(to bottom,
derive(-fx-color,-17%),
derive(-fx-color,-30%)
),
-fx-control-inner-background;
-fx-background-insets: 0, 1;
-fx-background-radius: 0;
-fx-alignment: CENTER; /* VBox */
-fx-spacing: 0; /* VBox */
-fx-padding: 0.083333em; /* 1 1 1 1 */
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.2) , 12, 0.0 , 0 , 8 );
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-background-color: #1d1d1d;
-fx-text-fill: white;
}
Change the style for the .month-year-pane to
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
By default, -fx-background-color is set to fx-background, which in turn depends on -fx-base. The default text fill for controls whose text is rendered over a background of -fx-background is automatically chosen depending on the intensity of the background; in this case it will be set to -fx-light-text-color (which defaults to white).
The arrows are rendered in -fx-mark-highlight-color, so setting this to -fx-light-text-color ensures the arrows are the same color as the text. (Probably better is to mimic the ladder for -fx-text-fill.)
A lot of your CSS seems to have no effect. With the changes above, this seems equivalent:
.calendar-grid {
-fx-background-color: rgb(20, 156, 255);
}
.date-picker > .text-field {
-fx-text-fill: white;
}
.date-picker-popup > .month-year-pane {
-fx-base: #1d1d1d ;
-fx-mark-highlight-color: -fx-light-text-color ;
}
Note that the rule
.date-picker > .text-field {
-fx-text-fill: white;
}
makes the text in the text field (i.e. the selected date) invisible; I don't know if this is the desired effect.
Looking through the source code I found the labels use the spinner-label style class so I think you can just do:
.date-picker .spinner-label {
-fx-text-fill: white;
}
I have got this code:
private void createAndAddCommonInformationSection(){
Text text = new Text("CommonText");
gridPane.add(header);
}
The should appear in white color, so I have a CCS-file as follows:
.root {
-fx-base: rgb(50, 50, 50);
-fx-background: rgb(50, 50, 50);
-fx-control-inner-background: rgb(50, 50, 50);
}
.tab {
-fx-background-color: linear-gradient(to top, -fx-base, derive(-fx-base,30%));
}
.menu-bar {
-fx-background-color: linear-gradient(to bottom, -fx-base, derive(-fx-base,30%));
}
.tool-bar:horizontal {
-fx-background-color:
linear-gradient(to bottom, derive(-fx-base,+50%), derive(-fx-base,-40%), derive(-fx-base,-20%));
}
.button {
-fx-background-color: transparent;
}
.button:hover {
-fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-color: -fx-hover-base;
}
.table-view {
-fx-table-cell-border-color:derive(-fx-base,+10%);
-fx-table-header-border-color:derive(-fx-base,+20%);
}
.split-pane:horizontal > * > .split-pane-divider {
-fx-border-color: transparent -fx-base transparent -fx-base;
-fx-background-color: transparent, derive(-fx-base,20%);
-fx-background-insets: 0, 0 1 0 1;
}
.my-gridpane {
-fx-background-color: radial-gradient(radius 100%, derive(-fx-base,20%), derive(-fx-base,-20%));
}
.separator-label {
-fx-text-fill: orange;
}
.text{
-fx-text-fill: white;
}
Everythin is working fine with the CSS-file, except the the color of the text in my code snippet does not appear in the expected color.
I have already tried
-fx-fill: white;
and
-fx-fill-text: white;
but nothing helps.
What am I doing wrong?
According to the documentation, Text nodes have no default style class. so you need
text.getStyleClass().add("text");
in order for the text node to match the CSS selector. Then
.text {
-fx-fill: white ;
}
will work.
Typically you would use a Label along with the fx-text-fill property if you want to style it with CSS, though adding a style class manually to a Text node should work.
how to use border spacing property in javafx ?
Like in css for html
table.ex1 {
border-collapse: separate;
border-spacing: 10px 50px;
}
How do i use border spacing in javafx?
Inside a TabPane wherer i want to put a bottom border under each tab and my css is
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 4px;
-fx-border-color: transparent transparent white transparent;
}
its working and i have nice bottom border but i need some more border spacing , so someone please tell me how to do that ?
thanks in advance.
.tab:top{
-fx-background-color: transparent;
-fx-border-insets: 0 0 0 0;
-fx-border-color: white white white white ;
-fx-padding: 15px;
}
I think there is no border-spacing type property in javafx css but anyway you can do it in TabPane by -fx-padding property for tab.
Add some -fx-border-insets. Something like
.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator {
-fx-border-width: 4px, 0px;
-fx-border-color: transparent transparent white transparent, transparent;
-fx-border-insets: 0px 0px 2px 0px, 0px 0px 4px 0px ;
}
Check the CSS documentation for Region for details.