B4J Question CSS File Not Working.

Discussion in 'B4J Questions' started by XbNnX_507, May 13, 2018.

  1. XbNnX_507

    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:
    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
    }
     
  2. Erel

    Erel Administrator Staff Member Licensed User

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

    ThRuST Well-Known Member Licensed User

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

    XbNnX_507 Active Member Licensed User

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

    ThRuST Well-Known Member Licensed User

    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 -10 0 0 00 -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 likes this.
  6. XbNnX_507

    XbNnX_507 Active Member Licensed User

    Thanks!. @ThRuST

    But i'm trying to achieve something like this:
    [​IMG]
     
  7. ThRuST

    ThRuST Well-Known Member Licensed User

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

    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.

    Thanks!.
     
  9. stevel05

    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:

    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.
     
    ThRuST likes this.
  10. ThRuST

    ThRuST Well-Known Member Licensed User

    There are Angels, and then there's @stevel05 :)
     
  11. stevel05

    stevel05 Expert Licensed User

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

    ThRuST Well-Known Member Licensed User

    Or this should work :)

    Code:
    TextField1.StyleClasses.Clear
     
  13. XbNnX_507

    XbNnX_507 Active Member Licensed User

    :(:(:(:( it doesn't work
     

    Attached Files:

  14. stevel05

    stevel05 Expert Licensed User

    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: May 14, 2018
  15. stevel05

    stevel05 Expert Licensed User

    It does if you remove the Style Property

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

    Attached Files:

    Last edited: May 14, 2018
  16. ThRuST

    ThRuST Well-Known Member Licensed User

    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) , 00.0 , 0 , 1);

    }
     
  17. stevel05

    stevel05 Expert Licensed User

    Sorry, initially uploaded the wrong file, it's the right one now.
     
    XbNnX_507 likes this.
  18. XbNnX_507

    XbNnX_507 Active Member Licensed User

    ThRuST likes this.
  19. ThRuST

    ThRuST Well-Known Member Licensed User

    You're welcome. Jedi programmers like me and Steve always gets the job done haha :cool:
     
    XbNnX_507 likes this.
  20. XbNnX_507

    XbNnX_507 Active Member Licensed User

    The force be with you both :cool:
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice