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