Jump to:

5540 Posts in 1738 Topics by 1224 members

Customising the CMS

SilverStripe Forums » Customising the CMS » How to add format css classes to TinyMCE dropdown?

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

Page: 1
Go to End
Author Topic: 960 Views
  • theGermaniac
    Community Member
    82 Posts

    How to add format css classes to TinyMCE dropdown? Link to this post


    I'm trying to add classes to the TinyMCE -- Format -- dropdown. It's said, that you have to add them inside the editor.css file, but it doesn't work.

    I also tried to edit the editor.css file inside /cms/css/, but that didn't work either. What am I doing wrong?

    The SilverStripe version running is 2.4.7, I'm not using editor.css inside my frontend and this is how my editor.css looks:

    body.mceContentBody {
    width: 480px;

    .highlighted {
    color: #009ee0;

    .iconed {
    margin-top: 20px;
    padding-left: 21px;
    background-image: url('../img/iconed.png');
    background-position: left top;
    background-repeat: no-repeat;

    .columned-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;

    .columned-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px;

    Best, Mario

  • Nobrainer Web
    Community Member
    134 Posts

    Re: How to add format css classes to TinyMCE dropdown? Link to this post

    The trick is to add .typography infront of any styles you want to add to the editor.

    I have mytheme/css/typography.css that i include in my theme files.
    For any content elements that will hold text that needs the typography styling, i will add the class="typography".

    In typography.css i will have styles like:
    The part after .typography will be the styles available in the format dd.
    .typography img.border { /* this style wil be available for images */}

    .typography .bold {
       font-weight: 600;   

    .typography .left {
       float: left;
       margin-right: 5px;

    Hope this helps


    Nobrainer Web

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.