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 jqxScrollView:

.jqx-scrollview - applying to the jqxScrollView widget.
.jqx-scrollview-button - applying to the navigation buttons.

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

Add the above CSS classes related to jqxScrollView
After each CSS class, add your theme name.
For example: jqx-scrollview-summer
To apply your custom style to jqxScrollView, you need to set its 'theme' property(option) to point to your theme name string.
The sample below demonstrates how to set the 'Summer' theme to jqxScrollView.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>JavaScript ScrollView Widget with Summer Theme</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css"/>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" />
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <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/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#photoGallery').jqxScrollView({ width: 600, height: 450, theme: 'summer', buttonsOffset: [0, 0] });
        });
    </script>
    <style type="text/css">
        .photo
        {
            width: 600px;
            height: 450px;
            background-color: #000;
            background-position: center;
            background-repeat: no-repeat;
        }
    </style>
<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 id="photoGallery">
        <div><div class="photo" style="background-image: url(../../images/nature1.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature2.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature3.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature4.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature5.jpg)"></div></div>
        <div><div class="photo" style="background-image: url(../../images/nature6.jpg)"></div></div>
    </div>
</body>
</html>

Styling and Appearance

The result of the above code is: