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.

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

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

Demo

HTML

JavaScript

CSS

Open in CodePen

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

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