Setting display colors in Radio's HTML editor - Part 1

In Radio Userland's discussion forum, Lisa asks:

Can someone point out to me where I need to drill down to change the color of the textbox for posting/editing items? I want to make it the same background color/default text color as on my blog so that I can see how it looks as I'm creating it...

According to this page, you're supposed to be able to use <%radio.macros.weblogEditBox (bgcolor)%> to set the background color of the HTML editor box. I tested this on my weblog and this does *not* work. I took a look at the code - the macro does allow for a bgcolor parameter, but it does not use it to set the editor background color at all. If a color value is supplied, it will actually set the background color for the category checkboxes below the editor.

Radio appears to not provide a way for the user to set the editor's display colors, but they can be set by using a javascript in the #desktopWebsiteTemplate.

To set the colors of Radio's HTML editor, add the following javascript to your #desktopWebsiteTemplate, below the <%radio.macros.weblogEditBox ()%> macro. (Use the correct version for your browser):

Internet Explorer

  <script type="text/javascript">
    <!-- Begin hiding from older browsers 

      // Set colors to use in HTML editor on startup here
      var fgColor = '#000000';
      var bgColor = '#FFFFFF';

      var endOfTag = '\"' + String.fromCharCode (62);
      sHeader = sHeader.replace(endOfTag,
        ' color: ' + fgColor + ';' + 
        ' background: ' + bgColor + ';' + endOfTag);
      idEdit.document.open ();
      idEdit.document.write (sHeader);
      idEdit.document.close ();

    //End hiding-->
  </script>

Mozilla / Mozilla Firebird

  <script type="text/javascript">
    <!-- Begin hiding from older browsers 

      // Set colors to use in HTML editor on startup here
      var foreColor = '#FFFFFF';
      var backColor = '#000000';

      var editFrame = document.getElementById('edit');

      // Function to set HTML editor colors
      function loadColors () {
        var editDoc = editFrame.contentWindow.document;
        var editDocStyle = editDoc.body.style;
        editDocStyle.color = foreColor;
        editDocStyle.background = backColor;
        }

      // Wait for about:blank page to load
      editFrame.contentWindow.addEventListener 
        ('load',loadColors, false);

    //End hiding-->
  </script>

In the script, edit the fgColor value to set the foreground (text) color you want, and edit the bgColor value to set the background color of the HTML editor. Save the template, then open the Desktop Website in your browser. The new colors should be immediately visible in the HTML editor window. If you no longer want to use this script, simply delete it from your Desktop Website template.

This script does not alter the appearance of published posts on your weblog - it only changes how they look in the editor window. No HTML code or style attributes are added to the text of your posts.

While these scripts do work as intended, you must edit the Desktop Website template any time you want to change the editor's colors. In Part 2, I will demonstrate a javascript that will allow you to change the editor's foreground and background colors directly from the editor window.

About this Entry

This page contains a single entry by TweezerMan published on September 25, 2003 4:17 AM.

Bug in Mozilla Editor - <br> tags in HTML source was the previous entry in this blog.

Setting display colors in Radio's HTML editor - Part 2 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!