Documentation

Custom styles

This example shows how to change the Article Editor CSS to your custom styles.

<!DOCTYPE html>
<html>
<head>
    <title>Article Editor</title>
    <meta charset="utf-8">

    <!-- css -->
    <link rel="stylesheet" href="/your-folder/article-editor.min.css" />

    <!-- custom css -->
    <link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400i,700,700i&display=swap" rel="stylesheet">
    <style>
    .arx-content {
        padding: 40px;
    }
    .arx-content p,
    .arx-content div,
    .arx-content h1,
    .arx-content h2,
    .arx-content h3,
    .arx-content h4,
    .arx-content h5,
    .arx-content h5,
    .arx-content ol,
    .arx-content ul {
        font-family: 'PT Serif', serif;
        font-size: 18px;
        line-height: 1.555;
    }
    .arx-content h1 {
        font-size: 40px;
        line-height: 1.25;
    }
    .arx-content h2 {
        font-size: 24px;
        line-height: 1.4;
    }
    </style>
</head>
<body>
    <!-- element -->
    <textarea id="entry">
        <p>Content</p>
    </textarea>

    <!-- js -->
    <script src="/your-folder/article-editor.min.js"></script>

    <!-- call -->
    <script>
    ArticleEditor('#entry');
    </script>
</body>
</html>