Search code examples
htmlwindowswindows-7windows-desktop-gadgets

How to set the size of a desktop gadget that you create


I am trying to create a very basic windows desktop gadget to display my Stack Overflow Flair.

I do not have much experience with html or web development. I have tried to follow the instructions here, but when I install the gadget it is tiny:

enter image description here

Yes, it's that tiny white square.

I have tried setting a background image but it doesn't seem to work either (I don't actually need a background image, I was just trying to get it to work). If I run the html source file stand alone then it displays correctly in a browser:

enter image description here

Here is the code from the html source file (named MySOFlair.html):

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <div id="gadgetContent">
      <a href="http://stackoverflow.com/users/2012446/chrisprosser">
        <img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58" 
             alt="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers" 
             title="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers"/>
      </a>
    </div>
  </body>
</html>

Here is the code from the manifest file (Gadget.xml):

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>MySOFlair</name>
  <version>1.0.0.0</version>
  <author name="Chris Prosser" />
  <description>Mt Stack Overflow Flair Gadget</description>
  <!--<icons>
    <icon src="http://stackoverflow.com/users/flair/2012446.png" 
          width="208" 
          height="58" />
  </icons>-->
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="MySOFlair.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <!--<defaultImage src="http://stackoverflow.com/users/flair/2012446.png" 
                    width="208" 
                    height="58"/>-->
    </host>
  </hosts>
</gadget>

I have tried uncommenting the image links in here, but it doesn't change anything.

Any ideas on how to set the size correctly would be greatly appreciated.


Solution

  • I have found how to fix this. I found a style element that could be inserted into the HTML header section. Here is the new HTML file:

    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
        body
        {
           margin:  0;
           width: 212;
           height: 62;
        }
        #gadgetContent
        {
           margin:  0px;
           width: 208px;
           height: 58px;
        }
        </style>
      </head>
    
      <body>
        <div id="gadgetContent">
          <a href="http://stackoverflow.com/users/2012446/chrisprosser">
            <img src="http://stackoverflow.com/users/flair/2012446.png" width="208" height="58" 
                 alt="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers" 
                 title="profile for ChrisProsser at Stack Overflow, Q&amp;A for professional and enthusiast programmers"/>
          </a>
        </div>
      </body>
    </html>