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

Avatar
theGermaniac

25 May 2012 at 6:47am Community Member, 82 Posts

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

26 June 2012 at 9:12am (Last edited: 26 June 2012 9:14am), Community Member, 135 Posts

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]