Tweaking Radio's HTML Editor - Part 2 (IE Only)

| 1 Comment

Julie (Sexy Magick), who happens to really like lots of colors, saw my post yesterday on tweaking the available font names in Radio's HTML editor and wanted to do the same with the font colors drop-down box.

As with the script I demonstrated in my earlier post, locate the <%radio.macros.weblogEditBox ()%> macro in the #desktopWebsiteTemplate.txt file, which is what draws the HTML editor. Insert the following script into the template immediately below the weblogEditBox macro if you are using Internet Explorer:

<script type="text/javascript">
<!--
  document.forms(0).elements(5).options(1).text = 'black';
  document.forms(0).elements(5).options(1).style.color = 'black';

  document.forms(0).elements(5).options(2).text = 'darkslategray';
  document.forms(0).elements(5).options(2).style.color = 'darkslategray';

  document.forms(0).elements(5).options(3).text = 'red';
  document.forms(0).elements(5).options(3).style.color = 'red';

  document.forms(0).elements(5).options(4).text = 'maroon';
  document.forms(0).elements(5).options(4).style.color = 'maroon';

  document.forms(0).elements(5).options(5).text = 'lightpink';
  document.forms(0).elements(5).options(5).style.color = 'lightpink';

  document.forms(0).elements(5).options(6).text = 'purple';
  document.forms(0).elements(5).options(6).style.color = 'purple';

  document.forms(0).elements(5).options(7).text = 'blue';
  document.forms(0).elements(5).options(7).style.color = 'blue';

  document.forms(0).elements(5).options(8).text = 'darkblue';
  document.forms(0).elements(5).options(8).style.color = 'darkblue';

  document.forms(0).elements(5).options(9).text = 'teal';
  document.forms(0).elements(5).options(9).style.color = 'teal';

  document.forms(0).elements(5).options(10).text = 'skyblue';
  document.forms(0).elements(5).options(10).style.color = 'skyblue';

  document.forms(0).elements(5).options(11).text = 'green';
  document.forms(0).elements(5).options(11).style.color = 'green';

  document.forms(0).elements(5).options(12).text = 'seagreen';
  document.forms(0).elements(5).options(12).style.color = 'seagreen';

  document.forms(0).elements(5).options(13).text = 'olive';
  document.forms(0).elements(5).options(13).style.color = 'olive';

  document.forms(0).elements(5).options(14).text = 'orange';
  document.forms(0).elements(5).options(14).style.color = 'orange';

  document.forms(0).elements(5).options(15).text = 'darkgoldenrod';
  document.forms(0).elements(5).options(15).style.color = 'darkgoldenrod';

  document.forms(0).elements(5).options(16).text = 'gray';
  document.forms(0).elements(5).options(16).style.color = 'gray';
//-->
</script>

Mozilla and Mozilla Firebird users should not need to edit the colors available - the font color and background color toolbar buttons provide a palette of 70 colors.

In their current form, the statements in both scripts merely put the same font colors in the drop-down box as what Radio does. To change a font color listed in the drop-down box, edit the appropriate pair of lines corresponding to the drop-down entry you wish to change.

In each pair of statements, the first statement (ending in .text) is what the drop-down box displays to the user. The second statement (ending in .style.color) is the font color name that the editor will actually place in your HTML code. (Radio uses the color name for both the .text and .style.color values.)

A nice list of the 140 possible color names is available here.

If you wish to reduce the length of the script, you can safely delete the pair of statements for each color that you are not changing.

Save the #desktopWebsiteTemplate.txt file, and open the Desktop Website in your browser. Any changes made to the font drop-down box should be immediately visible. If at any time you decide you no longer want to use the script, simple delete it from the #desktopWebsiteTemplate.txt file.

Bonus Tip: You can have more than 16 colors in the font color drop-down box if you wish. The code to add a color is a little different than changing one - you have to create the entry for the color first, then set its color. To add a color, copy the following two statements into the above javascript:

  document.forms(0).elements(5)[17] = new Option('colorName');
  document.forms(0).elements(5).options(17).style.color = 'colorName';

The "new Option" sets the .text property at the time the option is created, so a statement to set it separately is not necessary. Use an option number of 17 in each statement for the first color added, and increase it by one for each additional color added.

1 Comment

thanks for your help on this..tweaking the html colors and thanks for the list..now I have another 140 color choices :)

About this Entry

This page contains a single entry by TweezerMan published on September 19, 2003 7:46 PM.

Dealing with trolls and spammers in blog comments was the previous entry in this blog.

Yet more Radio tweaking - font colors in the HTML editor is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 6.1.2

MT-Vampire plugin

web hosting by TotalChoice Hosting

Valid XHTML 1.0!
Valid CSS!