### View Customized StyleClass

Examples using a Customized Style Classes.
Example Slider
CSS File Main.css located in the Files (=dirassets) folder
Build an external CSS file, e.g. Main.css, located in the Files folder, add the file to the B4J IDE Files Manager.
Define the properties in the CSS file for the slider which is defined as slider1 (see B4J Code).
The slider thumb icon is set by using image file "arrowdown.png" which is located in the Files folder and added to the B4J IDE Files Manager.
/*
Slider CSS Customized Style Example
*/
.slider1 .thumb {
-fx-background-color: transparent;
-fx-border-radius: 0;
-fx-border-color: transparent;
-fx-background-image:url("arrowdown.png");
-fx-background-repeat: no-repeat;
-fx-background-position: center;
-fx-padding: 12;
}
.slider1 .track {
-fx-background-color: rgb(255,0,0);
}
B4J Code
Add the Stylesheet "main.css" to the Form and add the Style Class "slider1" to the Slider
`Sub Process_Globals
Private Slider1 As Slider
...
End Sub`
`Sub AppStart (Form1 As Form, Args() As String)
' Add the stylesheet
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "Main.css"))
' Add the styleclass
Slider1.StyleClasses.Add("slider1")
Example ListView
CSS File CustomStyles.css located in the Files (=dirassets) folder
.ListViewCustomStyle .list-cell, .list-view {
-fx-background-color: transparent;
-fx-border-size: 5;
-fx-border-color: red;
}
B4J Code
`Sub Process_Globals
Private ListView1 As ListView
...
`Sub AppStart (Form1 As Form, Args() As String)
...
' Add the stylesheet
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "CustomStyles.css"))
' Add the styleclass
ListView1.StyleClasses.Add("ListViewCustomStyle")
Example ProgressBar
CSS File CustomStyles.css located in the Files (=dirassets) folder
.red-progress-bar .bar {
-fx-background-color: red;
-fx-background-radius: 5;
}
.green-progress-bar .bar {
-fx-background-color: green;
-fx-background-radius: 10;
}
.blue-progress-bar .bar {
-fx-background-color: blue;
-fx-background-radius: 20;
}
B4J Code
`Sub Process_Globals
...
Private ProgressBar1 As ProgressBar
Private ProgressBar2 As ProgressBar
Private ProgressBar3 As ProgressBar
...
End Sub`
`Sub AppStart (Form1 As Form, Args() As String)
...
' Add the stylesheet
MainForm.Stylesheets.Add(File.GetUri(File.DirAssets, "CustomStyles.css"))
' Add the styleclass
ProgressBar1.StyleClasses.Add("red-progress-bar")
ProgressBar2.StyleClasses.Add("green-progress-bar")
ProgressBar3.StyleClasses.Add("blue-progress-bar")
````

Changed: , Category: CSS, File: T6C177M1294.htm, ID: 1294