Styling
When integrating Editor with your site / app, you may find that you wish to customise the style of particular aspects of the interface it shows to end users, or have it integrate fully with a styling library such as Bootstrap. The look-and-feel of Editor is controlled completely through the use of CSS allowing easy customisation of Editor.
This section of the documentation discusses in detail the structure of the DOM elements that Editor uses, so you can apply suitable classes and styles in your CSS, and also discusses how Editor can be integrated with external CSS libraries.
SASS
The default Editor CSS is written in SCSS and compiled into CSS. Both the source SCSS file and the compiled CSS files are available in the css directory of the Editor download package. If you wish to customise the Editor CSS, you can either modify the original SCSS file and recompile, or edit the already compiled CSS file. A SCSS compiler is freely available to download from sass-lang.com or you can use the online compiler service at sassmeister.com if you don't want to install any additional software.
Styling manual
DOM structure
When considering the styling of Editor, it is important to understand the HTML structure that Editor uses to display its various components. Like the rest of Editor, the HTML that it uses is highly modularised with elements being reused for the various display options Editor presents. This page documents the HTML structure used for each component so you can provide styling information to have Editor match the look and feel that you required. Read more »
Bootstrap
Bootstrap is a CSS framework that lets you quickly and easily build a user interface that has a unified look and feel. Both DataTables and Editor provide integration options that makes it very easy to make use of Bootstrap's style files, with all the features of DataTables and Editor on top. Integrating DataTables and Editor into your Bootstrap based site is seamless. Read more »
Foundation
Foundation from Zurb is a CSS framework that allows rapid development of complex sites, and provides a wealth of styling options and Javascript components. Using a CSS framework such as Foundation gives you the ability to create a user interface with a unified look and feel very quickly. And DataTables, Editor and all of the DataTables extensions can be integrated directly with Foundation to ensure that it fits into the flow of your site / app perfectly. Read more »
jQuery UI
jQuery UI is a popular suite of Javascript widgets such as DatePicker, AutoComplete and Dialog. Although jQuery UI isn't a CSS framework in the same sense as Bootstrap it does provide a common styling framework for its widgets through its ThemeRoller component. Read more »