Customizing gadget styles in themes

Gadget styles can be applied to gadgets to change their appearance. The gadget style will determine the color and format of the gadget title, the gadget content, and the gadget border.

Styles are not supported for all gadgets out of the box. To add styles to a gadget, follow these steps:

1. Modify the GadgetStyles.cfg file, adding names and values for each gadget style.
   <GadgetStyles> <Style Name="None" Value="gadgetStyle000" /> <Style Name="Theme style 1" Value="gadgetStyle001" /> <Style Name="Theme style 2" Value="gadgetStyle002" /> <Style Name="Theme style 3" Value="gadgetStyle003" /> </GadgetStyles>
2. Add a style selection control to SettingsLayout.cfg for the gadget using the following code:
   <Control settingName="Style"/>
   For more information on parameterizing gadgets, see Adding parameters to gadgets. 
3. Parse this parameter and use in your gadget's template (GadgetTemplate.tpl). For example, form a CSS class from it as we do in the StyledWrapper control (see Customizing theme controls):
   <div class="artBoxContainer artBoxContainerType-<$Model.Appearance.StyleValue$>">