Documentation

Style & CSS

Article has own styles of content. All styles are written for the parent class arx-content. For example:

.arx-content p {
    font-size: 16px;
}
.arx-content .align-center {
    text-align: center;
}

If you want to look the content in the editor exactly like on your website, you need to create your own CSS style file and connect it after the editor CSS file.

For example, you can create a file and write your own paragraph styles in it:

.arx-content p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

You can completely override all content styles by changing the editor's content class with the editor.classname setting (see the detailed description of the settings).

To do this, specify the setting when the editor starts, for example:

ArticleEditor('#entry', {
    editor: {
        classname: 'my-post'
    }
});

And now write in your style file new rules:

.my-post p {
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    padding: 0;
    margin-bottom: 18px;
}

As a result, the general logic of styles is as follows:

  1. In order for the editor to display content in the same styles as on your site, you need to create your own stylesheet and override the initial styles.
  2. If you use align, valign, outset, and grid in the editor, then your site should have the same CSS with the styles of these things.

See how to change grid styles.

See an example how to use custom styles.