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
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">
<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>
</table>
<script>
var dhxLayout;
var activeSkin = "dhx_skyblue";
function doOnLoad() {
    dhxLayout = new dhtmlXLayoutObject("parentId", "3L", activeSkin);
    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>