In addition to plain text, a message window accepts an HTML DOM node structure as its content. Since the message window will not exist in the DOM, the new node will be appended to the window.

Using our dismissible message gadget as our base, we can revise the Content section to use a DOM node we create instead of the text message specified:

<Content view="canvas">
   <![CDATA[
   <script type="text/javascript">
   //create div node for message
   var msgNode = document.createElement("div");
   msgNode.innerHTML = "See <a href='http://mysite.com'>My Site</a> for more details";

   //set mouse events on message content
   msgNode.onmouseover = function(obj){ obj.style.color = "#da1d1d";  }
   msgNode.onmouseout = function(obj){ obj.style.color = "#000";  }

   //create new dismissible mini-message
   var message = new gadgets.MiniMessage(__MODULE_ID__);
   message.createDismissibleMessage(msgNode);
   </script>
   ]]>
</Content>

We first create the DOM node, a div, which will house our message. We insert the content of the div and a few mouseover events to change the text color. When we create a new dismissible message window, instead of passing in the text of the message content, we pass the DOM node we created. This will create the message window with the div as the appended content.

Not only can you style the content of a message window, you can also style each message as it is being created, giving you a lot of design control over the window itself.

You can do this by using the return value of our message window creation functions, such as createDismissibleMessage(). The return value of these functions is an HTML element, meaning that we can use the return value as we would any other DOM node we create.

Working from our dismissible gadget, we can explore how to do this with some new Content JavaScript:

<Content view="canvas">
   <![CDATA[
   <script type="text/javascript">
   //create new dismissible mini-message and capture returned node
   var message = new gadgets.MiniMessage(__MODULE_ID__);
   var msgObj = message.createDismissibleMessage("My message content");

   //style the message window
   msgObj.style.color = "#da1d1d";
   msgObj.style.backgroundColor = "#c0c0c0";
   </script>
   ]]>
</Content>

We create the message window just as we have before, but this time when we make a call to createDismissibleMessage(), we capture the return value—an HTML element—in a variable. Using that variable, we adjust the window’s font color and background color.

This is a simple method for customizing the message windows in your gadgets on a one-off basis. Next, we’ll go over how to style all the windows in your gadget simultaneously.

Editing each generated message window individually makes sense if you want to customize every one with different styles, but in many instances, you may just want to set the styles to personalize all the messages at once. To this end, there are a few classes that you apply to the message window content. These include:

Using this information, we can apply a few global styles to override the standard message window classes:

<Content view="canxvas">
   <![CDATA[
   <style type="text/css">
   .mmlib_table{
       font: bold 11px arial,helvetica,sans-serif;
       background-color: #000;
       color: #fff;
   }
   .mmlib_xlink{
      font-weight: bold;
      color: #da1d1d;
      cursor: pointer;
   }
   </style>

   <script type="text/javascript">
   //create new dismissible mini-message and capture returned node
   var message = new gadgets.MiniMessage(__MODULE_ID__);
   var msgObj = message.createDismissibleMessage("My message content");
   </script>
   ]]>
</Content>

In the preceding example, we create our standard dismissible message window as we have previously. The main difference is in the style block right before the scripts. We define the mmlib_table style for the window to change the font specifications, background color, and font color. Following that, we define the mmlib_xlink class to set the “x” dismissal icon to a boldfaced, red font and to display a cursor when a user hovers her mouse over it.