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.

Customising the CMS /

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

How to add format css classes to TinyMCE dropdown?

Go to End

2 Posts   1828 Views


Community Member, 107 Posts

25 May 2012 at 6:47am


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, 138 Posts

26 June 2012 at 9:12am

Edited: 26/06/2012 9:14am

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