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.
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.
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 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 »