B4J Question CSS File Not Working.

Similar threads

B4J Tutorial Working with JavaFX Scene Builder
B4J Library [class] CSS Utils
B4J Code Snippet [JavaFX] - Metro Style CSS
B4J Code Snippet Dark theme - base color
B4J Tutorial Styling buttons with CSS
B4J Tutorial CSS Example

XbNnX_507

Active Member
Licensed User
Hi All,

I have a little issue here.
In Extra CSS Property of TextField in the Designer this code works fine:
B4X:
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
When i put the above code in a css file and add it to MainForm.StyleSheets.add("mycss.css")
it just don't work. Why?

mycss.css is file is like this:
B4X:
.text-field {
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;    '<- this is the only thing that takes effect
}
 

XbNnX_507

Active Member
Licensed User
If these attributes are set in that property then they will override the CSS file attributes.
Yes, i did delete those Extra CSS properties in the designer when i use a css file.

Check the output of Log(YourView.Style)
With Extra CSS property i got this:
B4X:
-fx-font-size:15.00;-fx-border-color:#000000;
-fx-border-width:0.00;-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;
With css file i got this:
'properties are not been read.
B4X:
-fx-font-size:15.00;-fx-border-color:#000000;
-fx-border-width:0.00;


Put all your CSS stuff in one file that makes it easier to maintain and even use custom ones.
yes that's what i did but i having problem with
B4X:
.text-field {
-fx-border-width: 0 0 2 0;
-fx-border-color: red;
-fx-background-color: transparent;
-fx-text-fill: red;    '<- this is the only thing that takes effect
}
 

ThRuST

Well-Known Member
Licensed User
You can use my template. Style it as you wish

B4X:
/* ----------------------------- */
/* -         Text-Field        - */
/* ----------------------------- */
.text-field {

        -fx-background-color: #1a1a1a;
        -fx-background-insets: 0 -1 -1 -1, 0 0 0 0, 0 -1 3 -1;
        -fx-background-radius: 10;

        -fx-font-family: Consolas;
        -fx-font-size: 7px;
        -fx-font-weight: Normal;
        -fx-text-fill: White;

}

/* ----------------------------- */
/* -     Text-Field Hover      - */
/* ----------------------------- */
.text-field: hover {

        -fx-background-color: #1e1e1e;

    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,1) , 10, 0.0 , 0 , 0.5 );

}

/* ----------------------------- */
/* -    Text-Field Focused     - */
/* ----------------------------- */
.text-field:focused {

        -fx-background-color: #1e1e1e;

}
 

XbNnX_507

Active Member
Licensed User
Actually, i was able to made it look like that with the Extra CSS property in the designer. But not with the css file. Seems like an internal problem with the css parser. in B4J.
i'll wait to Erel's answer.

Search Google it will solve your problem. "JavafX + CSS + Text-field" Good luck!
Thanks!.
 

stevel05

Expert
Licensed User
As Erel said, the style set in the textfields Style property will stop the css being applied. If you are setting all of the properties in the css file, you can just clear the Style property:

B4X:
TextField1.Style = ""
And the css will work.

Otherwise you can remove the specific items. It is probably simpler to remove them all and add the ones you want in the css file.
 

stevel05

Expert
Licensed User
will stop the css being applied
Just to clarify, that is not exactly true, the properties in the Nodes Style property will be applied after the css, they have a higher priority.
 

stevel05

Expert
Licensed User
Or this should work :)
Well it would, but you wouldn't be able to style the Node via css afterwards either unless you add a new styleclass.
 
Last edited:

stevel05

Expert
Licensed User
:(:(:( it doesn't work
It does if you remove the Style Property

Sorry, initially uploaded the wrong file, it's the right one now.
 

Attachments

Last edited:

ThRuST

Well-Known Member
Licensed User
You can define your own CSS style in a file by doing this

In Code
B4X:
Button1.StyleClasses.Clear
Button1.Id = "MyStyle"
CSS
B4X:
/* ----------------------------- */
/* -     My Custom CSS class   - */
/* ----------------------------- */
#MyStyle {

    -fx-background-color:
        linear-gradient(#000000, #000000),
        linear-gradient(#aeaeae 0%, #ffffff 20%, #0a0a0a 100%),
        linear-gradient(#585858 0%, #585858 50%);

        -fx-background-radius: 7,6,5;
        -fx-background-insets: 0,1,2;
        -fx-padding: 10 21 10 21;

        -fx-text-fill: White;
        -fx-font-size: 13px;
        -fx-font-family: Consolas;
        -fx-font-weight: Bold;

        -fx-effect: dropshadow( one-pass-box , rgba(0,0,0,0.8) , 0, 0.0 , 0 , 1);

}
 

stevel05

Expert
Licensed User
Sorry, initially uploaded the wrong file, it's the right one now.
 
Top