Weekly Update (22/11/09) – 911 Xbox, Cataclysm, Overpaid Stars, Megan Fox returns, etc. Review: Ninja Assassin
How to Change the Wordpress TinyMCE Visual Editor Colour Palette
If you happen to have a customised Wordpress theme and use a lot of custom text colours in your posts to match the theme, you’d understand how annoying it is not having the specific colours present on the visual editor’s text colour palette. Sure you can do it the old fashioned way using HTML, but I personally dislike it because it takes more time. I tried searching for a plugin that would enable me to customise the colour palette, but the ones I found only allowed custom styles among various other features.
As I was about to give up my search and settle with custom styles, I came across this blog post, which was just what I was looking for. Seeing as how the blog hasn’t been updated for almost a month now, I’ll just repost it here for my own reference in case it disappears, which is something that in my experience, tends to happen with blogspot.com blogs.
At the time of writing, I am using Wordpress 2.8.6
- Find and extract wp-includes/js/tinymce/wp-tinymce.js.gz.
Actually, you don’t need to extract it because the normal wp-tinymce.js file is there in the same directory. You can simply edit that and Gzip it. I used Win-GZ to do it. WinRAR and other similar archivers will let you extract Gzip files but you won’t be able to re-Gzip. - Search for “000000” in wp-tinymce.js to find the default colors list and replace them with your own.
000000 is the 6-digit hex for the colour black, which is the first colour in the default colour palette. When you find it, there will be a sequence of 6-digit colour codes, simply replace these with the hex codes of the colours you want to appear on the palette. I tried adding my colour codes to the end of the sequence, but when it didn’t seem to work. I’m not sure if I did it wrong or if it just doesn’t work, but replacing the entire sequence with your own definitely works. - Archive (G-zip) the file back and upload it to your webserver.
Before doing this I suggest you make a backup of the original just in case.
That’s it. Quite simple really. I’m not sure if upgrading to a newer version of Wordpress reverts this change, but I’m pretty sure it would so you’ll have to redo it. I’ll try and update this page to confirm whether or not this tweak still works with every new version of Wordpress.
Update (20/12/09) – Works on Wordpress 2.9
Similar Posts:
Cool post, did not thought it would be so interesting when I looked at the title!!