DHTMLX
  
DHTML eXtensions - professional Ajax components for advanced web UI

Online DHTMLX Skin Builder beta

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 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 are what you need, press Apply button to see the result. When you choose a preset one, the preview with the new settings will be reloaded automatically.

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 the 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 that can be created using libCompiler or delivered with every dhtmlx component package starting from v.2.5).

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

Important: Beta version of DHTMLX Skin Builder doesn't provide the ability to define your own skin name - the skin name can have just one of the next values: dhx_skyblue or dhx_web. The appropriate name depends on your 'Color presets' listbox selection.

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:

In case of classic color preset:

  • 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
In case of web color preset:
  • unpack the skin package to the codebase folder of the grid
  • add <link href="dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_web.css"...> to the page
  • add <link href="dhtmlxGrid/codebase/dhtmlx_custom.css"...> to the page
  • set dhx_web skin for the grid

DHTMLX
Copyright  © 1998-2010  DHTMLX LTD. 
All rights reserved.