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.

New theme for your website
Specify URL of CSS-file with the content theme to apply on your website

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

The same is for Bootstrap. If you use Bootstrap theme - keep it according to a checkbox on the "Bootstrap" tab. Also you can 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).

New Bootstrap theme for your website
To apply new Bootstrap theme specify URL path with Bootstrap styles

Theming example

Bootstrap theming example

Demo
HTML
JavaScript
CSS
<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;
}
Demo
HTML
JavaScript
CSS
<div id="editor">
  <div class="container">
    <div class="row">
      <div class="col-12 col-sm-4 col-md-3">
        <p>This our sample uses Bootstrap 4 which is customized with additional CSS included to website and specified in N1ED configuration.</p>
      </div>
      <div class="col-12 col-sm-8 col-md-9 pl-5">
        <h2 class="mb-4">Styled buttons</h2>
        <a class="btn btn-success mr-3 mb-2" href="#">Success</a>
        <a class="btn btn-primary mr-3 mb-2" href="#">Primary</a>
        <a class="btn btn-secondary mr-3 mb-2" href="#">Secondary</a>
        <a class="btn btn-info mr-3 mb-2" href="#">Info</a>
        <a class="btn btn-warning mr-3 mb-2" href="#">Warning</a>
        <a class="btn btn-danger mr-3 mb-2" href="#">Danger</a>
        <a class="btn btn-dark mr-3 mb-2" href="#">Dark</a>
        <a class="btn btn-light mr-3 mb-2" href="#">Light</a>
        <br/>
        <p class="mt-3">Styles of these buttons are defined in options of current API key.</p>
      </div>
    </div>
  </div>
</div>
window.onEditorLoaded = function() {
  CKEDITOR.replace("editor", {
    width: 1080,
  });
}
body {
  padding: 20px;
  background-color: #F4F4F4 !important;
}

URLs of CSS files

Absolute (recommended) or relative URLs to your CSS files (theme stylesheets).

API parameter
include.css
Type
string[]
Default
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.

API parameter
include.includeCssToGlobalDoc
Type
boolean
Default
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.

API parameter
include.js
Type
string[]
Default
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.

API parameter
include.includeJsToGlobalDoc
Type
boolean
Default
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.

API parameter
ui.autoCompleteClasses
Type
string[]
Default
[]
Field for Autocomplete classes
Text field for including Autocomplete classes