When you make a gadget, it can work on both Spaces and Live.com. Follow the SDK to get started.

Make sure you consider the Author and Viewer modes.

Author mode is when the space owner is in “edit” mode of their space. This is where the space owner would configure their gadgets. Viewer mode is when a visitor is viewing someone’s space. This is also true when the space owner is viewing their space while not in “edit” mode. Gadgets on live.com are always in author mode. There is no distinction between author and viewer mode on live.com. Here is an example of how to determine author or viewer mode on Spaces:

m_mode = m_module.getMode();

getMode will either return Web.Gadget.Mode.author or Web.Gadget.Mode.viewer

Recommendations to make your gadget look better:

• Gadget width - Gadgets on Spaces are only allowed to take up ½ the width of the larger columns on Spaces. Gadgets on Live.com always take up 100% of the width of the column they are contained within. You can test for the width of a gadget by getting the offset width of the “module” class.

var myWidth = m_el.offsetWidth

• Transparency - You may want to set the background color of your gadget to “transparent”. The default gadget background is always white. This works well on live.com but several themes on Spaces have other background colors. Here is an example of how to set background transparency:

if (window.parent != window.self) {

document.body.style.backgroundColor = "transparent";

}

• Spaces themes - Gadgets on Spaces do not have access to the font / css information of the underlying page. It is recommended that you implicitly set a font family and size in your gadget CSS file. It is also recommended that you allow the space owner to set the text color of their gadget in author mode. Allowing the user to choose between white or black text solves most issues with font colors.

The Windows Live Gallery Team