Jump to:

5450 Posts in 1672 Topics by 1197 members

Customising the CMS

SilverStripe Forums » Customising the CMS » Custom Styles in TinyMCE

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

Page: 1 2
Go to End
Author Topic: 8102 Views
  • Snowlord
    Avatar
    Community Member
    6 Posts

    Custom Styles in TinyMCE Link to this post

    What is the proper format to have custom CSS styles show up under the "styles" tab within TinyMCE??

    i.e:

    .newTitle {
       font-family: Verdana, Lucida, Arial, sans-serif;
       font-size: 10px;
       color: #fff;
       line-height: 20px;
    }

    I'm running the latest version (v2.3.4) of silverstripe. Have added the above css within the typography.css files as well as editor.css and nothing shows. Flushed it each time, even did a dev/build... nothing. The editor.css file had the @import "typography.css"; tag and the h1, h2, etc. tags work fine and I can adjust settings and it works, so I know it's using the typography.css file correctly. I've also manually plugged in the ".newTitle" class via the HTML section of TinyMCE and it displays, it just won't show on the "styles" drop-down!!!! Does it need to be labeled/formatted a specific way? Called something special to show in the "styles" drop down? Do I need to buy it dinner first?? What??!!

  • martimiz
    Avatar
    Forum Moderator
    1037 Posts

    Re: Custom Styles in TinyMCE Link to this post

    Adding styles to the typography.css file of your chosen theme should work (no food, drink or magic required). I tried again just now to be shure Had to flush my browsercache for the styles to appear though...

  • Snowlord
    Avatar
    Community Member
    6 Posts

    Re: Custom Styles in TinyMCE Link to this post

    So I throw my css style into my typography.css, refreshed the browser, and poof! all was right with the world... It shows in my style!! Then, in my excitement, I added all the other styles into the typography.css and changed the original one I got to work from ".newTitle" to ".mainHeadline". Went back in, flush my browser cache, did a dev/build, did a ?flush=1, and what showed... only the one style I had gotten to work originally ".newTitle"... and I had since changed the name of it to ".mainHeadline", so it shouldn't have even been there at all!

    So, now I go to a completely different computer that has never been to this site before, plug in the URL, and there it is again ".newTitle"! It's no longer in my typography.css, so where is it coming from??!! This is maddening!!!

  • martimiz
    Avatar
    Forum Moderator
    1037 Posts

    Re: Custom Styles in TinyMCE Link to this post

    I don't have this problem on any of my installations, but I really don't think this is a Silverstripe issue. Could it be the result of some form of serverside caching of css files? Seems like lots of other people run into this on the net, where css changes suddenly kick in after some time has passed...

  • elsbth
    Avatar
    Community Member
    8 Posts

    Re: Custom Styles in TinyMCE Link to this post

    I had the same problem, but it was the browser history that didn't have the updated css files. I just cleared my history (only cache) and my new style showed up in the Styles dropdown.

  • Carolg
    Avatar
    Community Member
    9 Posts

    Re: Custom Styles in TinyMCE Link to this post

    Hi Snowlord
    Wondering if you managed to resolve this? I am having the same problem; I've defined a style in typography.css, but it doesn't appear in the --Styles-- drop down, though when I plug the style manually in the HTML editor of TinyMce it's showing up fine, so I know it's working.
    Have done a dev/build flush, an admin flush, and cleared the browser cache.
    Have tried putting it in editor.css (which in theory should be the same since it's just importing typography.css) but no luck either.
    Do you (or anyone else!) have any suggestions?
    Thanks
    Carol

  • banal
    Avatar
    Community Member
    901 Posts

    Re: Custom Styles in TinyMCE Link to this post

    It's a bug in the current SilverStripe Versions (2.3.4 - 2.3.5 are affected I think). You have to set the path to the editor.css manually, by putting this line into mysite/_config.php

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

    The red colored part is the one you'll have to replace with your actual path to editor.css (if it's not already the right one).

  • Carolg
    Avatar
    Community Member
    9 Posts

    Re: Custom Styles in TinyMCE Link to this post

    Woop! Genius - that worked, thank you!
    I am using SS 2.3.6 so that's obviously affected too.
    And to help anyone else who might be looking at this, this is what I pasted into mysite/_config.php

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


    Where "wbl" is the name of my theme.

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