DHTMLX Docs & Samples Explorer

### Skinning

Select Skin:
required CSS file:
dhtmlxwindows_dhx_blue.css

Skin Name | Corresponding CSS File
DHX SkyBlue | dhtmlxwindows_dhx_skyblue.css
DHX Web | dhtmlxwindows_dhx_web.css

Source

    <link rel="stylesheet" type="text/css" href="../../codebase/dhtmlxwindows.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_black.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_blue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_skyblue.css">
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxwindows_dhx_web.css">
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxwindows.js"></script>

    <script src="../../codebase/dhtmlxcontainer.js"></script>

    <div>
    Select Skin:
    <select id="skinChooser" onchange="changeSkin(this);">
        <optgroup label="DHX">
            <option value="dhx_skyblue">DHX SkyBlue</option>
            <option value="dhx_web">DHX Web</option>
        </optgroup>
    </select>
    <br><br>
    <p1>required CSS file: </p1>
    <div id="p1">dhtmlxwindows_dhx_blue.css</div>
    </div>
    <br>
    <table border="0" cellspacing="1" cellpadding="1" style="border: #909090 1px solid;">
    <th align="left">Skin Name</th>
    <th align="left">Corresponding CSS File</th>
    <tr><td colspan="2" style="height:1px;font-size:1px;border-top: #CECECE 1px solid;">&nbsp;</td></tr>
    <tr>
        <td align="left" valign="top">DHX SkyBlue</td>
        <td align="left" valign="top">dhtmlxwindows_dhx_skyblue.css</td>
    </tr>
    <tr>
        <td align="left" valign="top">DHX Web</td>
        <td align="left" valign="top">dhtmlxwindows_dhx_web.css</td>
    </tr>
    </table>
    <div id="winVP" style="position: relative; height: 500px; border: #cecece 1px solid; margin: 10px;"></div>
    <script>var dhxWins,
    wins;
    function doOnLoad() {
        dhxWins = new dhtmlXWindows();
        dhxWins.setSkin("dhx_skyblue");
        dhxWins.enableAutoViewport(false);
        dhxWins.attachViewportTo("winVP");
        dhxWins.setImagePath("../../codebase/imgs/");
        wins = new Array();
        for (var q = 0; q < 3; q++) {
            // wins[q] = dhxWins.createWindow("w"+q, 10+q*40, 10+q*25, 300, 250);
            wins[q] = dhxWins.createWindow("w" + q, 10 + q * 320, 25, 300, 250);
            wins[q].setText("dhtmlxWindow in new skin");
            wins[q].denyPark();
            wins[q].setIcon("");
            //wins[q].button("help").show();
            //wins[q].button("stick").show();
            wins[q].button("close").disable();
            wins[q].attachEvent("onClose", function() {});
        }
        document.getElementById("skinChooser").selectedIndex = 0;
    }
    function changeSkin(obj) {
        dhxWins.setSkin(obj.options[obj.selectedIndex].value);
        for (var q = 0; q < wins.length; q++) {
            wins[q].setText(obj.options[obj.selectedIndex].text);
        }
        document.getElementById("p1").innerHTML = "dhtmlxwindows_" + obj.options[obj.selectedIndex].value + ".css";
    }</script>