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.

Archive /

Our old forums are still available as a read-only archive.

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

How to add custom styles in TinyMCE?

Go to End

3 Posts   112242 Views


Community Member, 52 Posts

19 May 2008 at 10:38pm

Edited: 19/05/2008 10:39pm

Hi all:

I need to add custom styles (new classes and new styles to p, h,...).
I want to add this styles in editors drop down menu.
I have read TinyMCE manual and add content_css with my styles but in doesn´t work...
Wich is the right way to do it?

Thanks in advance...



8 Posts

20 May 2008 at 1:32am

Hey nomen, we needed to do the same thing for our projects just recently. You can go into the HtmlEditorField.php file in sapphire/forms/ and go down to line 248. This will probably have a commented line that is a style dropdown for the editor. If you uncomment it, that will allow you to add custom styles to select and place their definitions in typography.css . That should get you started.


Community Member, 52 Posts

20 May 2008 at 9:25pm

Edited: 20/05/2008 9:31pm

Thanks jryancard!

It works, but if i put my classes in editor.css instead of typography.css.
I added this in HtmlEditorField.php

	new HtmlEditorField_dropdown("mceSetCSSClass", "styleSelect", array(
				"mceContentBody" => "mceContentBody",
				"red-text" => "red-text",

In editor.css i put
	color: red;		

In the CMS editor i see the dropdown with red-text. It appears two times, i don´t know why. One of then works perfectly and the other does nothing.
The correct one creates
  <span class="red-text">mytext</span>

It is perfect for me.
But i need also to create <div id="red-text">mytext</div> and i don´t know ho to do it. I try to create in editor.css
	color: red;

But it doesn´t work. Is there a way to do it?

By the way, i read HtmlEditorField_dropdown api info but i think i don´t understand correcty how it works and how to use it. Can somebody explain it?

Thank you in advance.