Editor Content CSS
Mura's web editor, CKEditor, can include your own CSS files to be used to apply style to the editor content. Generally, these styles should reflect the CSS used in the target pages where the content is to be displayed.
Mura automatically scans for specific files within your theme, specifically for this purpose. Listed below are the files Mura checks for in the specified order.
{context}/{SiteID}/includes/themes/{ThemeName}/css/editor/editor.css.cfm{context}/{SiteID}/includes/themes/{ThemeName}/css/editor/editor.css
Using the first option with a ".cfm" file extension, allows you the ability to include dynamic code, in the event you wanted to do so.
The default theme that ships with Mura, MuraBootstrap3, includes a sample file with basic styles included. You can find it under {context}/{SiteID}/includes/themes/MuraBootstrap3/css/editor/editor.css. Any style definitions found in the file are applied to content entered in the editor body/content area.
For example, if you wanted to set the color of <h2> and <h3> tags to "green", you could add the following to your CSS file.
h2, h3 {
color: green;
}
The example image below illustrates the result of the <h2> tag (visible due to the Show Blocks button being enabled).
Your style definitions may also affect the styles of elements in the Paragraph Format select menu.
Where to Learn More
The CKEditor documentation has more information. The section on Applying Block-Level Text Formats contains some useful information as well.