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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

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   2196 Views

Avatar
MarioSommereder

Community Member, 107 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