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

jqx-editor - applied to the editor.
jqx-editor-inline - applied to the editor when it is in inline mode.
jqx-editor-inline-focus - applied to the editor when it is focused and in inline mode.
jqx-widget - applied to the editor.
jqx-widget-content - applied to the editor's content area.
jqx-editor-content - applied to the editor's content area.
jqx-rc-all - applied to the editor. Adds rounded corners to the widget.
jqx-widget-header - applied to the editor and its toolbar.
jqx-fill-state-disabled - applied to the editor when it is disabled.
jqx-editor-window - applied to the editor's dialog windows.
jqx-editor-toolbar - applied to the editor's toolbar.
jqx-editor-toolbar-inline - applied to the editor's toolbar when the editor is in inline mode.
jqx-editor-toolbar-icon - applied to the tool icons.
jqx-editor-toolbar-item - applied to the tools.
jqx-editor-toolbar-group - applied to the tool groups.
jqx-editor-toolbar-button - applied to the tool buttons.
jqx-editor-color-bar - applied to the color bar of a color picker tool.
jqx-editor-color-picker - applied to the color picker tool.
jqx-editor-color-picker-selected-cell - applied to the selected cell of a color picker.

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

Add the above CSS classes related to jqxEditor
After each CSS class, add your theme name.
For example:
jqx-editor-arctic

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

<script type="text/javascript">
    $(document).ready(function () {
        $("#editor").jqxEditor({ width: '800px', height: '400px', theme: 'arctic' });
    });
</script>

The sample below demonstrates how to set the 'Arctic' theme to jqxEditor.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>HTML Editor.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.arctic.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" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></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>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#editor').jqxEditor({
                height: "400px",
                width: '700px',
                theme: 'arctic'
            });
        });
    </script>
    <textarea id="editor">
    </textarea>
</body>
</html>