jQuery Responsive Panel CSS Styling and Appearance

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 jqxResponsivePanel.

jqx-responsive-panel - applied to the widget.
jqx-widget - applied to the widget.
jqx-widget-content - applied to the widget.
jqx-rc-all - applied to the widget and its toggle button. Adds rounded corners to these elements.
jqx-responsive-panel-collapsed - applied to the widget when it is collapsed.
jqx-responsive-panel-expanded - applied to the widget when it is expanded.
jqx-responsive-panel-button - applied to the widget's toggle button.
jqx-fill-state-normal - applied to the widget's toggle button.
jqx-fill-state-hover - applied to the widget's toggle button when it is hovered.
jqx-fill-state-pressed - applied to the the widget's toggle button when it is clicked.
jqx-responsive-panel-button-inner - applied to the toggle button's inner div (icon).
jqx-menu-minimized-button - applied to the toggle button's inner div (icon).

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

Add the above CSS classes related to jqxResponsivePanel.
After each CSS class, add your theme name.
For example:
jqx-responsive-panel-darkblue

To apply your custom style to jqxResponsivePanel, you need to set its 'theme' property (option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        $('#jqxResponsivePanel').jqxResponsivePanel({ theme: 'darkblue', width: 250, height: 350, collapseBreakpoint: 800, toggleButton: $('#toggleResponsivePanel') });
    });
</script>

The sample below demonstrates how to set the 'darkblue' theme to jqxResponsivePanel.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Responsive Panel Styling Sample</title>
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.darkblue.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/jqxresponsivepanel.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxResponsivePanel').jqxResponsivePanel({ theme: 'darkblue', width: 250, height: 350, collapseBreakpoint: 500, toggleButton: $('#toggleResponsivePanel') });
        });
    </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 style="width:400px;">
    <div style="box-sizing: border-box; margin-bottom: 5px; width: 100%; height: 50px;
        padding: 10px 0 0 10px; background-color: #334466;">
        <div id="toggleResponsivePanel">
        </div>
    </div>
    <div id="jqxResponsivePanel" style="padding: 5px;">
        <h4>
            jQWidgets</h4>
        <p>
            jQWidgets provides a comprehensive solution for building professional web sites
            and mobile apps. It is built entirely on open standards and technologies like HTML5,
            CSS, Javascript and jQuery. jQWidgets enables responsive web development and helps
            you create apps and websites that look beautiful on desktops, tablets and smart
            phones.</p>
        <p>
            jQWidgets is a feature complete framework with professional touch-enabled jQuery
            widgets, themes, input validation, drag & drop plug-ins, data adapters, built-in
            WAI-ARIA accessibility, internationalization and MVVM support.</p>
    </div>
</bod>
</html>