Customization

Styling Layout cells

There is a possibility to make changes in the look and feel of a layout by styling its cells.

For this you need to take the following steps:

  • add a new CSS class(es) with desired settings in the < style > section of your HTML page or in your file with styles (don't forget to include your file on the page in this case):
<style>
    .my_first_class {
        /*some styles*/
    }
 
    .my_second-class {
        /*some styles*/
    }
</style>

For example:

<style>
    .layout-header {
        background: #0288d1;
        color: #fff;
        font-size: 24px;
        font-weight: 800;
    }
</style>
  • specify the name of the created CSS class (or names of classes separated by spaces) as the value of the css property in the configuration of a Layout cell:
var layout = new dhx.Layout("layout_container",{
    row: [
        {
            header: "Sub Block Header row",
            css:"my_first_class my_second_class"
        }
    ]    
});

For example:

var layout = new dhx.Layout("layout_container", {
    rows: [
        {
            id: "toolbar",
            html: "Header",
            css: "dhx_layout-cell--border_bottom layout-header",
            gravity: false,
            height: "60px"
        }
    ]
});

Related sample:  Custom css - DHTMLX Layout

Back to top