Customization

Icons

DHTMLX Sidebar uses the default icons of the DHTMLX library. However, you can use another icon font pack. To do this, include the icon font on the page and assign its icons to Sidebar controls.

For example, to use the Font Awesome icon pack, include a link to its CDN after the source files of DHTMLX Sidebar:

<script type="text/javascript" src="../../codebase/sidebar.js"></script>
<link rel="stylesheet" href="../../codebase/sidebar.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" 
    integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" 
    crossOrigin="anonymous">

Then set an icon name as the value of the icon property in the object with the control parameters:

const sidebarData = [
    {
        icon: "fas fa-bold",
        twoState: true,
        value: "Bold"
    },
    {
        icon: "fas fa-underline",
        twoState: true,
        value: "Underline"
    },
    {        
        icon: "fas fa-italic",
        twoState: true,
        value: "Italic"
    },
    {
        icon: "fas fa-strikethrough",
        twoState: true,
        value: "Strikethrough"
    }
];

note

To use the Material Design icon pack, include a link to its CDN in the same way.

Use custom CSS classes

You can change the look and feel of a sidebar.

Related sample: Sidebar. Styling (custom CSS)

Follow these steps:

• Add one or more CSS classes with the settings you need. Place them in the <style> section of your HTML page or in a separate stylesheet. If you use a stylesheet, include it on the page:

<style>
    .my-first-class {
        /*some styles*/
    }
    
    .my-second-class {
        /*some styles*/
    }
</style>

• Specify the name of the class you created (or several class names separated by spaces) as the value of the css property in the Sidebar configuration:

const sidebar = new dhx.Sidebar("sidebar_container", {
    css:"my_first_class my_second_class"
});

For example:

<style>
    .custom,.custom--popup-menu {
        --dhx-background-primary: #3A434A;
        --dhx-background-secondary: #5a6872;
        --dhx-background-additional: #5a6872;
        --dhx-s-toolbar-background: var(--dhx-background-primary);

        --dhx-color-primary: #118d8d;
        --dhx-color-primary-hover: #49e9e9;
        --dhx-color-primary-active: #49e9e9;

        --dhx-font-color-primary: #fff;
        --dhx-font-color-secondary: rgba(255, 255, 255, 0.75);
        --dhx-font-color-additional: #fff;
    }
</style>

<script>
    const sidebar = new dhx.Sidebar("sidebar_container", {
        css: "custom",
    });

    sidebar.data.parse(data);
</script>