Docs

Apply website CSS to your content in the editor

This is important to let your content managers' ability to write new content with displaying the styles 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 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 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 Visual enabling and configuring Bootstrap Editor 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;
}