Important changes to Tiny Cloud pricing > Find out more

Boilerplate Content CSS

Learn how to set up CSS for your site to integrate TinyMCE.

Contribute to this page

There are a few advanced features in TinyMCE that require some CSS to be added to the page that displays the contents produced by the editor. In general, you want to get an as clean output as possible from a rich text editor, and some of the more advanced features like captioned images use CSS rather than inline styles to render correctly.

This Boilerplate CSS can be used to style these advanced elements. This CSS file can be used within the editor using the content_css option and also on your page where the saved content is presented.

/* Image captions using the HTML5 figure element */
figure.align-left {
    float: left;
}

figure.align-right {
    float: right;
}

figure.image {
    display: inline-block;
    border: 1px solid gray;
    margin: 0 2px 0 1px;
    background: #f5f2f0;
}

figure.image img {
    margin: 8px 8px 0 8px;
}

figure.image figcaption {
    margin: 6px 8px 6px 8px;
    text-align: center;
}

/*
 Alignment using classes rather than inline styles
 check out the "formats" option
*/
img.align-left {
    float: left;
}

img.align-right {
    float: right;
}

/* Basic styles for Table of Contents plugin (toc) */
.mce-toc {
    border: 1px solid gray;
}

.mce-toc h2 {
    margin: 4px;
}

.mce-toc li {
    list-style-type: none;
}

/*
 Removes margins on paragraphs,
 might be useful for mail clients
*/
/*p { margin: 0 }*/


/* Override CSS styles when within the editor only */
/* .mce-content-body figure {...} */

/* Override styles for the inline boundaries used within the editor */
/* .mce-content-body *[data-mce-selected="inline-boundary"] {...} */


Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.