Documentation

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxScrollBar.

jqx-widget - applied to jqxScrollBar.
jqx-scrollbar - applied to jqxScrollBar.
jqx-scrollbar-state-normal - applied to the scrollbar in default state.
jqx-scrollbar-button-state-normal - applied to the scrollbar buttons in default state.
jqx-scrollbar-button-state-hover - applied to the scrollbar buttons in hovered state.
jqx-fill-state-hover - applied to the scrollbar buttons and thumb in hovered state.
jqx-scrollbar-button-state-pressed - applied to the scrollbar buttons in pressed state.
jqx-fill-state-pressed - applied to the scrollbar buttons and thumb in pressed state.
jqx-scrollbar-thumb-state-normal-horizontal - applied to the horizontal scrollbar thumb in default state.
jqx-scrollbar-thumb-state-hover-horizontal - applied to the horizontal scrollbar thumb in hovered state.
jqx-scrollbar-thumb-state-pressed-horizontal - applied to the horizontal scrollbar thumb in default state.
jqx-scrollbar-thumb-state-normal - applied to the vertical scrollbar thumb in default state.
jqx-scrollbar-thumb-state-hover - applied to the vertical scrollbar thumb in default state.
jqx-scrollbar-thumb-state-pressed - applied to the vertical scrollbar thumb in default state.
jqx-fill-state-disabled - applied to the scrollbar when it is disabled.

When you create a custom style with colors and backgrounds for jqxScrollBar, you need to do the following:

Add the above CSS classes related to jqxScrollBar
After each CSS class, add your theme name.
For example: jqx-scrollbar-summer
To apply your custom style to jqxScrollBar, you need to set its 'theme' property(option) to point to your theme name string.
```
<script type="text/javascript">
    $(document).ready(function () {
        $("#jqxScrollBar").jqxScrollBar({ theme: 'summer', width: 250, height: 18 });
    });
</script>
```

The sample below demonstrates how to set the 'Summer' theme to jqxScrollBar.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jQuery ScrollBar - CSS Styling Sample </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // Create ScrollBar
            $("#jqxScrollBar").jqxScrollBar({theme: 'summer', width: 250, height: 18 });
            // Create Vertical ScrollBar
            $("#jqxVerticalScrollBar").jqxScrollBar({ theme: 'summer', width: 18, height: 250, vertical: true });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div style='margin-top: 10px;' id='jqxVerticalScrollBar'>
    </div>
    <div style='margin-top: 10px;' id='jqxScrollBar'>
    </div>
</body>
</html>