Vista Sidebar Gadget, Transparent Backgrounds, and Font Color

We’ve had a request from a client to build a Windows Vista Sidebar Gadget. The background on the gadget is to be somewhat see-through. So I’ve played around with gadgets, and noticed that when I make a semi-transparent background on the gadget, the font color gets all messed up. For example, I wanted white text on a blue background with 50% opacity, and the font appeared blueish, even though it was supposed to be white. If I turn off the opacity on the background, the font becomes white, but as long as there’s opacity, the font is messed up.

Well, after doing some research, it appears there is a way to display the proper font color on transparent backgrounds, although I didn’t find this anywhere on the Microsoft site. The trick is to use JavaScript and the addTextObject() method. Here’s an example of some code, and the resulting gadget:

 <html> 
   <head> 
     <title>Sample Gadget</title> 
     <style> 
        body { width: 120px; height: 200px; font-size: 12px; margin: 0; font-family: Verdana; color: #FFFFFF; } 
       .gadget { margin: 3px; } 
     </style> 
   </head> 
   <body> 
      <div class="gadget"> 
        <div>This text is not white.</div> 
      </div> 
      <g:background id="background" src="images\bgblue.png" style="width:100%;height:100%;z-index: -1; position: absolute; top: 0; left: 0;" opacity="50"></g:background> 
      <script language="javascript" type="text/javascript">
 document.getElementById("background").addTextObject("This text is white.", "Verdana", 12, "white", 3, 50);
</script> 
    </body> 
 </html>

Bloodforge Blog

Vista Sidebar Gadget, Transparent Backgrounds, and Font Color

Leave a Comment Cancel reply