Skip to main content

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>
  • 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:

<style>    .layout-header {        background: #0288d1;        color: #fff;        font-size: 24px;        font-weight: 800;    }</style>
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: Layout. Custom Css