Jump to:

520 Posts in 248 Topics by 263 members

Content Editor Discussions

SilverStripe Forums » Content Editor Discussions » Styles in editor.css not visible in published page

Forum for content editors and CMS users.

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

Page: 1
Go to End
Author Topic: 2498 Views
  • ianpiper
    Avatar
    Community Member
    32 Posts

    Styles in editor.css not visible in published page Link to this post

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

  • Aram
    Avatar
    Community Member
    598 Posts

    Re: Styles in editor.css not visible in published page Link to this post

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

  • alirobe
    Avatar
    Community Member
    35 Posts

    Re: Styles in editor.css not visible in published page Link to this post

    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}

    2498 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.