Jump to:

22977 Posts in 11806 Topics by 2826 members

General Questions

SilverStripe Forums » General Questions » Typography and TinyMCE

General questions about getting started with SilverStripe that don't fit in any of the categories above.

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

Page: 1 2
Go to End
Author Topic: 2963 Views
  • Mo
    Avatar
    Community Member
    485 Posts

    Typography and TinyMCE Link to this post

    Hi All,

    Reading the Silverstripe book (been quite interesting so far) , made me think I should try and get the typography styles working in the CMS (I have tried this before with no success).

    According to the book, any CSS with a .typography namespace in the typography.css file should also style the content in TinyMCE, however this doesn't (and never has) work :s.

    I have examined the CMS in firebug, and TinyMCE doesn't even seem to be applying the styles, but viewing the source shows they have loaded.

    Any ideas? Anyone had a similar issue? Am I missing something?

    I am using SS2.3.3 and Firefox 3.5, an example of the CSS I am using is as follows:

    /* Headings and content styles */
    .typography h1,
    .typography h2,
    .typography h3,
    .typography p,
    .typography table {
       font-family: Arial, Helvetica, sans-serif;
       font-weight: normal;
       margin: 0 0 1em 0;
    }

    .typography h1 {
       font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
       font-weight: bold;
       font-size: 19pt;
       color: #0099CC;
       margin-bottom: 0;
    }

    .typography h2 {
       font-size: 11pt;
       color: #0099CC;
       margin-top: 1em;
       margin-bottom: 0.25em;
    }

    .typography h3 {
       font-size: 10pt;
       color: #0099CC;   
    }

  • Mo
    Avatar
    Community Member
    485 Posts

    Re: Typography and TinyMCE Link to this post

    Ok, I worked this out. TinyMCE doesn't actually use the Typography.css file directly, what it does do is load editor.css into its iframe and use any styles that exist in there.

    So I have added an: @import url("typography.css"); to my editor.css file and pissed about with my cache loads and now it seems to work.

    I feel this begs me to question however, why does TinyMce load editor.css into its iframe rather than Typography.css? Also, why is Typography.css loaded into the CMS <head> when it doesn't actually do anything?

    Is this a bug?

    Ta,

    Mo

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Typography and TinyMCE Link to this post

    From my understanding, editor.css contains the editor styles (also special things like "broken-links" styling etc.). It loads typography.css to make typography styles from the frontend available in the WYSIWYG editor.

    So you can see it as following:
    editor.css WYSIWYG editor only
    typography.css WYSIWYG editor & frontend
    layout.css and other stylesheets frontend only

    Not sure why typography.css is loaded into the CMS though.. could be some messed up Requirements call somewhere.

  • dalesaurus
    Avatar
    Community Member
    283 Posts

    Re: Typography and TinyMCE Link to this post

    Here is how I understand things;

    typography.css - namespaced classes of styles for CMS-editable text areas on site
    editor.css - hacks and fixes to make .typographys things look OK in the wee TinyMCE window

    Typography.css is loaded in the CMS to ensure the TinyMCE content looks the same as the site. What goes wrong is when you don't class everything a .typography, styles can run amok and hijack styles in the CMS. One of my projects has awesome orange buttons in the backend now.

    It took me a while to get the whole concept and it does make sense. You want a systematic way to make the site content look the same as it does in the backend. Non-technical users think it's magic.

    However the concept is not communicated or documented very well. The book does a marginally better job than the wiki, but I still had to rely on experience and intuition to figure it out.

    Just cooking this up, the hotness would be a built in CSS editor for both classes in the CMS. It could use iframes to load both TinyMCE and a Page template. It could also ensure your classes are scoped correctly as to not screw with other things.

  • Juanitou
    Avatar
    Community Member
    322 Posts

    Re: Typography and TinyMCE Link to this post

    Hi!

    Well, that used to work… before updating to 2.3.4! Now the WYSIWYG content is not been styled with typography.css, even if it’s being loaded in the header. Has somebody remarked it?

    Regards,
    Juan

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Typography and TinyMCE Link to this post

    Yes, I noticed that too.
    Was able to fix it by adding the following to mysite/_config.php

    HtmlEditorConfig::get('cms')->setOption('content_css', 'cms/css/editor.css, mysite/css/editor.css');

    Replace the red colored part with the path to your stylesheet...

  • dalesaurus
    Avatar
    Community Member
    283 Posts

    Re: Typography and TinyMCE Link to this post

    So it looks like this was known and fixed a few days ago?

    http://open.silverstripe.org/ticket/4634
    http://open.silverstripe.org/ticket/4493

  • Juanitou
    Avatar
    Community Member
    322 Posts
    2963 Views
Page: 1 2
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.