B4J Question CSS File Not Working.

XbNnX_507

Active Member
Licensed User
Longtime 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
Longtime 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
}
 
Upvote 0

ThRuST

Well-Known Member
Licensed User
Longtime 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;

}
 
Upvote 0

XbNnX_507

Active Member
Licensed User
Longtime User
You can use my template. Style it as you wish
Thanks!. @ThRuST

But i'm trying to achieve something like this:
xOuW9.png
 
Upvote 0

XbNnX_507

Active Member
Licensed User
Longtime 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!.
 
Upvote 0

stevel05

Expert
Licensed User
Longtime 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.
 
Upvote 0

stevel05

Expert
Licensed User
Longtime 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.
 
Upvote 0

stevel05

Expert
Licensed User
Longtime 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:
Upvote 0

stevel05

Expert
Licensed User
Longtime 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

  • CSSFile.zip
    2 KB · Views: 282
Last edited:
Upvote 0

ThRuST

Well-Known Member
Licensed User
Longtime 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);

}
 
Upvote 0

stevel05

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