I want to style some text in an article as source code. So I created a new class, .sourcecode, in editor.css (style is at the end of this posting, but probably not relevant). This style is applied to text in the TinyMCE editor window but not visible in the published page. The class="sourcecode" modifier is there, it is just not visible.

I am guessing this is because page templates in SS don't import editor.css. However, in this case, how do you apply in the editor styles that you have added to typography.css? They don't seem to be accessible within the editor.

Apologies if this is a FAQ - I couldn't find anything on this.

Ian.
--

.sourcecode {
width: 550px;
margin-left: 10px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f3f3f3;
font-family: "Courier New", courier, monospace;
}

Hi Ian

Thats strange as class styles from typography should be available in the editor, at least they are for me.....check that your editor file is importing the typography file....?

Alternatively as a *dirty* fix you could add the style to both typography and editor.....

Just to clarify on what aram said:

I believe the proper practice is to have everything you currently have in your editor.css file into your typography.css file, then add the following line to your editor.css file:

@import url('typography.css');

The @import must be on the first line of the CSS file.

The reason for this is to apply uniform typography rules while allowing some overriding flexibility.

You can also do the following to adjust the behaviour of just the backend editor

@import url('typography.css');

/* options for backend editor */
body.mceContentBody {font-size:95%; color:black}