Theming you content with CSS
This is important to let your content managers' ability to write new content with displaying the styles that are actually applied to this content. Your website can set fonts, colors, backgrounds, margins, and other things for website visitors. N1ED will use them inside the editor box too.
For example, the theme of your website is defined in some CSS file, we will use https://n1ed.com/css-demo/codepen-style-1.css
as a sample. All your website pages include it in their HTML code.

The same CSS you can specify and for N1ED too. Set the URL of this CSS inside N1ED options ("Configure" button) on the tab "Content Theme" in the "URLs of CSS files" field. After doing that N1ED uses this theme as style inside the WYSIWYG editor.
If the theme of your administration panel (dashboard) does not include the same styles of frontend pages, keep the option "Include CSS files to the whole page" checked - this will also apply themes to it too. This is required to show correct styles inside the dialogs of N1ED.
Bootstrap support
If you use your own Bootstrap theme set the URL of your Bootstrap build, if you use a custom one. This URL should lead to the directory where styles and scripts are stored in.

In our second example you can see how we add https://n1ed.com/css-demo/codepen-style-2.css
with some Bootstrap styles defined inside and they apply both to contents and to preview in the sidebar (click on some button to see it).

Theming example
Bootstrap theming example
<div id="editor">
<h1>Hi, I'm a content</h1>
<p>See my colors and styles - I'm displayed right as defined in the theme of website included in.</p>
<img src="https://n1ed.com/img/demo/bluberry_shadow.png" alt="Image example"/>
</div>
window.onEditorLoaded = function() {
CKEDITOR.replace("editor", {
width: 950,
});
}
body {
padding: 20px;
background-color: #F4F4F4 !important;
}
URLs of CSS files
Absolute (recommended) or relative URLs to your CSS files (theme stylesheets).
include.css
string[]
null
Include CSS files to the whole page
If checked, all the CSS files will be added not only to internal area of the editor with content but also to whole the page.
include.includeCssToGlobalDoc
boolean
null
URLs of JS files
Absolute (recommended) or relative URLs to your JavaScript files. This is for deep tuning only, in most cases you do not need to include scripts into your content area.
include.js
string[]
null
Include JS files to the whole page
If checked, all the JS files will be added not only to internal area of the editor with content but also to whole the page.
include.includeJsToGlobalDoc
boolean
null
Autocomplete classes for all widgets
These classes will be available in autocomplete dropdown when you add classes to some widget. You can add there some class names from your website theme which you use to style content.
ui.autoCompleteClasses
string[]
[]
