Have you ever wanted to change the colors that show up in your editor's Color Palette like the one to the right? I'm here to show you how!

I think now is a good time to mention that this is technically a "Hack" and therefore your change could be documented so that when you upgrade Joomla!, you are able to make the change again if the JavaScript file is overwritten.

For Tiny MCE:

File: plugins\editors\tinymce\jscripts\tiny_mce\themes\advanced\editor_template.js

Look for:

TinyMCE_AdvancedTheme={_defColors:"000000,993300,333300,003300,
003366,000080,333399,333333,800000,FF6600,808000,008000,008080,
0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,
800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,
C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF"

Each color is separated by commas. You can add, remove, edit the colors that are there. Keeping in line with the political season, if you just wanted your palette to only show red, white and blue, then you would change the above to:

TinyMCE_AdvancedTheme={_defColors:"FF0000,FFFFFF,0000FF"

The new Color Palette would look like:

Note: Since this is running from JavaScript, if the file is cached on your computer, you may not notice the change immediately. Try clearing your cache. For me, I press "Shift + F5" and all is well.

For Joomla Content Editor (JCE):

What? You do not use TinyMCE? That's great! We do not either. So, for all of those JCE users out there, here is what you do:

File: plugins\editors\jce\tiny_mce\tiny_mce.js

Look for:

t.settings=s=tinymce.extend({colors:'000000,993300,333300,003300,
003366,000080,333399,333333,800000,FF6600,808000,008000,008080,
0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,
800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,
C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF'

To only show Red, White and Blue, change it to the following:

t.settings=s=tinymce.extend({colors:'FF0000,FFFFFF,0000FF'

The new Color Palette would look like:

I hope this little write-up helps someone out.

TrackBack URI for this entry

Comments (1)

Subscribe to this comment's feed

Trevor said:

	You can use the theme_advanced_text_colors configuration to do this in newer version of TinyMCE. See http://www.tinymce.com/wiki.ph...ext_colors
	report abuse vote down vote up

October 25, 2011
Votes: +0