B4J Tutorial Using external CSS file to style a ToggleButton

Tried

aToggleButton.Style=":selected{-fx-background-color:black;}"

Not working for me. Any advice?
Furthermore, how can I relate the style of a node created by code with a css file?

 

[Erel]

You can only use selectors with a CSS file.

The default style is named caspian.css. You can see it here: http://pastebin.com/0PebD9nR
It is useful to make changes based on this style.

Create the following file named tb.css in the Files folder:

.MyToggleButton:selected {
  -fx-background-color:
  black,
  linear-gradient(to bottom, derive(red,-90%) 0%, derive(blue,-60%) 100%),
  linear-gradient(to bottom, derive(red,-60%) 0%, derive(blue,-35%) 50%, derive(red,-30%) 98%, derive(blue,-50%) 100%),
  linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, rgba(0,0,0,0.3) 100%);
}

.BlackToggleButton:selected {
   -fx-background-color: black;
}

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.Show
   'load the css file
   MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "tb.css"))
   Dim tb1, tb2 As ToggleButton
   tb1.Initialize("tb")
   tb1.Text = "Toggle Button"
   tb1.StyleClasses.Add("MyToggleButton")
   MainForm.RootPane.AddNode(tb1, 10, 10, 100, 100)
   tb2.Initialize("")
   tb2.Text = "abc"
   tb2.StyleClasses.Add("BlackToggleButton")
   MainForm.RootPane.AddNode(tb2, 120, 10, 100, 100)
End Sub

 

[mc73]

Thank you very much. Somehow, of course, I would like to have the full control from inside the app, in case of user defined nodes, where I would like to avoid editing by code the css. Maybe this can be possible in the future?

 

[Erel]

I don't think that it is technically possible. You can create multiple classes and switch the classes.

 

[StarinschiAndrei]

I tried to follow Erel example but it doesn't work for me.

.green:selected {
-fx-background-color:
linear-gradient(#f0ff35, #a9ff00),
radial-gradient(center 50% -40%, radius 200%, #b8ee36 45%, #80c800 50%);
-fx-background-radius: 6, 5;
-fx-background-insets: 0, 1;
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
-fx-text-fill: #395306;
}
Sub addButton
btn.Initialize("btn")
btn.Text="TEST"
btn.StyleClasses.Add("green")
MainForm.RootPane.AddNode(btn,10, 10, 100, 100)
End Sub

 

[Erel]

Please upload your project (File - Export as zip).

 

[StarinschiAndrei]

Please upload your project (File - Export as zip).

Here is the archive. Thank you

 

[Erel]

The 'selected' selector is not relevant for buttons. I'm using ToggleButtons in my example.

Styling buttons: https://www.b4x.com/android/forum/threads/styling-buttons-with-css.50679/#content

 

[StarinschiAndrei]

The 'selected' selector is not relevant for buttons. I'm using ToggleButtons in my example.

Styling buttons: https://www.b4x.com/android/forum/threads/styling-buttons-with-css.50679/#content

Thank you for yoour quick answer, i made the changes but it doesn't work. I added a big-yello in CSS file

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.SetFormStyle("UNIFIED")
   'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
   MainForm.Show
    MainForm.Stylesheets.Add(File.GetUri(File.DirAssets,"buttonStyle.css"))
    btn.Initialize("btn")
   btn.Text="TEST"
   btn.StyleClasses.Add("big-yellow")
   MainForm.RootPane.AddNode(btn,10, 10, 100, 100)

here is the css file :

#big-yellow {
    -fx-background-color:
        #ecebe9,
        rgba(0,0,0,0.05),
        linear-gradient(#dcca8a, #c7a740),
        linear-gradient(#f9f2d6 0%, #f4e5bc 20%, #e6c75d 80%, #e2c045 100%),
        linear-gradient(#f6ebbe, #e6c34d);
    -fx-background-insets: 0,9 9 8 9,9,10,11;
    -fx-background-radius: 50;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Helvetica";
    -fx-font-size: 18px;
    -fx-text-fill: #311c09;
    -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.1) , 2, 0.0 , 0 , 1);
}

 

[Erel]

It is better to upload the project so it is easier for us to test. Try it with .big-yellow instead of #big-yellow.

 

[StarinschiAndrei]

It is better to upload the project so it is easier for us to test. Try it with .big-yellow instead of #big-yellow.

Thank you Erel , with .big-yellow it works well.

 

[StarinschiAndrei]

Is it possible to use pressed event in visual designer ?
How can i use something like in attached image ? The error that i got is in error image.

 

[Erel]

No. You must use a CSS file for this.

 

[StarinschiAndrei]

No. You must use a CSS file for this.

Thank you