The style sheet and font you should use depend on the gadget's functionality and theme, and can vary with different gadgets. A gadget can use multiple sStyle sheets for different pages of the gadget window, such as the settings page and the flyout page. The style sheet is a language used to describe the presentation of an HTML page. The fonts and the styles used to format text in the gadget are also very important while designing a gadget. When the mouse is moved on the Notes Gadget (image on the right), the action buttons are visible. All these glyph images can be found in the Extras section in the book download.įigure 3.27 The Notes Gadget by default (left image) does not show the action buttons. If the action buttons need to be shown in the gadget's main window, always try to keep them hidden by default and have them activate only on mouse hover or when the gadget is active. Figure 3.26 shows a number of these glyphs with possible actions they can each represent.
Controlsįor any controls or action buttons that need to appear on the gadget, only the glyph images consistent with Windows should be used.
A black shadow with an opacity level 25% can be used for the docked image for a two-three-pixel shadow, and an opacity value of 75% can be used for a 10-pixel shadow in images for undocked gadgets.
You can add the shadow to an image by using photo-editing software or the graphics protocol provided by the Vista Gadget Model. When the image is undocked, the shadow should be more prominent-10 pixels to the left and 18 pixels to the right. When the gadget is docked, the image should have a shadow of 2 pixels on the left and 3 pixels on the right. The first one has the name "Currency" and the second one is called "MyMoneyGadget," which displays as "MyMoneyGad." You can avoid this undesirable result by keeping the title short.įigure 3.25 A Currency Gadget uses different images to display the gadget's background in different sizes. For example, for a Google Search Gadget, use the title "Google Search" rather than " Search bar." Figure 3.23 shows two gadgets in the Gadget Picker window. Keep the gadget's title to two or three meaningful words, 15 letters maximum, so that it displays properly in the Gadget Picker. Here is the list of items to consider when developing a theme for your gadget:Ī gadget's visual theme starts at its icon and title, which appear in the Gadget Picker window after installation. They all work together to present a unified theme to a user. It is all about what users see and also what they don't see. Visual theme is about images, text, fonts, colors, sizes, and styles-everything together. The visual theme determines the look and feel of the gadget. Creating Vista Gadgets: Using HTML, CSS and JavaScript with Examples in RSS, Ajax, ActiveX (COM) and Silverlight