How do I change the styling of content in the rich-text editor?  

Site Design

The content in the rich-text editor will be styled according to the activated Theme in the Design tab.   If you need the styling of content in the rich-text editor to be different from the Theme styling, then you may use the .mceContentBody selector in the Theme to do that.  For example, the background color for the website might be set to black in the Theme, but you might want to use a white background for the rich-text editor.  In order to do this, you would add the following to your Theme.

.mceContentBody
{
    background-color: white;
}

Below is an example of the .mceContentBody content that comes with the default Themes

/****************************************************************************

/* WYSIWYG Editor Defaults - In order to keep page editing consistent across
themes, these values "override" the theme's colors so that editing is always
in black on white.  This section should not be edited.
*****************************************************************************/
.mceContentBody,
.mceContentBody .image-left-primary,
.mceContentBody .image-left-secondary,
.mceContentBody .image-right-primary,
.mceContentBody .image-right-secondary,
.mceContentBody .link-button-primary-large,
.mceContentBody .link-button-primary-small,
.mceContentBody .link-button-secondary-large,
.mceContentBody .link-button-secondary-small,
.mceContentBody .link-content-more,
.mceContentBody .link-menu-item,
.mceContentBody .paragraph-indent,
.mceContentBody .paragraph-no-margins,
.mceContentBody .paragraph-no-top-margin,
.mceContentBody .paragraph-no-bottom-margin,
.mceContentBody .text-annotate,
.mceContentBody .text-box-example,
.mceContentBody .text-box-notice,
.mceContentBody .text-box-primary,
.mceContentBody .text-box-secondary,
.mceContentBody .text-box-warning,
.mceContentBody .text-fine-print,
.mceContentBody .text-highlighter,
.mceContentBody .text-quote
{
font-size: 90% !important;
font-family: arial, sans-serif !important;
background: none !important;
background-color: white !important;
border-color: black !important;
color: black !important;
}

Back