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 /

How to add format css classes to TinyMCE dropdown?


Reply


2 Posts   1068 Views

Avatar
knsqnt

Community Member, 85 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, 137 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 :-)

--

[url=http://www.nobrainer.dk/]Nobrainer Web[/url]