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, biapar, Willr, Ingo, swaiba

How to add format css classes to TinyMCE dropdown?


Go to End
Reply


2 Posts   1484 Views

Avatar
knsqnt

Community Member, 98 Posts

25 May 2012 at 6:47am

Hi,

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

Avatar
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