B4J Question CSS File Not Working.

[XbNnX_507]

Hi All,

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

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

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

 

[Erel]

Check the output of Log(YourView.Style). If these attributes are set in that property then they will override the CSS file attributes.

 

[ThRuST]

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

 

[XbNnX_507]

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:

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

-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

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

You can use my template. Style it as you wish

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

You can use my template. Style it as you wish

Thanks!. @ThRuST

But i'm trying to achieve something like this:

 

[ThRuST]

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

 

[XbNnX_507]

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]

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:

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.

 

[ThRuST]

There are Angels, and then there's @stevel05

 

[stevel05]

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.

 

[ThRuST]

Or this should work

TextField1.StyleClasses.Clear

 

[XbNnX_507]

it doesn't work

 

[stevel05]

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.

 

[stevel05]

it doesn't work

It does if you remove the Style Property

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

 

[ThRuST]

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

In Code

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

CSS

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

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

 

[XbNnX_507]

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

 

[ThRuST]

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

 

[XbNnX_507]

The force be with you both