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>
    .bg-gray {
        background-color: #bea3a3;
    }
    .bg-blue {
        background-color: rgb(127, 127, 231);
    }
</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",{
    cols: [
        {
            header: "Sub Block Header row",
            css:"my_first_class my_second_class"
        }
    ]    
});

For example:

var layout = new dhx.Layout("layout_container", {
    header: "Main Block Header",
    cols: [
        {
            header: "Sub Block Header row",
            css: 'bg-gray'
        },
        {
            header: "Sub Block Header row",
            cols: [
                {
                    header:"Left cols",
                    css: 'bg-blue'
                }
            ]
        }
    ]
});
Back to top