Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Content Editor Discussions /

Forum for content editors and CMS users.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Styles in editor.css not visible in published page


Reply


3 Posts   2549 Views

Avatar
ianpiper

Community Member, 32 Posts

12 April 2009 at 1:04am

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;
}

Avatar
Carbon Crayon

Community Member, 598 Posts

12 April 2009 at 1:25pm

Edited: 12/04/2009 1:26pm

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.....

Avatar
alirobe

Community Member, 35 Posts

30 June 2009 at 1:21am

Edited: 30/06/2009 1:24am

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}