{"id":13,"date":"2008-05-09T00:00:00","date_gmt":"2008-05-09T00:00:00","guid":{"rendered":"http:\/\/bloodforge.com\/?p=13"},"modified":"2020-02-20T01:39:29","modified_gmt":"2020-02-20T01:39:29","slug":"vista-sidebar-gadget-transparent-backgrounds-and-font-color","status":"publish","type":"post","link":"https:\/\/bloodforge.azurewebsites.net\/index.php\/2008\/05\/09\/vista-sidebar-gadget-transparent-backgrounds-and-font-color\/","title":{"rendered":"Vista Sidebar Gadget, Transparent Backgrounds, and Font Color"},"content":{"rendered":"\n<p>We&#8217;ve had a request from a client to build a Windows Vista Sidebar Gadget.\u00a0 The background on the gadget is to be somewhat see-through.\u00a0 So I&#8217;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.\u00a0 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.\u00a0 If I turn off the opacity on the background, the font becomes white, but as long as there&#8217;s opacity, the font is messed up.<\/p>\n\n\n\n<p>Well, after doing some research, it appears there is a way to display the proper font color on transparent backgrounds, although I didn&#8217;t find this anywhere on the Microsoft site.&nbsp; The trick is to use JavaScript and the addTextObject() method.&nbsp; Here&#8217;s an example of some code, and the resulting gadget:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code> &lt;html> \n   &lt;head> \n     &lt;title>Sample Gadget&lt;\/title> \n     &lt;style> \n        body { width: 120px; height: 200px; font-size: 12px; margin: 0; font-family: Verdana; color: #FFFFFF; } \n       .gadget { margin: 3px; } \n     &lt;\/style> \n   &lt;\/head> \n   &lt;body> \n      &lt;div class=\"gadget\"> \n        &lt;div>This text is not white.&lt;\/div> \n      &lt;\/div> \n      &lt;g:background id=\"background\" src=\"images\\bgblue.png\" style=\"width:100%;height:100%;z-index: -1; position: absolute; top: 0; left: 0;\" opacity=\"50\">&lt;\/g:background> \n      &lt;script language=\"javascript\" type=\"text\/javascript\">\n document.getElementById(\"background\").addTextObject(\"This text is white.\", \"Verdana\", 12, \"white\", 3, 50);\n&lt;\/script> \n    &lt;\/body> \n &lt;\/html><\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"136\" height=\"210\" src=\"\/wp-content\/uploads\/2020\/02\/gadgetss.jpg\" alt=\"\" class=\"wp-image-17\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ve had a request from a client to build a Windows Vista Sidebar Gadget.\u00a0 The background on the gadget is to be somewhat see-through.\u00a0 So I&#8217;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.\u00a0 For example, I wanted white text [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4],"tags":[],"_links":{"self":[{"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/13"}],"collection":[{"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/comments?post=13"}],"version-history":[{"count":4,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/13\/revisions"}],"predecessor-version":[{"id":20,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/posts\/13\/revisions\/20"}],"wp:attachment":[{"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/media?parent=13"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/categories?post=13"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bloodforge.azurewebsites.net\/index.php\/wp-json\/wp\/v2\/tags?post=13"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}