B4J Tutorial Using external CSS file to style a ToggleButton

mc73

Well-Known Member
Licensed User
Tried
B4X:
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

Administrator
Staff member
Licensed User
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:
B4X:
.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;
}
B4X:
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

Well-Known Member
Licensed User
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? :)
 

StarinschiAndrei

Active Member
Licensed User
I tried to follow Erel example but it doesn't work for me.
upload_2016-7-14_13-50-19.png

.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
 

StarinschiAndrei

Active Member
Licensed User
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
upload_2016-7-14_18-28-51.png

B4X:
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 :
B4X:
#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);
}
 

StarinschiAndrei

Active Member
Licensed User
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.
upload_2016-7-17_21-15-1.png
upload_2016-7-17_21-10-30.png
 
Top