Start Building Professional
Web Apps Today

Online DHTMLX Skin Builder

Find the instructions on how to use the SkinBuilder at the bottom of the page.

Colour presets
Main colours:
Main:
Lights:
Border:
Window:
Background:
Content:
Color of background:
Color of header:
Color of border:
Color of content:
Toolbar/Menu color:
Selection colours:
Selection:
Selection's border:
Selection alpha:
Tabbar sel. alpha:
Selection:
Selection's border:
Text colours:
Text:

px

Title text:

px

Grid header text:

px

Calendar holidays text:

px

Header text:

px

Content text:

px

Grid, Tree text:

px

Menu, Toolbar text:

px

Form header text:

px

Selection text:
 
 
  [Help]

How to use DHTMLX Skin Builder

DHTMLX Skin Builder is a tool which helps you to define any color schema for the interface of your application based on DHTMLX components (both Professional and Standard editions). You can choose some preset color scheme from the available list or create your own. When editing skin colors you need to press Apply button to see the result. When you choose a preset, the preview will be reloaded with new settings automatically.

To view the result in full screen mode, use the button on top right corner of the preview frame. Use the same button to return to the frame view.

How to apply new skin to your application

When you got a color scheme you like, click Download button to get a zip file with all necessary files (css and images).

Generated style can be easily applied to your application if you use the components as dhtmlx.js/dhtmlx.css files (i.e. compiled library files, which are delivered with every dhtmlx component package starting from v.2.5 or can be created using libCompiler).

To use a new color scheme you need to place archive content into the directory where you have dhtmlx.css file and imgs folder (Replace files if asked. So please don't forget to backup imgs folder beforehand). Also, add dhtmlx_custom.css to your page after dhtmlx.css.

Important: Beta version of DHTMLX Skin Builder doesn't provide the ability to define your own skin name - the skin name is always dhx_skyblue.

Using generated skin with standalone components

You still can use generated color scheme with separate DHTMLX components (not compiled under dhtmlx.js/css files). For example, if you'd like to apply the skin to dhtmlxGrid, you'll need to complete the following steps:

  • unpack the skin package to the codebase folder of the grid
  • add <link href="dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css"...> to the page
  • add <link href="dhtmlxGrid/codebase/dhtmlx_custom.css"...> to the page
  • set dhx_skyblue skin for the grid