B4J Question CSS File Not Working.

Hi All,

I have a little issue here.
In Extra CSS Property of TextField in the Designer this code works fine:

Code:

-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:

Code:

.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
}

 

Put all your CSS stuff in one file that makes it easier to maintain and even use custom ones.

 

Yes, i did delete those Extra CSS properties in the designer when i use a css file.

With Extra CSS property i got this:

Code:

-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.

Code:

-fx-font-size:15.00;-fx-border-color:#000000;
-fx-border-width:0.00;

yes that's what i did but i having problem with

Code:

.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
}

 

You can use my template. Style it as you wish

Code:

/* ----------------------------- */
/* -         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;

}

 

Thanks!. @ThRuST

But i'm trying to achieve something like this:

 

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

 

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.

Thanks!.

 

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:

Code:

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.

 

There are Angels, and then there's @stevel05

 

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.

 

Or this should work

Code:

TextField1.StyleClasses.Clear

 

it doesn't work

 

Well it would, but you wouldn't be able to style the Node via css afterwards either unless you add a new styleclass.

 

It does if you remove the Style Property

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

 

You can define your own CSS style in a file by doing this

In Code

Code:

Button1.StyleClasses.Clear
Button1.Id = "MyStyle"

CSS

Code:

/* ----------------------------- */
/* -     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);

}

 

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

 

Thank you so much! @stevel05 @ThRuST . Gracias!!
It was so simple .

 

You're welcome. Jedi programmers like me and Steve always gets the job done haha

 

The force be with you both