DHTMLX Docs & Samples Explorer

### Skinning

Skin Name | CSS to include
DHX SkyBlue | dhtmlxlayout_dhx_skyblue.css
DHX Blue | dhtmlxlayout_dhx_blue.css
DHX Black | dhtmlxlayout_dhx_black.css
DHX Web | dhtmlxlayout_dhx_web.css

Source

    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxlayout.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_black.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxlayout_dhx_web.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxlayout.js"></script>
    <script src="../../codebase/dhtmlxcontainer.js"></script>
    <style>
        td { cursor: default; }
        tr.sep td { font-size: 2px; height: 5px; }
    </style>

    <div id="parentId" style="position: relative; top: 20px; left: 20px; width: 600px; height: 400px;"></div>
    <table style="margin-top: 40px; margin-left: 20px;" cellspacing="1" cellpadding="1">
        <tr>
            <td align="center"><b>Skin Name</b></td>
            <td align="center"><b>CSS to include</b></td>
        </tr>
        <tr class="sep"><td colspan="2"></td></tr>
        <tr id="tr_dhx_skyblue" onclick="changeSkin('dhx_skyblue');">
            <td><a href="javascript:void(0);" onclick="changeSkin('dhx_skyblue');">DHX SkyBlue</a></td>
            <td>dhtmlxlayout_dhx_skyblue.css</td>
        </tr>
        <tr id="tr_dhx_blue" onclick="changeSkin('dhx_blue');">
            <td><a href="javascript:void(0);" onclick="changeSkin('dhx_blue');">DHX Blue</a></td>
            <td>dhtmlxlayout_dhx_blue.css</td>
        </tr>
        <tr id="tr_dhx_black" onclick="changeSkin('dhx_black');">
            <td><a href="javascript:void(0);" onclick="changeSkin('dhx_black');">DHX Black</a></td>
            <td>dhtmlxlayout_dhx_black.css</td>
        </tr>
        <tr id="tr_dhx_web" onclick="changeSkin('dhx_web');">
            <td><a href="javascript:void(0);" onclick="changeSkin('dhx_web');">DHX Web</a></td>
            <td>dhtmlxlayout_dhx_web.css</td>
        </tr>
    </table>
    <script>var dhxLayout,
    dhxLayout2,
    dhxGrid;
    var activeSkin = "dhx_skyblue";
    function doOnLoad() {
        dhxLayout = new dhtmlXLayoutObject("parentId", "3L", activeSkin);
        dhxLayout.cells("a").setText("No news is good news");
        dhxLayout.cells("b").setText("East or West - home is best");
        dhxLayout.cells("c").setText("Many a little makes a mickle");
        document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
    }
    function changeSkin(skin) {
        dhxLayout.setSkin(skin);
        document.getElementById("tr_" + activeSkin).style.backgroundColor = "#FFFFFF";
        activeSkin = skin;
        document.getElementById("tr_" + activeSkin).style.backgroundColor = "#CFCFCF";
    }</script>