Online DHTMLX Skin Builder

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 that helps you to define any color schema for the user interface of your application based on DHTMLX components (both Professional and Standard Editions). You can choose a preset color scheme from the available list or create your own. When you are editing skin colors, press the Apply button to see the result. When you choose a preset color scheme, the preview with the new settings will be loaded automatically.

How to Apply New Skin to Your Application

Once you get a color scheme you like, click the Download button to get a zip file with all the needed files (CSS and images).

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

To use a new color scheme, just place the new archive content into the directory where you already have the dhtmlx.css file and images folder. (Replace files if prompted, and remember to backup the images folder beforehand.) Also, place dhtmlx_custom.css after dhtmlx.css on your page.

Important: The beta version of DHTMLX Skin Builder doesn't let you choose your own skin name. The skin name can be only one of the following values: dhx_skyblue or dhx_web. The name depends on your 'Color presets' list box selection.

Using Generated Skin with Standalone Components

You still can use a 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:

In case of classic color preset:

In case of web color preset: