Recently in Radio Userland Category

I fixed a bug in my Monthly Archive Links macro (for Radio UserLand users) where specifying a date format that has the month and year next to each other (such as "mmmyy") displays the wrong output for months that end in "y". You can download the updated macro from the download link at the above linked post.

Radio UserLand comment limit

Interesting bit of trivia: Radio UserLand's comment system will only display a maximum of 125 comments for any given entry. Robert Scoble ( The Scobleizer Weblog) found this out the hard way - his EU decison post has received 137 comments so far.

UserLand CEO Scott Young says this is by design:

Its true. The commenting system has a defined limit for each each comment window. We had a problem with a malicious user trying to post extremely large messages in order to disrupt some Salon Blogs, so this restriction was added. Its not a bug, its a feature. ;-)

Side note: I wonder if trackbacks suffer from this limitation as well?

High praise for Rhye

| 1 TrackBack

Rhye wrote up a Newbie Tip for Liz on "How To Insert A Picture Into Your (Radio) Blog", based on the following remark in Liz's weblog:

"...and if I ever figure out how to upload pictures, you will see for yourselves. I know that I just need to go to Rhye's site and find the info, because she is the be-all, end-all Radio Goddess, but that didn't happen today."

Rhye thanked Liz for the encouraging words, but claims its not even half-true. If you only knew about all the macro code Rhye helped me write (wink!). I only aspired to be a "Rogue Radio Rat" (and not a "Radio Rug Rat"!).

Rhye really is doing a great job of helping out in the Radio forums, even though she seems to attract more than her fair share of Mac users with Salon.com weblogs and she has neither one.

P.S. Rhye should really know better than to tell me not to post things like this. :)

Based on a question from Steve Kirks, I've started working on a tool that would capture a copy of a Radio Userland weblog's comments on Userland's server so they could in turn be exported to another blog application (e.g. Movable Type).

I have most of the "core" import code written - the export code still needs to be written, and the new tool needs "window dressing" so someone besides me can use it. It seemed like now would be a good time to solicit some suggestions for a tool like this. If you have any, let me know in the comments.

Here's my first post, testing out Movable Type. So far, so good - haven't run into any major problems yet. This could be the beginning of the end for Radio.....

In Radio Userland's discussion forum, Martin asks about adding a Google search box that will search only his Radio Userland weblog:

Hi. Sorry if this is a common question: Is there a definitive resource to show me how to add a Google search feature to my UserLand weblog? Its easy to add one to search the WWW; I'm struggling re: just my weblog. The various links through searching UserLand seem to contradict one another. A definitive resource must be useful for all ''new kids on the block' such as 'me'? Posted by Martin in the land where petrol costs just go up and up :-(

Google actually provides sample code for search boxes that can be freely included on your weblog. (This code should be added to your #homeTemplate, #template, and #desktopWebsiteTemplate templates.)

A Google search box, such as the one displayed here on my weblog, can be set up easily enough (using the code provided by Google) if you want to search a domain. Unfortunately, a Radio Userland weblog's home page is not at the root of a domain. Google's sample search box can be set up to search radio.weblogs.com (which would include *all* Radio Userland weblogs), but not radio.weblogs.com/0123456 (one specific Radio Userland weblog).

Google does provide a way to restrict search results to urls with specific words contained in the url. This is done by using the "inurl:" operator in the search query. By combining a site search of radio.weblogs.com with the inurl:usernum (where usernum is the user number of the Radio Userland weblog), Google's search results will be effectively restricted to ones only from the weblog you want to search.

Here is the sample code for a basic Google search box:

  <!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search">
      <table bgcolor="#FFFFFF"><tr><td>
        <a href="http://www.google.com/">
          <img src="http://www.google.com/logos/Logo_40wht.gif"
            border="0" alt="Google" align="middle" />
        </a>
        <input type="text" name="q" size="25" maxlength="255" value="" />
        <input type="submit" name="btnG" value="Google Search" />
      </td></tr></table>
    </form>
    </center>
  <!-- Search Google -->

This code will provide a search box that works exactly the same way as if you had entered a search on Google's home page.

To restrict the search results only to web pages hosted at radio.weblogs.com (the weblog's domain), this is done by adding "site:radio.weblogs.com" to a Google search query. The "site:" parameter can be included with the form's search queries by adding the following code to the search form code above:

        <input type="hidden" name="sitesearch" value="radio.weblogs.com" />

To further restrict the search results only to web pages from a single weblog hosted at radio.weblogs.com, this is done by adding 'inurl:0123456" to a Google search query (where "0123456" is your Radio Userland user number). The "inurl:" parameter can be included with the form's search queries by adding the following code to the search form code above:

        <input type="hidden" name="hq" value="inurl:0123456" />

The final code would then look like this:

  <!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search">
      <table bgcolor="#FFFFFF"><tr><td>
        <a href="http://www.google.com/">
        <img src="http://www.google.com/logos/Logo_40wht.gif"
            border="0" alt="Google" align="middle" /></a>
        <input type="text" name="q" size="25" maxlength="255" value="" />
        <input type="hidden" name="sitesearch" value="radio.weblogs.com" />
        <input type="hidden" name="hq" value="inurl:0123456" />
        <input type="submit" name="btnG" value="Google Search" />
      </td></tr></table>
    </form>
    </center>
  <!-- Search Google -->

And this is the search box you would see, ready to search for pages only on your Radio Userland weblog:

There are a number of ways that this form can be customized, depending on your preferences:

1. Google has a variety of logos in different sizes and background colors that can be freely used with your search form. These logos can be found on Google's Official Logos page. To use a different logo, replace the source url in the <img> tag above ("http://www.google.com/logos/Logo_40wht.gif") with the url of the logo you would like to use.

2. The width of the input box can be widened or shortened by increasing or decreasing the size="25" parameter in the line <input type="text" name="q" size="25" maxlength="255" value="" />.

3. The text on the "Search" button can be changed to whatever you want by editing the value="Google Search" parameter in the line <input type="submit" name="btnG" value="Google Search" />.

4. The sample code above displays a wide horizontal form, while many Radio Userland users may prefer a narrower, vertical form (for use in their weblog's links column, for example). The search form can be made vertical by first deleting the <table>, <td>, and <tr> tags in the form. (Delete this line: <table bgcolor="#FFFFFF"><tr><td> and this line: </td></tr></table> from the form.) Then add a <br> tag after the <img> link (after the </a> tag) and another one after the <input type="text"> tag.

5. Search results can be made to open in a new window by adding target="_blank" to the <form> tag.

Here's a sample of a customized Google search form, using all of the steps described above:

And here's the HTML code which makes the new search box:

<!-- Search Google -->
    <center>
    <form method="get" action="http://www.google.com/search" target="_blank">
      <a href="http://www.google.com/">
      <img src="http://www.google.com/logos/Logo_25wht.gif"
        border="0" alt="Google" align="middle" /></a><br>
      <input type="text" name="q" size="15" maxlength="255" value="" /><br>
      <input type="hidden" name="sitesearch" value="radio.weblogs.com" />
      <input type="hidden" name="hq" value="inurl:0123456" />
      <input type="submit" name="btnG" value="Search" />
    </form>
    </center>
  <!-- Search Google -->

Now that you know how to set up a Google search form to search only a Radio Userland weblog and how to configure its appearance, have fun with it!

Radio weblog calendar bug

| 1 Comment | 1 TrackBack

Every so often, someone will post a question in Radio Userland's discussion forum about the link to the previous month or following month on their weblog's calendar being broken. This always seems to occur on main weblog pages and not category pages.

Julie (Sexy Magick) ran into this problem about a week and a half ago. She had published a post to a category on August 31, but did not publish any posts to her main weblog. This month, the "Aug" link in her main weblog calendar is broken - the link points to the daily archive for Aug. 31 even though Julie did not publish any posts to her main weblog that day.

To figure out why this was occurring, I examined the macro code involved with creating a calendar:

radio.weblog.drawCalendar ()
radio.weblog.getLastPostBeforeDate ()
radio.weblog.getNextPostAfterDate ()

When drawing a calendar, the macro code needs to look at category posts only for a category weblog page calendar, and home page posts only for a main weblog page calendar. The macro code for categories appears to work correctly. However, it is impossible for the macro code for main weblog (home page) posts to work correctly.

In order for these macro to correctly identify home page posts, the macros must look at the flNotOnHomePage field for each post. The getLastPostBeforeDate macro, the getNextPostAfterDate macro, and the code in the drawCalendar macro that creates the previous and next month links do not look at the flNotOnHomePage field at all. Posts that have been posted to a category only and not to the main weblog can be returned by these macros and used as the basis for links on the main weblog calendar when they should not be.

On the last day posts are posted in a given month, if they are all posted to categories and not to the main weblog, the link to that month on the next month's main weblog calendar (the previous month) will be broken.

Similarly, on the first day posts are posted in a given month, if they are all posted to categories and not to the main weblog, the link to that month on the previous month's main weblog calendar (the next month) will be broken.

It is extremely difficult to determine the best way to fix this bug. I do not know if the error is in the fact that getLastPostBeforeDate and getNextPostAfterDate do not look at flNotOnHomePage for home page posts, the fact that drawCalendar does not look at flNotOnHomePage, or both. Nor do I know whether or not a specific fix would break something else in Radio - other functions in Radio may depend on the getLastPostBeforeDate and getNextPostAfterDate macros functioning as they do now. For now, all I can do is report and document the bug.

In Part 1, I showed how the foreground and background colors of Radio's HTML editor could be changed using a javascript. After trying out that script, Julie (Sexy Magick) suggested that it would be handy to be able to set the foreground and background colors from a drop-down box on the editor itself, so she could see how her posts would appear in various categories that have different colored themes. Part 2 demonstrates how this can be done, again with javascript.

The scripts provided below are for Internet Explorer users only. To install the scripts, copy all three scripts (which can also be downloaded here) and add them to your #desktopWebsiteTemplate, below the <%radio.macros.weblogEditBox ()%> macro.

If you are using a javascript to change the colors in the font color drop-down box (described here), place this javascript *after* that one. This script copies the colors from the font color drop-down box, so by placing this script after that one, the foreground and background color drop-down boxes will show the same colors as the ones in the font color box.

At the beginning of the first 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. This will set the colors that the editor will use when the Desktop Website is first opened, and it will be the colors displayed after a post is published.

Save the Desktop Website template and 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.

As with the script described in Part 1, 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.

Note to Julie: Thanks for your suggestions on improving this script and for beta-testing the script for me. You can see Julie's post about her testing here.

Here is a screen shot of the HTML editor with the new drop-down boxes. The editor's foreground color is set to white and the background color is set to darkblue:

Here are the scripts to be added to the Desktop Website template:

Internet Explorer only:

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

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

      // Body tag of HTML document in editor
      var startBodyTag = '<body style=\"font-family: verdana, ' + 
        'sans-serif; font-size: 12px; margin-top: 3px; ' + 
        'margin-bottom: 3px; margin-left: 3px; margin-right: 3px;';
      var endBodyTag = '\"' + String.fromCharCode (62);

      // Increase height of div containing drop-down boxes
      document.getElementById('tb2').style.height = '45px';

      // Get reference to existing font color drop-down box
     var fontColorBox = document.forms(0).elements(5);

      // Function to perform actual switching of colors
      function chgScreenColors () {
        sHeader = startBodyTag + 
          ' color: ' + foreColor + ';' + 
          ' background: ' + backColor + ';' + endBodyTag;
        sContents = idEdit.document.body.innerHTML;
        idEdit.document.open ();
        idEdit.document.write (sHeader);
        idEdit.document.close ();
        idEdit.document.body.innerHTML = sContents;
        }

      // Make a copy of font color drop down box
      var foreColorBox = fontColorBox.cloneNode(true);
      var backColorBox = fontColorBox.cloneNode(true);

      // Set id of new drop down boxes 
      foreColorBox.id = 'fgColorBox';
      backColorBox.id = 'bgColorBox';

      // Set caption of new drop down boxes
      foreColorBox.options(0).text = 'Foreground...';
      backColorBox.options(0).text = 'Background...';

      // Add color 'white' to end of fgBox option list
      newOption = document.createElement('option');
      foreColorBox.options.add(newOption);
      newOption.text = 'white';
      newOption.style.color = 'white';
      newOption.style.background = 'black';

      // Add color 'white' to end of bgBox option list
      newOption = document.createElement('option');
      backColorBox.options.add(newOption);
      newOption.text = 'white';
      newOption.style.color = 'white';
      newOption.style.background = 'black';

      // Insert new drop-down boxes into form
      fontColorBox.insertAdjacentHTML("AfterEnd",'&nbsp;');
      fontColorBox.insertAdjacentElement("AfterEnd",backColorBox);
      fontColorBox.insertAdjacentHTML("AfterEnd",'&nbsp;');
      fontColorBox.insertAdjacentElement("AfterEnd",foreColorBox);
      fontColorBox.insertAdjacentElement("AfterEnd",document.createElement('br'));

      // Initalize HTML document with starting colors
      sHeader = startBodyTag + 
        ' color: ' + foreColor + ';' + 
        ' background: ' + backColor + ';' + endBodyTag;
      idEdit.document.open ();
      idEdit.document.write (sHeader);
      idEdit.document.close ();

    //End hiding-->
  </script>

  <script for=fgColorBox event=onchange type="text/javascript">
    <!-- Begin hiding from older browsers 
      if (!bMode) {
        alert (strErr); idEdit.focus ();
        this.selectedIndex=0;
        return;
        }
      foreColor = this[this.selectedIndex].style.color;
      chgScreenColors ();
      this.selectedIndex=0;
      idEdit.focus ();
    //End hiding-->
  </script>

  <script for=bgColorBox event=onchange type="text/javascript">
    <!-- Begin hiding from older browsers&nbsp;
      if (!bMode) {
        alert (strErr); idEdit.focus ();
        this.selectedIndex=0;
        return;
        }
      backColor = this[this.selectedIndex].style.color;
      chgScreenColors ();
      this.selectedIndex=0;
      idEdit.focus ();
    //End hiding-->
  </script>

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.

In my "Initial experiences with Mozilla Firebird and Radio" (Sep. 09), I described some of the problems and issues I was running into trying to use Mozilla Firebird to create and edit posts.

This is one of the problems that was really annoying me:

2. While I was trying to delete the above mentioned characters, the Mozilla editor seemed to get confused at times about what text I was trying to edit. The blinking cursor would be at a specific position in the html code, and when I pressed the BackSpace or Del key, the character that would be deleted was one character to the left of the character that should have been deleted.

This problem occurred when I was editing in "View HTML Source" mode. Initially, I thought it was a bug in the code Radio uses to control the editor, but I no longer believe this is the case.

This problem appears to be caused by the way the Mozilla editor inserts tags into the code when a user presses the Enter key. When the Enter key is pressed, the Mozilla Editor actually inserts "<br> " (a <br> tag plus a space). When the user then switches the editor into "View HTML Source" mode, these extra space characters are not accounted for when the Mozilla Editor calculates the actual character position to be edited. Text editing occurs one character position to the left of the blinking cursor for every <br> tag (and extra space) present between the beginning of the text and the location of the blinking cursor.

Here is an example to demonstrate this bug:

Open the Desktop Website in Mozilla Firebird, and enter the following in the editor window:

Now is the

time for all

good men to

come to the

aid of their

country.

The source code for this text should look something like the following (which you can see by selecting the text, then right click on the selected text and click "View Selection Source":

Now is the<br>
<br>
time for all<br>
<br>
good men to<br>
<br>
come to the<br>
<br>
aid of their<br>
<br>
country.<br>

Check on the "View HTML Source" box to view the source code in the editor. You should see something like this:

Now is the<br> <br> time for all<br> <br> good men to<br> <br> come to the<br> <br> aid of their<br> <br> country.<br>

Notice the extra spaces after each <br> tag.

Click the mouse somewhere in the middle of the source code and type or delete some characters. The character that is typed or deleted will not be the one at the blinking cursor position. The number of characters it is off should be the number of <br> tags (extra spaces) between the cursor and the beginning of the HTML code.

This does not appear to be a bug in Radio - I think it is a bug in the editor itself. Unfortunately, this bug makes the Mozilla Editor pretty useless for editing the HTML source code of posts.

One other nitpick I have with the editor: Pressing the Enter key should create <p> tags, not <br> tags. If a user wants a <br> tag, press shift-Enter. I did not see any way to create a new paragraph except for editing the HTML source code.