Adding custom color options to the WYSIWYG text editor

The LRG Complete pages and contact page include a WYSIWYG text editor with a color picker. The color picker includes many colors, but what if non of the colors match your sites colors? Well thats pretty easy to fix. All you need to do to add a new custom color is to open up the xmlTransformer.xslt file that is located in your template installation folder and type it in. See insctuctions below.

Step 1:
Locate the template installation folder, this is where you put the template files when you installed them. Locate the folders for both the Page and Contact templates. Inside each template installation folder is a file called xmlTransformer.xslt, open that file up in a simple text editor program.

Step 2:
Look for the color definitions in the file.

It looks something like this:
(I had to remove most colors to save space in the post)

Each color definition looks like this:

The actual color is represented in hexidecimal format. In the example above the actual color hexidecimal code is 333333. That is the only portion you need to worry about. You will need to get the hexidecimal code for the color you want to use in order to continue.

Step 3:
You have 2 options now. you can either replace a current color or add a new one, its up to you.

To replace a color simply change one of the colors hexidecimal codes you your new color.
In the example below we will change 333333 (gray) to FF0000 (red):

Change:

To:

If you don’t want to replace a current color and add a new color thats no problem. Just duplicate any of the color definitions, and then change the color as shown above.

If you don’t need all those colors then just delete them and leave the definitions for the ones you want to use.

That’s all there is too it!

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.